[Bug] 配置多个legend 展示未实现 about echarts HOT 1 CLOSED

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

- OS:
-Browser:
- Framework:

Any additional comments?

No response