這幾天在做統計方面 需要用到一些報表 用的也是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'}
]
}
]
};
如果有更好的寫法可以留言分享噢!!! 如果有錯誤請大家指出, 我會及時更新!!!!!