雷達圖(多指標版)
代碼
var chartDom=document.getElementById("radar");
var myChart=echarts.init(chartDom);
var option;
option = {
title: {
text: '消費記錄',
textStyle: {
fontSize: 18,
color: 'red',
fontStyle:'oblique'
},
subtext:"這是個副標題",
subtextStyle:{
fontSize: 18,
color: 'blue',
},
left: '10%'
},
legend: {//圖例
data: ['月度消費', '年度消費', '2年消費']
},
radar: [
{
center: ['30%', '50%'],//指定雷達圖指標位置[左右,上下]
indicator: [
{ name: '北京', max: 2000 },
{ name: '上海', max: 2000 },
{ name: '武漢', max: 2000 },
{ name: '長沙', max: 2000 }
]
},
{
center: ['70%', '50%'],
indicator: [
{ name: '深圳', max: 5000 },
{ name: '廣州', max: 5000 },
{ name: '江西', max: 5000 },
{ name: '邵陽', max: 5000 }
]
},
{
center: ['30%', '50%'],
indicator: [
{ name: '北京', max: 7000 },
{ name: '上海', max: 7000 },
{ name: '武漢', max: 7000 },
{ name: '長沙', max: 7000 }
]
}
],
series: [
{
type: 'radar',
areaStyle: {},//區域樣式
radarIndex: 1,//選擇指標
data: [
{
name: '月度消費',
value: [4000, 4500, 3200, 1300]
}
]
},
{
type: 'radar',
areaStyle: {},
data: [
{
name: '年度消費',
value: [1000, 1500, 1200, 400]
}
]
},
{
type: 'radar',
areaStyle: {},
radarIndex: 2,
data: [
{
name: '2年消費',
value: [6000, 5500, 6200, 7000]
}
]
}
]
};
option & myChart.setOption(option)
效果圖
