echarts
echarts copied to clipboard
[Bug] Bar chart with legend issue
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:
but not show color by sport name. ` //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' };
`
No response
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.