echarts 自定义图表

最近公司有个大屏的项目，其中里面有个饼图需要做，所以就研究了一下echarts.
话不多说，直接看图吧，图片看不出动画效果可以直接看demo吧。
https://gallery.echartsjs.com/preview.html?c=xuIPjP5Bo1&v=1

image.png

代码只是简单的实现效果，代码量比较多，还没来得及做优化的

代码可以直接复制的，这里就不多说代码了，主要记录一下中间遇到的一些问题吧。

1.使用自定义画圆环

我看了很多的demo，他们的圆环都是通过配置饼图pie来实现，个人觉得这样做可能不太好吧(只是单纯的觉得)，然后我就用了custom的方式来实现的。还有一个原因是因为echarts的底层实现是用的zrender
https://ecomfe.github.io/zrender-doc/public/，刚好前段时间我也学习过。

series:[{
            name: "ring0",
            type: 'custom',//自定义系列
            coordinateSystem: "none",//不使用坐标系
            renderItem: function(params, api) {
                return {
                    type: 'arc',//圆弧
                    shape: {
                        cx: api.getWidth() / 2,//原点坐标X
                        cy: api.getHeight() / 2,//原点坐标Y
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,//半径
                        startAngle: (0+-angle) * Math.PI / 180,//开始角度
                        endAngle: (90+-angle) * Math.PI / 180//结算角度
                    },
                    style: {
                        stroke: "rgb(255, 255, 255,0.2)",//画笔颜色
                        fill: "transparent"//填充颜色
                    },
                    silent: true//不响应鼠标以及触摸事件
                };
            },
            data: [0]//数据没用，随便写的
        }]

这里面主要就是写renderItem函数，看看文档就基本会了，官方提供了很多的基础图形，只要按照参数配置就可以了。

2.如何做到自适应

从上图的代码中可以看到只要能控制cx、cy、r这三个参数就可以实现自适应，这里的 cx、cy可以通过api.getWidth()和api.getHeight()来拿到。

• api.getWidth() echarts 容器的宽度。
• api.getHeight()echarts 容器的高度。

这里唯一出问题的就是半径r,最开始我是这样做的

• r: api.getWidth() / 2 * 0.85
  但是这样有问题，我发现随着屏幕的变化，echarts原始的饼图达到一定宽度后就不变化，这样就导致我的图形错位了。

然后我去看了echarts的源码文件，发现它的半径是在容器的宽度和高度之间选了一个最小值的来做的。

image.png

3.怎么让圆圈动起来

其实给的只是UI设计图，也没要求说要做动画的，这里只是我手贱自己做的，但是感觉做动画的方式有问题，暂时这样吧，反正项目中我又不要动画。

动起来其实无非就是让echarts重新渲染，更新坐标而已。

function draw(){
    angle = angle+3 //角度
    myChart.setOption(option, true)
   //window.requestAnimationFrame(draw);
}
//draw()

setInterval(function() {
    //用setInterval做动画感觉有问题，而且我只是想更新某一个圆圈
    draw()
}, 100);

本来想着用window.requestAnimationFrame()的，虽然循环在执行了，但是就是动不起来，我也不知道是什么原因，可能是屏幕刷新频率太快了吧。