echarts-bot[bot] commented on issue #19908:
URL: https://github.com/apache/echarts/issues/19908#issuecomment-2100091065
@guoliuqing123 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. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] Configuring multiple legend displays is not implemented
**BODY**
### Version
none
### Link to Minimal Reproduction
none
### Steps to Reproduce
data = [
[
{
"type": "education",
"name": "Master",
"value": 138,
},
{
"type": "education",
"name": "undergraduate",
"value": 549,
},
{
"type": "education",
"name": "College",
"value": 131,
},
{
"type": "education",
"name": "other",
"value": 73,
}
],
[
{
"type": "compile",
"name": "Air traffic control is editing",
"value": 365,
},
{
"type": "compile",
"name": "contract",
"value": 50,
},
{
"type": "compile",
"name": "Labor dispatch",
"value": 9,
}
],
[
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.81,
"type": "sex",
"name": "male",
"value": 858,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"borderWidth": 2,
"color": "#7291c8"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.19,
"type": "sex",
"name": "female",
"value": 202,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"borderWidth": 2,
"color": "#7ed6ba"
}
}
]
],
result = [
{
"type": "education",
"value": 891
},
{
"type": "compile",
"value": 424
},
{
"type": "sex",
"value": 1060
}
],
option = {
tooltip: {},
legend:[
{
left: '10%',
selectedMode: false, //Legend selection mode
bottom: '5%',
data:[
{
name: 'Male',
icon: 'circle',
},
{
name: 'Female',
icon: 'circle',
},
],
},
{
right: '30%',
selectedMode: false, //Legend selection mode
top: '1%',
data:data[1]
},
{
right: '30%',
selectedMode: false, //Legend selection mode
top: '45%',
data:data[0]
},
],
grid: [
{ //Histogram 1
top: 10,
width: '50%',
bottom: '60%',
right: 10,
// containLabel: true
},
{ //Histogram 2
top: '55%',
width: '50%',
bottom: 0,
right: 10,
// containLabel: true
}
],
xAxis: [
{
type: 'value',
max: result.filter(item=>item.type === 'compile')[0].value,
splitLine: {
show: false
},
axisTick: false,//hide tick code
axisLabel: { //Hide scale words
show:false
},
axisLine:{ //Hide the coordinate axis
show:false
},
},
{
type: 'value',
max: result.filter(item=>item.type === 'education')[0].value,
gridIndex: 1,
splitLine: {
show: false
},
axisTick: false,//hide tick code
axisLabel: {
show:false
},
axisLine:{
show:false
},
}
],
yAxis: [
{
type: 'category',
data: Object.keys(data[1]).reverse().map(function (key) {
return data[1][key]['name'];
}),
splitLine: {
show: false
},
axisTick: false,//hide tick code
axisLabel: {
show:false
},
axisLine:{
show:false
},
},
{
gridIndex: 1,
type: 'category',
data: Object.keys(data[0]).reverse().map(function (key) {
return data[0][key]['name'];
}),
splitLine: {
show: false
},
axisTick: false,//hide tick code
axisLabel: {
show:false
},
axisLine:{
show:false
},
}
],
series: [
{
type: 'pie',
radius: ['35%', '50%'], //pie chart size
center: ['20%', '50%'], //Pie chart position
label: {
show: false,
}, //Guide lines are not displayed
hoverOffset: 0,
data: data[2],
},
{
type: 'bar',
stack: 'compile',
barWidth: 15,
z: 3,
label: {
show: false
},
itemStyle:{
color: function (params) {
if (params.name === 'Labor dispatch') {
return '#64A7EB';
} else if (params.name === 'Contract') {
return '#60D8AC';
} else if (params.name === 'Empty management is being edited') {
return '#7591C8';
}
}
},
data: Object.keys(data[1]).reverse().map(function (key) {
return data[1][key]['value'];
}),
name: Object.keys(data[1]).reverse().map(function (key) {
return data[1][key]['name'];
}),
},
{
type: 'bar',
stack: 'compile',
barWidth: 15,
silent: true,
itemStyle: {
color: '#ebebeb'
},
data: Object.keys(data[1]).reverse().map(function (key) {
return (result.filter(item=>item.type === 'compile')[0].value -
data[1][key]['value']);
})
},
{
type: 'bar',
stack: 'education',
barWidth: 15,
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
show: false
},
itemStyle:{
color: function (params) {
if (params.name === 'Master') {
return '#64A7EB';
} else if (params.name === 'Undergraduate') {
return '#60D8AC';
} else if (params.name === 'College') {
return '#7591C8';
} else if (params.name === 'other') {
return '#aaaaaa';
}
}
},
data: Object.keys(data[0]).reverse().map(function (key) {
return data[0][key]['value'];
}),
name: Object.keys(data[0]).reverse().map(item=>item.name),
},
{
type: 'bar',
stack: 'education',
barWidth: 15,
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#ebebeb'
},
data: Object.keys(data[0]).reverse().map(function (key) {
return (result.filter(item=>item.type === 'education')[0].value -
data[0][key]['value']);
})
},
]
};
### Current Behavior
The legend has been configured as an array, but the legend of the histogram
is not displayed (I don’t know if it is my configuration problem)
Another question is whether the donut chart can display text data in a style
similar to Figure 2. Is there any configuration items?
### Expected Behavior
### Environment
```markdown
- OS:
-Browser:
- Framework:
```
### Any additional comments?
_No response_
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
