这几天在做统计方面 需要用到一些报表 用的也是ECharts,多个图表在一起显示,相当于多个option在一起显示,
一般见得多的是一个series对应一个legend或者是多个series对应一个legend,
但是现在有个需求就是多个series对应多个legend,经过尝试提供一种option写法:
先上个效果图:
直接复制到ECharts官网调试即可
option = {
title: [
{
left: 'left',
y: '20%',
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
},
{
text: '南丁格尔玫瑰图1',
subtext: '纯属虚构',
x: '60%',
y: '2%'
},{
text: '南丁格尔玫瑰图2',
subtext: '纯属虚构',
x: '60%',
y: '50%'
}
],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: [
{
orient: 'vertical',
left: 'left',
y: '40%',
data: ['rose1', 'rose2', 'rose3', 'rose4']
}, {
orient: 'vertical',
right: 'left',
y: '10%',
data: ['rose1', 'rose2', 'rose3', 'rose4']
},
{
orient: 'vertical',
right: 'left',
y: '60%',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5']
}
],
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 110],
center: ['25%', '50%'],
roseType: 'area',
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'}
]
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '25%'],
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'}
]
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '75%'],
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'},
{value: 25, name: 'rose5'}
]
}
]
};
如果有更好的写法可以留言分享噢!!! 如果有错误请大家指出, 我会及时更新!!!!!