echarts自定義膠囊柱圖並設定每個柱子的漸變色

    drawCharts() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine:{//座標軸在grid區域的分割線
              show:false
            },
            axisLabel:{
              show:false
            }
        },
        yAxis: [
          {
            type: 'category',
            data: ['日發電', '月發電', '年發電'],
            inverse:true,
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            }
          },
          {
            type: 'category',
            data: [1000, 1000, 1000],
            inverse:true,
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            },
            axisLabel:{
              textStyle:{
                fontSize:12,
                color:"#fff"
              }
            }
          }
        ],
        series: [
          {
              name: '資料',
              type: 'bar',
              yAxisIndex:0,
              data: [10, 52, 20],
              barWidth: '38%',
              label:{
                show:true,
                position: 'top', 
                formatter:function(params){
                  return params.data+"%";
                }
              },
              // 設定每個柱子的漸變色
              itemStyle: {
                  borderRadius:[0, 0, 50, 0],
                  color:function(params){
                    let colorList = [
                        ['#0B42A7', '#209CFF'],
                        ['#068054', '#0DB484'],
                        ['#C86A05', '#E9B500'],
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0,0,1,0,
                      [
                        {
                          offset: 0,
                          color: colorItem[0]
                        },
                        {
                          offset: 1,
                          color: colorItem[1]
                        }
                      ], false
                    )
                  }
              }
          },
          {
            name: '',
            type: 'bar',
            yAxisIndex:1, //使兩個柱狀圖重合的效果
            barWidth: '40%',
            data: [100, 100, 100, 100, 100,100, 100],
            label:{
              show:false
            },
            itemStyle:{
              color:"none",
              borderColor:"#143670",
              borderWidth:2,
              borderRadius:[0, 0, 50, 0],
            },
          }
        ]
      }
      myChart.setOption(option);
    },
    onSelectChange(selectedRowKeys) {
      if (selectedRowKeys.length > 4) {
        this.$message.warning('最多隻能選擇4條缺陷！')
        return
      }
      this.selectedRowKeys = selectedRowKeys
    },
  }