echarts отображает соответствующую легенду для каждого бара - PullRequest
Новая
       13

echarts отображает соответствующую легенду для каждого бара

0 голосов
/ 12 октября 2018

echarts версия 3.5.4

Я создал гистограмму и хочу отобразить соответствующую легенду для каждого бара.Однако, похоже, что легенда может отображаться только для серии.

Например, у меня есть серия, и в ней шесть элементов данных.Это означает, что будут показаны шесть баров.Так как же я могу отобразить легенду для каждого из этих шести столбцов?

1 Ответ

0 голосов
/ 12 октября 2018

К сожалению, вы просто не можете отобразить соответствующую легенду для каждого бара.

На графике без оси, например 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>
...