雷达图tooltip数据自动切换比较麻烦,代码比较多,可以直接复制使用。
var radar = echarts.init(document.getElementById('radar'));
var radius = '50%';
var leiDaCenter = ['50%', '58%'];
var leiDadata = [{
name: "蒲州中队",
max: 6500,
pre: 4301
}, {
name: "浙南中队",
max: 16000,
pre: 15000
}, {
name: "状元中队",
max: 30000,
pre: 28000
}, {
name: "城市中心",
max: 38000,
pre: 35000
},
{
name: "空港中队",
max: 52000,
pre: 40000
}, {
name: "瑶溪中队",
max: 25000,
pre: 19820
}, {
name: "永兴中队",
max: 38000,
pre: 35000
}, {
name: "海滨中队",
max: 52000,
pre: 40000
}, {
name: "永中中队",
max: 25000,
pre: 19820
}
]
var radarAllDatas = [
[{
value: [4301, 15000, 28000, 35000, 40000, 19820, 35000, 40000, 19820],
name: '中队预警(条)'
}],
[{
value: [5002, 1409, 28000, 31400, 32800, 21000, 28000, 40000, 19820],
name: '中队上报(条)'
}],
[{
value: [4303, 10000, 27000, 35000, 50000, 25000, 30000, 40000, 19820],
name: '立案处罚(条)'
}],
[{
value: [5004, 14000, 28000, 31000, 42000, 21000, 31000, 40000, 19820],
name: '罚款金额(元)'
}]
]
var colorListRadar = ['#c23531', '#2f4554', '#61a0a8', '#d48265'];
var leiDaArr = []; //雷达图
var leiDaXzhou = []; //轮播的名称
var legendLeiDa = []; //用于装legend的
var displayLeiDaAllTitle = []; //显示雷达图的参数
for (let z = 0; z < radarAllDatas.length; z++) {
leiDaXzhou.push(radarAllDatas[z][0].name);
legendLeiDa.push({
name: radarAllDatas[z][0].name,
icon: "circle"
});
leiDaArr.push({
name: radarAllDatas[z][0].name,
type: 'radar',
symbol: "circle",
symbolSize: 10,
itemStyle: {
normal: {
color: colorListRadar[z],
}
},
areaStyle: {
normal: {
color: colorListRadar[z],
opacity: 1
},
},
lineStyle: {
normal: {
color: colorListRadar[z],
type: 'solid',
width: 3,
opacity: 1
}
},
data: radarAllDatas[z]
})
}
option = {
baseOption: {
timeline: {
show: false,
type: 'slider',
axisType: 'category',
bottom: '0',
currentIndex: 0, //0 时表示当前选中项为 timeline.data[0](即使用 options[0]
autoPlay: true, //是否自动播放
loop: true,
rewind: true, //反向轮播
realtime: true, //拖动圆点的时候,是否实时更新视图。
controlPosition: 'left',
label: {
normal: {
color: '#2998ff',
},
},
itemStyle: {
normal: {
color: '#000',
borderColor: '#2998ff',
borderWidth: 2,
}
},
checkpointStyle: { //『当前项』(checkpoint)的图形样式
color: 'rgb(215, 0, 0)',
},
lineStyle: {
show: true, //false 不显示轴线
color: '#2998ff',
},
controlStyle: { //控制按钮的样式
show: true,
showPrevBtn: true,
showNextBtn: true,
itemGap: 50,
itemSize: 36,
normal: {
color: 'rgb(215, 0, 0)',
borderColor: 'rgb(215, 0, 0)',
},
emphasis: {
color: 'rgb(215, 0, 0)',
borderColor: 'rgb(215, 0, 0)',
},
},
data: leiDaXzhou,
},
// color:,
title: {
text: '中队工作情况',
x: 'center',
y: 30,
textStyle: {
color: '#354052',
fontSize: 18,
fontWeight: 100
}
},
// tooltip : {
// },
legend: {
top: 100,
data: legendLeiDa
},
radar: [{
indicator: leiDadata,
radius: radius,
center: leiDaCenter,
startAngle: 126,
splitNumber: 4,
shape: 'circle',
name: {
show: true,
fontSize: 14,
color: "#000",
formatter: function (value, indicator) {
return indicator.name + ':' + indicator.pre
},
},
nameGap: 25,
splitArea: {
areaStyle: {
color: 'transparent',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: '#dcdcdc'
}
},
splitLine: {
lineStyle: {
color: '#dcdcdc'
}
},
indicator: leiDadata
},
],
series: leiDaArr //series结束
},
options: [{
radar: [{
indicator: [{
name: "蒲州中队",
max: 6500,
pre: 4301
}, {
name: "浙南中队",
max: 16000,
pre: 15000
}, {
name: "状元中队",
max: 30000,
pre: 28000
}, {
name: "城市中心",
max: 38000,
pre: 35000
},
{
name: "空港中队",
max: 52000,
pre: 40000
}, {
name: "瑶溪中队",
max: 25000,
pre: 19820
}, {
name: "永兴中队",
max: 38000,
pre: 35000
}, {
name: "海滨中队",
max: 52000,
pre: 40000
}, {
name: "永中中队",
max: 25000,
pre: 19820
}
]
}],
series: [{
z: 4,
itemStyle: {
normal: {
opacity: 1
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 1
}
},
data: [{
value: [4301, 15000, 28000, 35000, 40000, 19820, 35000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5002, 1409, 28000, 31400, 32800, 21000, 28000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4303, 10000, 27000, 35000, 50000, 25000, 30000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5004, 14000, 28000, 31000, 42000, 21000, 31000, 40000, 19820]
}]
}]
},
{
radar: [{
indicator: [{
name: "蒲州中队",
max: 6500,
pre: 5002
}, {
name: "浙南中队",
max: 16000,
pre: 1409
}, {
name: "状元中队",
max: 30000,
pre: 28000
}, {
name: "城市中心",
max: 38000,
pre: 31400
},
{
name: "空港中队",
max: 52000,
pre: 32800
}, {
name: "瑶溪中队",
max: 25000,
pre: 21000
}, {
name: "永兴中队",
max: 38000,
pre: 28000
}, {
name: "海滨中队",
max: 52000,
pre: 40000
}, {
name: "永中中队",
max: 25000,
pre: 19820
}
]
}],
series: [{
z: 1,
tooltip: {
trigger: 'item',
},
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4301, 15000, 28000, 35000, 40000, 19820, 35000, 40000, 19820]
}]
}, {
z: 4,
itemStyle: {
normal: {
opacity: 1
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 1
}
},
data: [{
value: [5002, 1409, 28000, 31400, 32800, 21000, 28000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4303, 10000, 27000, 35000, 50000, 25000, 30000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5004, 14000, 28000, 31000, 42000, 21000, 31000, 40000, 19820]
}]
}]
},
{
radar: [{
indicator: [{
name: "蒲州中队",
max: 6500,
pre: 4303
}, {
name: "浙南中队",
max: 16000,
pre: 10000
}, {
name: "状元中队",
max: 30000,
pre: 27000
}, {
name: "城市中心",
max: 38000,
pre: 35000
},
{
name: "空港中队",
max: 52000,
pre: 50000
}, {
name: "瑶溪中队",
max: 25000,
pre: 25000
}, {
name: "永兴中队",
max: 38000,
pre: 30000
}, {
name: "海滨中队",
max: 52000,
pre: 40000
}, {
name: "永中中队",
max: 25000,
pre: 19820
}
]
}],
series: [{
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4301, 15000, 28000, 35000, 40000, 19820, 35000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5002, 1409, 28000, 31400, 32800, 21000, 28000, 40000, 19820]
}]
}, {
z: 4,
itemStyle: {
normal: {
opacity: 1
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 1
}
},
data: [{
value: [4303, 10000, 27000, 35000, 50000, 25000, 30000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5004, 14000, 28000, 31000, 42000, 21000, 31000, 40000, 19820]
}]
}]
},
{
radar: [{
indicator: [{
name: "蒲州中队",
max: 6500,
pre: 4304
}, {
name: "浙南中队",
max: 16000,
pre: 10000
}, {
name: "状元中队",
max: 30000,
pre: 27000
}, {
name: "城市中心",
max: 38000,
pre: 35000
},
{
name: "空港中队",
max: 52000,
pre: 50000
}, {
name: "瑶溪中队",
max: 25000,
pre: 25000
}, {
name: "永兴中队",
max: 38000,
pre: 30000
}, {
name: "海滨中队",
max: 52000,
pre: 40000
}, {
name: "永中中队",
max: 25000,
pre: 19820
}
]
}],
series: [{
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4301, 15000, 28000, 35000, 40000, 19820, 35000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [5002, 1409, 28000, 31400, 32800, 21000, 28000, 40000, 19820]
}]
}, {
z: 1,
itemStyle: {
normal: {
opacity: 0.2
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 0.2
}
},
data: [{
value: [4303, 10000, 27000, 35000, 50000, 25000, 30000, 40000, 19820]
}]
}, {
z: 4,
itemStyle: {
normal: {
opacity: 1
}
},
areaStyle: {
normal: {
opacity: 0
}
},
lineStyle: {
normal: {
opacity: 1
}
},
data: [{
value: [5004, 14000, 28000, 31000, 42000, 21000, 31000, 40000, 19820]
}]
}]
}
]
}
radar.setOption(option);
window.addEventListener("resize", function () {
radar.resize();
})