guoliuqing123 opened a new issue, #19907:
URL: https://github.com/apache/echarts/issues/19907
### 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
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
--
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]
