1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网
  6. Gallery

百度echarts实现雷达图数据自动切换

2021年01月26日 16:13:01

雷达图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();
})
点击展开全文
百度echarts实现雷达图数据自动切换