設置數據:

效果圖:

optionAll: {
          title: {
            text: ‘營收情況‘,
            left: ‘center‘
          },
          tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
              type: ‘cross‘,
              crossStyle: {
                color: ‘#999‘
              }
            }
          },
          legend: {
            // bottom: 10,
            // data: [‘金額‘]
            bottom: 10,
            left: ‘center‘,
            data: [‘預計可收‘, ‘已收‘, ‘剩余代收‘]
          },
          xAxis: [
            {
              type: ‘category‘,
              data: [],
              axisPointer: {
                type: ‘shadow‘
              }
            }
          ],
          yAxis: [
            {
              type: ‘value‘,
              name: ‘金額(元)‘,
              // min: 0,
              // max: 500,
              // interval: 100,
              axisLabel: {
                formatter: function(value) {
                  let num = value / 1000
                  return num + ‘k‘
                }
              }
            }
          ],
          series: [//一組顯示多條柱形圖
            {
              barMaxWidth: ‘30‘,
              itemStyle: {normal: {color: ‘#999‘, label: {show: true}}},
              name: ‘預計可收‘,
              type: ‘bar‘,
              data: []//[a,a,a,a]
            }, {
              barMaxWidth: ‘30‘,
              itemStyle: {normal: {label: {show: true}}},
              name: ‘已收‘,
              type: ‘bar‘,
              data: []//[b,b,b,b]
            }, {
              name: ‘剩余代收‘,
              itemStyle: {normal: {label: {show: true}}},
              type: ‘bar‘,
              data: []//[c,c,c,c]
            }
          ]
        }

Echart--多個柱形圖