echarts 雷达图 indicator.color 点击切换

最新推荐文章于 2025-06-04 11:06:00 发布

原创最新推荐文章于 2025-06-04 11:06:00 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #web #数据可视化

本文介绍如何在Echarts 3.0中实现雷达图的indicator点击响应，通过设置indicator.color并监听点击事件，动态改变点击的indicator颜色，以达到视觉效果的突出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标点击雷达图上文本标签实现响应（点击改变当前点击文本标签的颜色）

要点：echart3.0 indicator新增color属性，2.0没有

1、可以在option radar 里设置indicator：[{text: , max: , color: }, {text: , max: , color: }] 数组个数取决于雷达图数据个数

2、给radar添加triggerEvent:true

3、设置点击事件，可以先使用console.log 查看点击的params是否对应点击的indicator标签，在console.log查看indicator属性，如cosole.log(option_rader.radar[0].indicator[i]), 再根据需要对相应indicator的颜色做改变option_rader.radar[0].indicator[i].color = "#83bff6";

4、更新图表的option（不能漏）： myChart_radar.setOption(option_radar);

option_radar = {
        title: {},
        tooltip: {
            show: true,
            trigger: 'item',
        },
        radar: [{
            indicator: (function () {
                var res = [];
                res.push({
                    text: 0 + '点',
                    max: 5100,
                    color: "",
                });
                for (var i = 23; i > 0; i--) {
                    res.push({
                        text: i + '点',
                        max: 5100,
                        color: "",
                    });
                }
                return res;
            })(),
            triggerEvent: true,//打开响应

            center: ['50%', '50%'],
            radius: 100,
        }, ],

        series: []
    };


//点击事件
myChart_radar.on('click', function (params) {
        console.log(params);
        var id = 24 - parseInt(params.name);
        if (id > 23) {
            id = 0;
        }
        for (var i = 0; i < 24; i++) {
            if (i == id) {
                option_rader.radar[0].indicator[i].color = "#83bff6";
            } else
                option_rader.radar[0].indicator[i].color = "";

        }

        console.log(option_rader.radar[0].indicator[id]);//控制台观察
        // option_radar.radar[0].indicator[id].color = "red";
        myChart_radar.setOption(option_radar);
        //line_effect(parseInt(params.name));联合其他图表响应

    });