柱状图-横向渐变色柱状图

效果图：

 

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      show: true,
      backgroundColor: 'rgba(10, 30, 30, 0.8)',
      borderColor: 'transparent',
      padding: [8, 20, 8, 8],
      textStyle: {
        color: '#fff',
        opacity: 1,
        fontSize: 15,
      },
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '16%',
      top: '12%',
      width: '77%',
      height: '74%',
    },
    legend: {
      show: true,
      top: "2%",
      left: "12%",
      itemGap: 10,
      icon: "circle",
      data: ['入库情况'],
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 14,
        fontFamily: "Source Han Sans CN",
        fontWeight: "normal",
        color: "#FFFFFF",
        opacity: 0.8,
      },
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(230, 247, 255, 0.2)'
        },
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#CCCCCC'
        },
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 16,
        fontFamily: 'Source Han Sans CN',
        fontWeight: 400,
        lineHeight: 30,
        color: '#cccccc',
        margin: 3
      },
    },
    yAxis: {
      type: "category",
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "rgba(112,112,112,0.5)",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#CCCCCC'
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 16,
          fontFamily: 'Source Han Sans CN',
          color: '#cccccc',
          margin: 3
        },
      },
      axisTick: {
        show: false,
      },
      inverse: true,
      data: xLists,
    },
    series: [
      {
        name: "入库情况",
        type: "bar",
        showBackground: false, //柱状背景
        barWidth: 12,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: "rgba(184,255,1,1.00)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(184,255,1,0.00)", // 100% 处的颜色
              },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        label: {
          show: false,
        },
        emphasis: {
          focus: "series",
        },
        data: xV1s,
      }
    ],
  })