echarts柱狀圖不同的柱子循環顯示不同的漸變顏色

    getBarECharts (xdata, ydata) {
      let medicalCare = echarts.init(document.getElementById('medicalCare'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: 30,
          bottom: 30
        },
        textStyle: {
          fontSize: 16,
          color: '#fff'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#274365'
            }
          },
          data: xdata,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {}
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#274365'
            }
          }
        },
        series: [
          { // For shadow
            type: 'bar',
            itemStyle: {
              normal: {color: 'rgba(20,73,152,0.6)'}
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            animation: false
          },
          {
            data: ydata,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    ['#569cea', '#633fdd'],
                    ['#266fe6', '#d2ad21'],
                    ['#256ee7', '#d24047']
                  ]
                  var index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  //  配置文件中的:0,0,0,1的意思是顏色豎向排列,0,0,1,0的意思是顏色橫向渲染,1,0,0,0 橫向相反渲染,0,1,0,0 豎向相反渲染
                  return new echarts.graphic.LinearGradient(0, 1, 0, 0,
                    [
                      {
                        offset: 0,
                        color: colorList[index][0] // 0% 處的顏色
                      },
                      {
                        offset: 1,
                        color: colorList[index][1] // 100% 處的顏色
                      }
                    ])
                }
              }
            },
            barWidth: 15
          }
        ]
      }
      medicalCare.setOption(option)
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章