echarts 实现环形渐变
需求: 环形图是 echarts 中 pie 图的一个变种,echarts 官方对于 pie 图的颜色渐变只支持两种: linear 线性渐变 与 css 3 的 Linear Gradients 相似,即向下/向上/向左/向右/角度方向渐变,类似与射线 radial 镜像渐变 与 css 3 的 Radial Gradients 相似,即从圆心向外一圈圈渐变出去,类似与太阳辐射 渐变颜色属性 本文实现的弧形渐变是利用线性渐变的实现的,动手前需要了解到 itemStyle.color 属性的配置与其子属性表示的意义,可以参考 echarts 配置文档 series-pie::itemStyle::color 。主要了解这几个属性: type :渐变类型,支持 linear / radial x , y , x2 , y2 :向量坐标,即渐变开始的起点坐标 (x, y),与结束坐标 (x2, y2),会影响到 colorStops 中对图表的着色,需要注意的是值的范围在 0 ~ 1 之间 colorStops :色彩过程,值为元素是 { offset: PERCENTAGE, color: COLOR } 的数组,每个元素表示在什么位置是什么颜色(如,在 30% 的位置是红色, { offset: 0.3, color: 'red' } ) 实现流程 实现过程主要分为以下几个步骤: