apache / echarts

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

[Bug] 散点图怎么没法展示图例?我设置了legend也没法展示 #18219

Open githubzyl opened 1 year ago

githubzyl commented 1 year ago

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

option = { xAxis: {}, yAxis: {}, legend: { data: ['一班', '二班', '三班'], textStyle: { fontSize: 12 } }, label: { show: true, position: 'right', formatter: '{b}' }, series: [ { name:'yiban', symbolSize: 10, data: [ { name: '农、林、牧、渔业', itemStyle: { color: 'red' }, value: [1, 33612] }, { name: '采矿业', itemStyle: { color: 'red' }, value: [2, 60544] }, { name: '制造业', itemStyle: { color: 'red' }, value: [3, 59470] }, { name: '电力、热力、燃气及水生产和供应业', itemStyle: { color: 'red' }, value: [4, 83863] }, { name: '建筑业', itemStyle: { color: 'red' }, value: [5, 52082] }, { name: '批发和零售业', itemStyle: { color: 'red' }, value: [6, 65061] }, { name: '交通运输、仓储和邮政业', itemStyle: { color: 'red' }, value: [7, 73650] }, { name: '住宿和餐饮业', itemStyle: { color: 'blue' }, value: [8, 43382] }, { name: '信息传输、软件和信息业', itemStyle: { color: 'blue' }, value: [9, 122478] }, { name: '金融业', itemStyle: { color: 'blue' }, value: [10, 117418] }, { name: '房地产业', itemStyle: { color: 'blue' }, value: [11, 65497] }, { name: '租赁和商务服务业', itemStyle: { color: 'blue' }, value: [12, 76782] }, { name: '科研和技术服务业', itemStyle: { color: 'blue' }, value: [13, 96638] }, { name: '水利、环境和公共设施管理业', itemStyle: { color: 'yellow' }, value: [14, 47750] }, { name: '居民服务、修理和其他服务业', itemStyle: { color: 'yellow' }, value: [15, 47577] }, { name: '教育', itemStyle: { color: 'yellow' }, value: [16, 74498] }, { name: '卫生和社会工作', itemStyle: { color: 'yellow' }, value: [17, 80026] }, { name: '文化、体育和娱乐业', itemStyle: { color: 'yellow' }, value: [18, 79875] }, { name: '公共管理、社会保障和社会组织', itemStyle: { color: 'yellow' }, value: [19, 70959] } ], type: 'scatter' } ] };

Current Behavior

上述option中设置了legend但是无法展示

Expected Behavior

我希望能够展示手动设置的图例legend数据

Environment

- OS:
- Browser:Chrome
- Framework:

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@githubzyl It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] Why can't the scatterplot show the legend? I set up the legend and I can't show it **BODY** ### Version 5.4.1 ### Link to Minimal Reproduction _No response_ ### Steps to Reproduce option = { xAxis: {}, yAxis: {}, legend: { data: ['Class One', 'Class Two', 'Class Three'], textStyle: { fontSize: 12 } }, label: { show: true, position: 'right', formatter: '{b}' }, series: [ { name:'yiban', symbolSize: 10, data: [ { name: 'Agriculture, Forestry, Animal Husbandry, Fishery', itemStyle: { color: 'red' }, value: [1, 33612] }, { name: 'Mining', itemStyle: { color: 'red' }, value: [2, 60544] }, { name: 'Manufacturing', itemStyle: { color: 'red' }, value: [3, 59470] }, { name: 'Electricity, heat, gas and water production and supply industry', itemStyle: { color: 'red' }, value: [4, 83863] }, { name: 'Construction Industry', itemStyle: { color: 'red' }, value: [5, 52082] }, { name: 'Wholesale and retail trade', itemStyle: { color: 'red' }, value: [6, 65061] }, { name: 'Transportation, storage and postal services', itemStyle: { color: 'red' }, value: [7, 73650] }, { name: 'Accommodation and Catering Industry', itemStyle: { color: 'blue' }, value: [8, 43382] }, { name: 'Information Transmission, Software and Information Industry', itemStyle: { color: 'blue' }, value: [9, 122478] }, { name: 'financial industry', itemStyle: { color: 'blue' }, value: [10, 117418] }, { name: 'Real Estate', itemStyle: { color: 'blue' }, value: [11, 65497] }, { name: 'Leasing and Business Services', itemStyle: { color: 'blue' }, value: [12, 76782] }, { name: 'Scientific research and technical services', itemStyle: { color: 'blue' }, value: [13, 96638] }, { name: 'Water conservancy, environment and public facilities management industry', itemStyle: { color: 'yellow' }, value: [14, 47750] }, { name: 'Resident services, repairs and other services', itemStyle: { color: 'yellow' }, value: [15, 47577] }, { name: 'Education', itemStyle: { color: 'yellow' }, value: [16, 74498] }, { name: 'Health and Social Work', itemStyle: { color: 'yellow' }, value: [17, 80026] }, { name: 'Culture, Sports and Entertainment', itemStyle: { color: 'yellow' }, value: [18, 79875] }, { name: 'Public Administration, Social Security and Social Organization', itemStyle: { color: 'yellow' }, value: [19, 70959] } ], type: 'scatter' } ] }; ### Current Behavior Legend is set in the above option but cannot be displayed ### Expected Behavior I want to be able to display legend legend data set manually ### Environment ```markdown - OS: -Browser:Chrome - Framework: ``` ### Any additional comments? _No response_
Ovilia commented 1 year ago

legend.data should be the same as series.name.

githubzyl commented 1 year ago

就算一样也没用,还是不展示,况且legend的data是可以自定义的,我都试过了

Ovilia commented 1 year ago

https://echarts.apache.org/examples/en/editor.html?c=scatter-weight

helgasoft commented 1 year ago

Easier if using a dataset with trasformations - Demo Code Also, legend.data docs lets you believe that format data: ['Class One', 'Class Two', 'Class Three'] is possible, but it's not. The only format available is data: [{name:'Class One'}, {name:'Class Two'}, {name:'Class Three'}] and only when series names match.
So in general legend.data is not a good idea, just let it pick up automatically the names from series.

image