雷达图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(); })