echarts 自定义图片柱状图效果，使用图片实现实现并列柱状图的渲染.

实例代码

drawLine() {
  var that = this
  window.addEventListener('resize', this.drawLine)
  let myChart = echarts.init(this.$refs.echarts)
  var barWidth = 12
  var option = {
    textStyle: {
      color: '#c0c3cd',
      fontSize: 14,
    },
    legend: {
      show: true,
      top: 15,
      right: 0,
      itemWidth: 11,
      itemHeight: 6,
      icon: 'rect',
      padding: 0,
      textStyle: {
        color: 'rgba(0, 178, 255, 1)',
        fontSize: 14,
        padding: [0, 0, 0, 0],
      },
      data: [
        {
          name: '通过'
        },
        {
          name: '未通过',
        },
        {
          name: '不适用',
        },
      ],
    },
    color: ['rgba(0, 133, 255, 1)', 'rgba(255, 184, 1, 1)', 'rgba(20, 254, 0, 1)'],
    grid: {
      containLabel: true,
      left: 10,
      right: 0,
      bottom: 10,
      top: 60,
    },
    xAxis: {
      nameTextStyle: {
        color: '#c0c3cd',
        padding: [0, 0, -10, 0],
        fontSize: 12,
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 1)',
        fontSize: 14,
        interval: 0,
        lineHeight: 20,
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: '#384267',
          width: 1,
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#063073',
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 133, 255, 0.2)',
        },
        show: true,
      },
      data: this.list.map(obj => obj.name),
      type: 'category',
    },
    yAxis: {
      minInterval: 10,
      axisLabel: {
        color: '#4266a4',
        fontSize: 14,
        interval: 0,
      },
      axisTick: {
        lineStyle: {
          color: '#668092',
          width: 0,
        },
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#063073',
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 133, 255, 0.2)',
          width: 1
        },
        show: false,
      }
    },
    // 调整柱子间距
    series: [
      {
        name: '通过',
        type: 'pictorialBar',
        symbol: 'image://' + bg102,
        symbolSize: [barWidth, '100%'],
        data: this.list.map(obj => obj.value),
        barWidth: barWidth,
        symbolOffset: [-20, 0],
        legend: {
          show: false
        }
      },
      {
        name: '通过', // 顶部
        type: 'pictorialBar',
        symbolPosition: 'end',
        symbol: 'image://' + bg101,
        symbolSize: [barWidth, 2],
        symbolOffset: [-20, -2],
        data: this.list.map(obj => obj.value), // 设置顶部位置
        barWidth: barWidth,
        tooltip: {
          show: false,
          trigger: 'axis'
        },
      },
      {
        name: '未通过',
        type: 'pictorialBar',
        barCategoryGap: '40%', // 类别之间的间距
        symbol: 'image://' + bg202,
        symbolSize: [barWidth, '100%'],
        data: this.list.map(obj => obj.value2), // 减去底部的高度
        barWidth: barWidth,
        symbolOffset: [0, 0],
      },
      {
        name: '未通过', // 顶部
        type: 'pictorialBar',
        symbolPosition: 'end',
        symbol: 'image://' + bg201,
        symbolSize: [barWidth, 2],
        symbolOffset: [0, -2],
        tooltip: {
          show: false,
          trigger: 'axis'
        },
        data: this.list.map(obj => obj.value2), // 设置顶部位置
        barWidth: barWidth,
      },
      {
        name: '不适用',
        type: 'pictorialBar',
        barCategoryGap: '40%', // 类别之间的间距
        symbol: 'image://' + bg302,
        symbolSize: [barWidth, '100%'],
        data: this.list.map(obj => obj.value3), // 减去底部的高度
        barWidth: barWidth,
        symbolOffset: [20, 0],
      },
      {
        name: '不适用', // 顶部
        type: 'pictorialBar',
        symbolPosition: 'end',
        symbol: 'image://' + bg301,
        symbolSize: [barWidth, 2],
        symbolOffset: [20, -2],
        tooltip: {
          show: false,
          trigger: 'axis'
        },
        data: this.list.map(obj => obj.value3), // 设置顶部位置
        barWidth: barWidth,
      },
    ],
    tooltip: {
      show: true,
      trigger: 'axis'
    },
  };
  myChart.clear()
  myChart.resize()
  myChart.setOption(option)
},