Echarts bar chart horizontal layout color gradient effect

Effect:

import echarts from 'echarts'

/**
 * 2. 拥堵路段--carJam.vue
 */
var option_carJam = {
  title: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    textStyle: { // 设置提示框的对齐方式
      align: 'left'
    }
  },
  legend: {
    show: false
  },
  grid: {
    left: '3%',
    right: '2%',
    top: '5px',
    bottom: '0',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: { // 去除背景网格线
      show: false
    },
    axisTick: { // 刻度
      show: false // 不显示刻度线
    },
    axisLine: { // 设置轴线
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      data: ['xx路', 'yyy路', 'zz路', 'w路'],
      axisTick: { // 刻度
        show: false // 不显示刻度线
      },
      axisLine: { // 设置轴线
        show: false
      },
      axisLabel: {
        formatter: function (data) {
          let valueTxt = ''
          if (data.length > 3) {
            valueTxt = data.substring(0, 4) + '...'
          } else {
            valueTxt = data
          }
          return valueTxt
        },
        textStyle: {
          fontFamily: 'MicrosoftYaHei',
          fontSize: '12',
          color: '#CBD9FF',
        }
      }
    },
    {
      type: 'category',
      data: [0.3,0.23,0.75,0.88],
      axisTick: { // 刻度
        show: false // 不显示刻度线
      },
      axisLine: { // 设置轴线
        show: false
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'ArialMT',
          fontSize: '12',
          color: '#86A5C3' // 坐标值的具体的颜色
        }
      }
    }
  ],
  series: [
    {
      name: '2019年',
      type: 'bar',
      data: [0.3,0.23,0.75,0.88],
      barWidth: 7,
      itemStyle: { // 柱状图的背景色
        normal: {
          // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            var index = params.dataIndex
            var colorList = [
              // 渐变颜色的色值和透明度
              // 透明度从0
              ['rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(13,94,208,0.3)', 'rgba(255,155,15,0)', 'rgba(253,103,96,0.3)'], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
              ['rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(13,94,208,0.6)', 'rgba(255,155,15,0.6)', 'rgba(253,103,96,0.6)']
            ]
            return {
              colorStops: [{
                offset: 0.3, // 颜色的开始位置
                color: colorList[0][index] // 0% 处的颜色
              },
              {
                offset: 0.6, // 颜色的结束位置
                color: colorList[1][index] // 100% 处的颜色
              }]
            }
          }
        }
      }
    }
  ]
}