在vue项目中，echarts图表为了看起来酷炫，会使用渐变色效果，我们可以通过vue的计算属性来生成渐变色的代码，然后赋值给echarts.

生成渐变色

computed: {
    colorList: function () {
      var list = [{
        start: 'rgba(30, 191, 244, 1)',
        end: 'rgba(57, 255, 234, 1)'
      }, {
        start: 'rgba(1, 66, 230, 1)',
        end: 'rgba(56, 172, 247, 1)'
      }, {
        start: '#fcae22',
        end: '#f9a611'
      }]
      var colorList = []
      list.forEach((type) => {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: type.start
        },
          {
            offset: 1,
            color: type.end
          }
        ])
        colorList.push(color)
      });
      return colorList
    }
  },

赋值给echarts

drawEcharts() {
      var that = this
      let myChart = echarts.init(this.$refs.echarts)
      var colors = this.colorList
      var data = that.list
      var option = {
        color: colors,
        legend: {
          height: '80%',
          show: true,
          type: "scroll",
          orient: 'vertical',
          right: '10%',
          top: 'center',
          bottom: 20,
          pageButtonItemGap: 10,
          pageButtonGap: 10,
          pageIconColor: '#44e6fd',
          pageIconInactiveColor: '#fbffff',
          pageTextStyle: {
            color: '#35ffff'
          },
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 16
        },
        series: [
          {
            name: '服务呈现',
            type: 'pie',
            radius: ['55%', '65%'],
            center: ['29%', '50%'],
            label: {
              position: 'center',
              normal: {
                show: false,
                fontSize: 14,
                position: 'center'
              },
            },
            emphasis: {
              label: {
                show: true,
                formatter: function (value, index) {
                  console.log(value)
                  return '{label|' + value.value + '}\n'
                    + '{value|' + value.name + '}'
                },
                rich: {
                  label: {
                    padding: 0,
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: FontChart(26),
                    color: '#0FFFFF',
                  },
                  value: {
                    align: 'center',
                    color: '#9AABD1',
                    padding: [0, 0, 10, 0],
                    fontSize: FontChart(16)
                  },
                },
              }
            },
            data: data
          },
        ],
        graphic: [
          {
            type: 'image', // 图形元素类型
            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
            z: 0, // 层叠
            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
            left: '1%',
            // left: 'center',
            top: 'center',
            style: {
              image: img,// 该图片为https开头或base64在线链接图片
              width: FontChart(250),
              height: FontChart(250)
            }
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
      let index = 1;//默认选中第二个
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0,//默认选中第0个
      });
      console.log(myChart)
      myChart.on('mouseover', function (e) {
        if (index) {
          index = null
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0,
          });
        }
      });
    },