echarts+vue：实现柱状图渐变色效果，且每个柱子颜色不同

echarts+vue：实现柱状图渐变色效果，且每个柱子颜色不同

需要实现的效果图

背景

Echarts的柱状图，由于默认所有柱子都是同一个颜色，且颜色为纯色系，显示效果不能满足我们的设计稿要求，遂需要进行改造。除了颜色的问题，同时存在以下几个小问题会一同解决：

1. 多数值柱状图；
2. 带圆角的柱状图；

解决思路

这是一个集多数值的柱状图、每个柱子的颜色不同，且每个柱子都有自己的渐变色、带圆角的柱状图于一体的柱状图，就需要考虑代码的整洁性和复用性。
由于柱子的宽度和y轴坐标值一样，只是每个柱子的值、颜色、名称不同，可以考虑将每个柱子的设置对象写成公共方法，经过传值完成。

为每个柱子设置不同颜色，以及渐变色的设置

这个是在series中进行设置的，series是个数组，我们有三个柱子表示三种数据，每个柱子对应数组中的一个对象，即series数组中包含了三个对象：

series:[
	self.getSeriesData(data,0),
	self.getSeriesData(data,1),
	self.getSeriesData(data,2),
],

备注：为了提高代码的可读性和可拓展性，减少冗余代码，此处将数组中的对象提取成一个公共方法，根据参数不同，显示不同数据

1. 首先将每个柱子的配置对象写成公共方法：

getSeriesData(data,index){
      return {
        name:data.legend[index],
        type: 'bar',
        barGap: 0,
        itemStyle: {
          //echarts原color配置，所有柱子颜色为data.colors[index]最后一项渐变
          // color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   {
          //     offset: 0,
          //     color: data.colors[index][0]
          //   },
          //   {
          //     offset: 1,
          //     color: data.colors[index][1]
          //   }
          // ]),
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:0.95,
            colorStops: [
              {
                offset: 0,
                color: data.colors[index][0]
              },
              {
                offset: 1,
                color: data.colors[index][1]
              }
            ]
          },
          borderRadius: [5, 5, 0, 0] // 简化属性名
        },
        data: data.data[index]
      }
    },

在series中进行调用即可。这样不仅柱子是渐变色，而且每个图例也会自动变成渐变色。
borderRadius: [5, 5, 0, 0], // 实现带圆角的柱子。

转自：https://juejin.cn/post/7367542526179491903