自定义Echarts柱状图， 一图显示多组数据

 //先定义图表容器， 至于图表所需要的js啥的， 请自行搜索教程， 不多赘述

<div id="timeCostDiv" style="height:300px; width:90%; margin-left:5%;" />

created() {
    this.loadTimeCost()
},

loadTimeCost() {
      const that = this
      const param = { dateBegin: that.dateBegin, dateEnd: that.dateEnd, limit: 5, type: that.dateType }
      timeCostStatistics(param).then(data => {
        if (data) {
          var dataList = []
          // color: ['#fec12b', '#f3535f', '#2163db', '#a43971', '#00d0b0'],
          // 第一个数值, 代表维度列数, 第二个数值是数据范围start, 第三个数值是数据范围end, 第四个数值是第几根柱子, 第五个数值代表当前维度列有几个柱子
          // data.push({ name: '1', value: [0, 0, 120, 1, 4] })
          dataList.push({ itemStyle: { normal: { color: '#fec12b' }}, name: '进场时间', value: [0, 0, data.timeCostStatistics[0].carApproachTimeCost, 1, 3] })
          dataList.push({ itemStyle: { normal: { color: '#f3535f' }}, name: '检测时间', value: [0, 0, data.timeCostStatistics[0].carTimeCost, 2, 3] })
          dataList.push({ itemStyle: { normal: { color: '#2163db' }}, name: '等候时间', value: [0, 0, data.timeCostStatistics[0].carWaitTimeCost, 3, 3] })

          dataList.push({ itemStyle: { normal: { color: '#fec12b' }}, name: '进场时间', value: [1, 0, data.timeCostStatistics[0].trunkApproachTimeCost, 1, 3] })
          dataList.push({ itemStyle: { normal: { color: '#f3535f' }}, name: '检测时间', value: [1, 0, data.timeCostStatistics[0].trunkTimeCost, 2, 3] })
          dataList.push({ itemStyle: { normal: { color: '#2163db' }}, name: '等候时间', value: [1, 0, data.timeCostStatistics[0].trunkWaitTimeCost, 3, 3] })

          dataList.push({ itemStyle: { normal: { color: '#fec12b' }}, name: '进场时间', value: [2, 0, data.timeCostStatistics[0].otherApproachTimeCost, 1, 3] })
          dataList.push({ itemStyle: { normal: { color: '#f3535f' }}, name: '检测时间', value: [2, 0, data.timeCostStatistics[0].otherTimeCost, 2, 3] })
          dataList.push({ itemStyle: { normal: { color: '#2163db' }}, name: '等候时间', value: [2, 0, data.timeCostStatistics[0].otherWaitTimeCost, 3, 3] })

          for (var i = 0; i < data.timeCostShort.length; i++) {
            dataList.push({ itemStyle: { normal: { color: '#a43971' }}, label: { show: true, position: 'top', formatter: '{b}', textStyle: {
              fontSize: 10,
              fontWeight: 10,
              color: 'black'
            }}, name: data.timeCostShort[i].carNum, value: [3, 0, data.timeCostShort[i].minute, (i + 1), data.timeCostShort.length] })
          }

          for (var a = 0; a < data.timeCostLong.length; a++) {
            dataList.push({ itemStyle: { normal: { color: '#00d0b0' }}, label: { show: true, position: 'top', formatter: '{b}', textStyle: {
              fontSize: 10,
              fontWeight: 10,
              color: 'black'
            }}, name: data.timeCostLong[a].carNum, value: [4, 0, data.timeCostLong[a].minute, (a + 1), data.timeCostLong.length] })
          }

          const titleData = ['轿车', '货车', '其它车辆', '用时最短', '用时最长']
          setTimeout(() => {
            // 加载图表
            that.loadTimeCostHistogramCharts(dataList, titleData)
          }, 1000)
        }
      }).catch(e => {
        this.$message({
          type: 'error',
          message: '请求失败!'
        })
      })
    },

loadTimeCostHistogramCharts(dataList, titleData) {
      var chartDom = document.getElementById('timeCostDiv')
      var myChart = echarts.init(chartDom)
      console.log(dataList)

      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          bottom: '10%',
          width: '90%',
          left: '5%'
        },
        legend: {
          data: titleData,
          y: 'top',
          left: 'center'
          // padding: [0, 0, -10, 0] // 调整标签位置  (上 右 下 左),
        },
        xAxis: {
          type: 'category',
          data: titleData,
          splitArea: {},
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        },
        series: [
          {
            type: 'custom',
            renderItem: this.renderItem,
            itemStyle: { normal: { opacity: 0.8 }},
            encode: { y: [1, 2], x: 0 },
            data: dataList
          }
        ]
      }
      option && myChart.setOption(option)
      const listener = function() {
        myChart.resize()
      }
      EleResize.on(document.getElementById('timeCostDiv'), listener)
    },

renderItem(params, api) {
      // api.value(x), x是每一个data数组的下标数据  例: data: [0, 100, 2, 3], x是0, 那它就会取第一个数值0, x是1, 则会取第二个值100, 每个data第一个数值代表的是维度列, 代表这个数据在第几个维度列中
      const categoryIndex = api.value(0)
      const start = api.coord([categoryIndex, api.value(1)])
      const end = api.coord([categoryIndex, api.value(2)])

      const num = api.value(4) // 每个系列柱子数
      let width = api.size([0, api.value(2)])[0] * 0.3
      if (num > 3) {
        width = api.size([0, api.value(2)])[0] * 0.5
      }
      const currentIndex = api.value(3)
      const isOdd = num % 2 === 0
      const midN = isOdd ? num / 2 : (num + 1) / 2

      var rect = ''

      width = width / num

      let rectX = start[0] - width / 2

      const FIXED_WIDTH = 10 // 柱子间距

      // 数据处理，结构为 { itemStyle: { normal: { color: 'lightgreen' } }, name: '2011', value: [0, 0, 150, 2, 5] }
      // 其中value 分为五个维度，分别为{系列项}（从0开始）、y轴起始值(均为0)、实际值、同系列中索引值（从1开始）、同系列数据项总数
      // 当前纬度列柱子总数大于1
      if (num > 1) {
        // 当前柱子总数为偶数时
        if (isOdd) {
          // 当前竹子的下标小于等于 midn时
          if (currentIndex <= midN) {
            // 中位数左侧
            rectX =
              start[0] - width / 2 - width / 2 + (currentIndex - midN) * width - FIXED_WIDTH * (midN + 1 - currentIndex)
          } else {
            // 中位数右侧
            rectX =
              start[0] - width / 2 + width / 2 + (currentIndex - midN - 1) * width + FIXED_WIDTH * (currentIndex - midN)
          }
        } else {
          rectX = start[0] - width / 2 + (currentIndex - midN) * (width + FIXED_WIDTH)
        }
      }

      rect = {
        type: 'rect',
        shape: echarts.graphic.clipRectByRect(
          { x: rectX, y: end[1], width: width, height: start[1] - end[1] },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        ),
        style: api.style()
      }
      return rect
    },

这个自定义的功能是参考一位大佬的帖子做出来的， 以此为基础加了一些优化， 但是我找不到大佬的帖子链接了， 如果有发现的请告诉我， 我在帖子上加一下， 以谢大佬指点之恩。非常感谢， 欢迎各路大佬前来讨论， 感激不尽。

代码007普通

打赏 收藏 海报 链接