echarts 柱形图多个legend值 同一个柱形图分不同颜色展示

多个legend值 同一个柱形图分不同颜色展示

效果图：

如何实现：

原理：主要通过 series-bar 里面的 stack 数据堆叠来实现

series: [
    {
      name: 'Income',
      type: 'bar',
      stack: 'Total',  //设置堆叠
      label: {
        show: true,
        position: 'top'
      },
      data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']  //设置数据错位显示
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',  //设置堆叠
      label: {
        show: true,
        position: 'top'
      },
      data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]  //设置数据错位显示
    }
  ]

仔细观察上述代码，你会发现 data 里面的数据有特点， 数据是相互错位显示的
A： [900, 345, 393, ‘-’, ‘-’, 135, 178, 286, ‘-’, ‘-’, ‘-’]
B： [‘-’, ‘-’, ‘-’, 108, 154, ‘-’, ‘-’, ‘-’, 119, 361, 203]
A数值第一项有数据，对应的B数值第一项就设置为空 ‘-’
实则是采用数据堆叠的形式展示，但是对应的数据AB 同一个位置只有一个值，所以呈现效果就是上面图片效果