echarts 柱状图渐变色

1、HTML

<div class="line1" id="bar" ref="bar_wrap"></div>

2、style

.line1{
  width: 100%;
  height: 90%;
  min-width: 507px;
  min-height: 344px;
}

3、script

import echarts from 'echarts'

import 'echarts/lib/chart/bar'

4、mounted 

let myBar = this.$echarts.init(this.$refs.bar_wrap)

myBar.setOption({
  color: ['#00daee'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow'
      // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7', '9.8', '9.9', '9.10'],
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#00daee',
          width: 1
        },
        textStyle: {
          color: '#ffffff',
          fontSize: 25
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#00daee',
          width: 1
        },
        textStyle: {
          color: '#00daee'
          // fontSize: 25
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    { // For shadow
      type: 'bar',
      itemStyle: {
        normal: { color: 'rgba(0,0,0,0.05)' }
      },
      barGap: '-100%',
      barCategoryGap: '40%',
      animation: false
    },
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        normal: {
          // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            let index = params.dataIndex
            let colorList = [
              // 渐变颜色的色值和透明度
              // 透明度从0
              ['rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)'],
              // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
              ['#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe']
            ]
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              // 颜色的开始位置
              color: colorList[1][index] // 0% 处的颜色
            }, {
              offset: 1,
              // 颜色的结束位置
              color: colorList[0][index] // 100% 处的颜色
            }])
          }
        }
      },
      data: [10, 52, 200, 334, 390, 330, 220, 100, 20, 40]
    }
  ]
})

标签：color,渐变色,52,柱状图,rgba,34a7fe,167,echarts,254
来源： https://www.cnblogs.com/luckyShuang/p/11927358.html