Question

echarts版本3.5.4

我创建了一个条形图，我想为每个条形图显示相应的图例。但是，图例似乎只能显示系列。

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

Answer 1

不幸的是，您只是不能为每个小节显示相应的图例。

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

像demo

在具有line，bar之类的轴的图表中，您只能显示每个系列的图例，

像demo

------添加----

我们可以将每个条形划分为一个单独的序列，然后使图表看起来与仅一个序列相同吗？

是的，选中此demo

但是，应注意一些关键点，以实现这一目标，

首先，每个data中的series必须具有相同的长度，因此应将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为每个小节显示相应的图例

1 个答案: