Open luojiandan opened 6 months ago
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 } })) } ] };
`
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.
Demo
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](https://github.com/apache/echarts/assets/5663556/32874417-5584-4afd-9d46-5282f953c69a)
but not show color by sport name. ` //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' };
`
No response