echarts自定义胶囊柱图并设置每个柱子的渐变色

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

  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
  },
}