apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
59.99k stars 19.59k forks source link

[Bug] Bar chart with legend issue #19581

Open luojiandan opened 6 months ago

luojiandan commented 6 months ago

Version

5.4.3

Legend shows color of different series. But my chart has only one series,data color by different sport. I want to show Legend by colors Variables.

Code:

` //test data var arrDatas = [ { name: 'Ronaldo', sport: 'Football', salary: 1.36 }, { name: 'Messi', sport: 'Football', salary: 1.3 }, { name: 'Mbappe', sport: 'Football', salary: 1.2 }, { name: 'James', sport: 'Basketball', salary: 1.19 }, { name: 'Alvarez', sport: 'Boxing', salary: 1.1 }, { name: 'Johnson', sport: 'Golf', salary: 1.07 }, { name: 'Federer', sport: 'Tennis', salary: 0.95 } ]; //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' }; option = { xAxis: { type: 'category', axisLabel:{ interval:0, //show all }, data: arrDatas.map((item) => item.name +'('+ item.sport+')') }, yAxis: { type: 'value' }, legend: {}, series: [ { name:'sport', type: 'bar', data: arrDatas.map((item) => ({ value: item.salary, itemStyle: { color: colors[item.sport] //color } })) } ] };

`

Current Behavior

1.create bar chart like this: Example Code

2.the default legend is not right It only show one color: image

but not show color by sport name. ` //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' };

`

No response

MatthiasMert commented 6 months ago

If legend data is not supplied it is populated with series names. So put one series per sport name and it will show up correctly.

Demo