echarts 为每个条显示相应的图例

Question

echarts 3.5.4版本

我创建了一个条形图，我想为每个条形图显示相应的图例。不过图例好像只能显示series

例如，我有一个系列，它有六个数据项。这意味着将显示六个条。那么如何为这六个柱状图分别显示图例呢？

Answer 1

不幸的是，您无法为每个柱显示相应的图例。

在像pie、funnel这样没有轴的图表中，你可以为每个数据显示图例，

像这样demo

在轴如 line、bar 的图表中，您只能显示每个系列的图例，

像这样demo

------加法----

can we make each bar a separate series, and then make the chart look the same as only one series?

是的，检查这个demo

但是，要做到这一点，需要注意一些关键点，

首先，每个series的data必须有相同的长度，所以null值应该作为补充。
为了有合适的条形宽度，每个series必须使用stack选项。

let echartsObj = echarts.init(document.querySelector('#canvas'));


 option = {
     color: ['#3398DB', '#5528DB', '#ff00DB', '#3300DB', '#de3423'],
  
     xAxis : [
         {
             type : 'category',
             data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         }
     ],
     legend: {
      data: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6']
     },
     yAxis : [
         {
             type : 'value'
         }
     ],
     series : [
         {
             name:'data1',
             type:'bar',
            stack: 'stack',
             data:[10, , , , ,,,]
         }, {
             name:'data2',
             type:'bar',
       stack: 'stack',
             data:[, 22, , , ,,,]
         }, {
             name:'data3',
             type:'bar',
       stack: 'stack',
             data:[, , 35, , ,,,]
         }, {
             name:'data4',
             type:'bar',
       stack: 'stack',
             data:[, , , 70, ,,,]
         }, {
             name:'data5',
             type:'bar',
       stack: 'stack',
             data:[, , , , 155,,,]
         },  {
             name:'data6',
             type:'bar',
             stack: 'stack',
             data:[, , , , ,40,,]
         }
     ]
 };
  echartsObj.setOption(option)

<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="canvas" style="width: 100%; height: 200px">
        </div>
      </body>
    </html>

echarts 为每个条显示相应的图例

echarts display corresponding legend for each bar

web

charts

echarts