最近公司有个大屏的项目，其中里面有个饼图需要做，所以就研究了一下echarts.
话不多说，直接看图吧，图片看不出动画效果可以直接看demo吧。
https://gallery.echartsjs.com/preview.html?c=xuIPjP5Bo1&v=1
代码只是简单的实现效果，代码量比较多，还没来得及做优化的
代码可以直接复制的，这里就不多说代码了，主要记录一下中间遇到的一些问题吧。
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的源码文件，发现它的半径是在容器的宽度和高度之间选了一个最小值的来做的。
3.怎么让圆圈动起来
其实给的只是UI设计图，也没要求说要做动画的，这里只是我手贱自己做的，但是感觉做动画的方式有问题，暂时这样吧，反正项目中我又不要动画。
动起来其实无非就是让echarts重新渲染，更新坐标而已。
function draw(){
angle = angle+3 //角度
myChart.setOption(option, true)
//window.requestAnimationFrame(draw);
}
//draw()
setInterval(function() {
//用setInterval做动画感觉有问题，而且我只是想更新某一个圆圈
draw()
}, 100);
本来想着用window.requestAnimationFrame()的，虽然循环在执行了，但是就是动不起来，我也不知道是什么原因，可能是屏幕刷新频率太快了吧。
