[Bug] 配置多个legend 展示未实现

[guoliuqing123]

Version

无

Link to Minimal Reproduction

无

Steps to Reproduce

data = [
[
{
"type": "education",
"name": "硕士",
"value": 138,
},
{
"type": "education",
"name": "本科",
"value": 549,
},
{
"type": "education",
"name": "专科",
"value": 131,
},
{
"type": "education",
"name": "其他",
"value": 73,
}
],
[
{
"type": "compile",
"name": "空管在编",
"value": 365,
},
{

        "type": "compile",
        "name": "合同",
        "value": 50,
    },
    {
        
        "type": "compile",
        "name": "劳务派遣",
        "value": 9,
       
    }
],
[
    {
        "number": null,
        "avgAge": null,
        "license": null,
        "proportion": 0.81,
        "type": "sex",
        "name": "男",
        "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": "女",
        "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, //图例选择的模式
bottom: '5%',
data:[
{
name: '男',
icon: 'circle',
},
{
name: '女',
icon: 'circle',
},
],
},
{
right: '30%',
selectedMode: false, //图例选择的模式
top: '1%',
data:data[1]
},
{
right: '30%',
selectedMode: false, //图例选择的模式
top: '45%',
data:data[0]
},
],
grid: [
{ //柱状图1
top: 10,
width: '50%',
bottom: '60%',
right: 10,
// containLabel: true
},
{ //柱状图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,// 隐藏刻度代码
axisLabel: { //隐藏刻度字
show:false
},
axisLine:{ //隐藏坐标轴
show:false
},
},
{
type: 'value',
max: result.filter(item=>item.type === 'education')[0].value,
gridIndex: 1,
splitLine: {
show: false
},
axisTick: false,// 隐藏刻度代码
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,// 隐藏刻度代码
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,// 隐藏刻度代码
axisLabel: {
show:false
},
axisLine:{
show:false
},
}
],

series: [
{
type: 'pie',
radius: ['35%', '50%'], //饼图大小
center: ['20%', '50%'], //饼图位置
label: {
show: false,
}, //引导线不显示
hoverOffset: 0,
data: data[2],
},
{
type: 'bar',
stack: 'compile',
barWidth: 15,
z: 3,
label: {
show: false
},
itemStyle:{
color: function (params) {
if (params.name === '劳务派遣') {
return '#64A7EB';
} else if (params.name === '合同') {
return '#60D8AC';
} else if (params.name === '空管在编') {
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 === '硕士') {
return '#64A7EB';
} else if (params.name === '本科') {
return '#60D8AC';
} else if (params.name === '专科') {
return '#7591C8';
} else if (params.name === '其他') {
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

已将legend 配置为 数组 但是柱状图的legend 未展示出来 （不知道是否是我的配置问题）

还有个问题 环形图是否可以将文字数据展示在类似图二的样式中 是否有配置项之类的

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

@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. 🤗

TRANSLATED

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

[MatthiasMert]

As the documentation states, legend.data is associated with series names. In echarts the approach to what you want to do would be to use one series for each bar. Also, you can use showBackground instead of using a stacked bar.

Example

[guoliuqing123]

谢谢啦 还有个问题 环形图是否可以将文字数据展示在类似图二的样式中 是否有配置项之类的呢