柱状图-无轴横向柱状图-自定义显示内容

效果图：

 

代码：

const data = [{
  value: 498,
  name: '1号生产线'
},
{
  value: 460,
  name: '2号生产线'
},
{
  value: 421,
  name: '3号生产线'
},
{
  value: 400,
  name: '4号生产线'
},
{
  value: 396,
  name: '5号生产线'
},
{
  value: 346,
  name: '6号生产线'
}]
const colorList = ['rgba(30,231,231,0.35)', '#D0E71E']
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: ['1号生产线', '3号生产线', '3号生产线', '4号生产线', '5号生产线', '6号生产线'],
        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: 12,
              color: "rgba(255, 255, 255, 0.85)"
            },
          },
        },
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: ['1号生产线', '3号生产线', '3号生产线', '4号生产线', '5号生产线', '6号生产线'],
        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) {
            return '{title|' + data[index].value + '}{unit|/500}';
          },
          rich: {
            title: {
              fontSize: 16,
              color: "rgba(255, 255, 255, 1)"
            },
            unit: {
              fontSize: 12,
              color: "rgba(255, 255, 255, 0.85)"
            },
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        barMinWidth: '10',
        backgroundStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
        yAxisIndex: 0,
        data: data,
        barWidth: 10,
        // align: left,
        itemStyle: {
          normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colorList[0],
              },
              {
                offset: 1,
                color: colorList[1],
              },
            ]),
          },
        },
        label: {
          show: true,
          fontSize: 12,
          color: "#FFFFFF",
          position: "insideLeft",
          offset: [165, -14],
          formatter: function (params) {
            return '{unit|已完成：}{title|' + (((params.value) / 500) * 100).toFixed(1) + '}{unit|/%}';
          },
          rich: {
            title: {
              fontSize: 16,
              color: "rgba(255, 255, 255, 1)"
            },
            unit: {
              fontSize: 12,
              color: "rgba(255, 255, 255, 0.85)"
            },
          },
        },
      },
    ],

  })
}
setTimeout(update, 0)