【Echarts】柱状进度条，渐变，轴末端显示亮点

UI图

 

效果图：

整体来说达到预期，距离林心如版的小龙女还差一点。

 

柱状图知识点汇总：

1.grid布局

grid: {
        top: 20,
        bottom: 30,
        left: 20,
        right: 20,
        containLabel: true,//grid区域是否包含刻度标签，false可能会溢出
      },

2.轴属性

 

3.进度条双柱重合

 

4.进度条轴末端显示亮点

效果：

 

5.颜色渐变：

线性渐变：

 type: 'linear', //线性渐变，效果如上
 x: 1,  y: 1, x2: 0, y2: 0,
                colorStops: [
                  {
                    offset: 0, color: colorItem[0], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: colorItem[1], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false

 

径向渐变：

 type: 'radial',
                x: 0.5, y: 0.5, r: 0.5,
                colorStops: [
                  {
                    offset: 0, color: colorItem[0], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: colorItem[1], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false