柱状图-横向柱状图-不同颜色

效果图：

 

代码：

//获取echart实例
const chart = this.refs.vChartRef.chart
const data = [{
  value: 800,
  name: '已接用'
},
{
  value: 400,
  name: '剩余'
},
{
  value: 400,
  name: '使用率'
}]
let total = data.reduce((p, v) => {
  return p + v.value - 7
}, 0)
const update = () => {
  // 图表设置tooltip
  chart.setOption({
    backgroundColor: "transparent",
    legend: {
      show: false
    },
    xAxis: {
      show: false,
    },
    grid: {
      left: '5%',
      top: '8%',
      width: '90%',
      height: '94%',
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: ['已接用', '剩余', '使用率'],
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          color: 'rgba(255, 255, 255, 0.85)',
          margin: 0,
          padding: [0, 0, 14, 0],
          align: 'left',
          verticalAlign: 'bottom',
          formatter: function (value, index) {
            return '{title|' + value + '}';
          },
          rich: {
            title: {
              width: 50,
              fontSize: 10,
              color: "rgba(255, 255, 255, 0.85)"
            },
          },
        },
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: ['800', '400', '800'],
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          color: 'rgba(255, 255, 255, 0.85)',
          margin: 0,
          padding: [0, 0, 14, 0],
          align: 'right',
          verticalAlign: 'bottom',
          formatter: function (value, index) {
            if (index == 0 || index == 1) {
              return '{title|' + value + 'u}';

            } else {
              return '{title|' + (100 - ((data[index].value / total) * 100).toFixed(0)) + '%}';
            }
          },
          rich: {
            title: {
              fontSize: 10,
              color: "rgba(255, 255, 255, 1)"
            }
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        barMinWidth: 6,
        backgroundStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
        yAxisIndex: 0,
        data: data,
        barWidth: 6,
        // align: left,
        itemStyle: {
          normal: {
            color: function (params) {
              // 给出颜色组
              var colorList = ['#1677FF', '#FFD200', '#62DBED'];
              return colorList[params.dataIndex]
            }
          },
        },
        label: {
          show: false,
        },
      },
    ],

  })
}
setTimeout(update, 0)