记录一下在公司遇到的一些功能，以及相关实现

以上的内容我花了一周时间去实现的，自己也觉得时间很长，但主要因为很少使用ECharts，导致使用的过程中大部分的时间都在查文档。

对于上面的这些功能点，其实算是写了两遍吧，这周一开了个Code Review，因为涉及到公共组件了，所以得想办法迁移出去，导致得重新改善一下代码；另一方面的话，主要是我把每一个功能其实都拓展成一个图表了（也就是说包括主图表、内环图表、外环图表、环形文字图表），会导致渲染消耗太大，所以得进行细分，也就是加入到series里即可。

接下来我们来说说各个功能点如何实现吧

内环

效果如下

简单说就是在饼图内部实现一个圆环的旋转效果，因为长度、颜色的相关联，

所以我的思路就是再画一个饼图图表去实现它，然后删除lengend、tooltip等相关提示。

一开始想多添加一个series解决的，但是因为需要旋转效果，不好获取这个元素，所以就把它抽离出来，单独实现一个了

删除图表相关提示信息的代码

option = {
	backgroundColor: 'transparent',
  tooltip: {
    show: false
  },
  legend: {
    show: false
  },
  series: [
    {
      silent: true, // 禁用图标中的点击和触摸事件
      left: 0,
      label: {
        show: false
      },
      itemStyle: 
        borderWidth: 0,
        borderRadius: 0,
      }
    }
	]
}

渐变色效果

主要就是通过线性渐变去实现的，还看了几个不错的文章，只是实现比较复杂，但效果更好一点

玩转ECharts之实现“环形渐变”

color: props.option.color.map(color => {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(0,180,255,.05)' // 0% 处的颜色
      },
      {
        offset: 1,
        color: color // 100% 处的颜色
      }
    ]
  }
})

最终实现效果