雷达图实现点击名字（name）实现选中和取消效果

Posted 2020-12-11 qinxuhui

 1 option = {
 2     title: {
 3         text: ‘基础雷达图‘
 4     },
 5     tooltip: {},
 6     legend: {
 7         data: [‘预算分配（Allocated Budget）‘, ‘实际开销（Actual Spending）‘]
 8     },
 9     radar: {
10         // shape: ‘circle‘,
11         name: {
12             textStyle: {
13                 color: ‘#fff‘,
14                 backgroundColor: ‘#999‘,
15                 borderRadius: 3,
16                 padding: [3, 5]
17             }
18         },
19         indicator: [
20             { name: ‘销售（sales）‘, max: 6500，color:"#062540"},
21             { name: ‘管理（Administration）‘, max: 16000,color:"#000"},
22             { name: ‘信息技术（Information Techology）‘, max: 30000,color:"#000"},
23             { name: ‘客服（Customer Support）‘, max: 38000,color:"#000"}26         ]
27     },
28     series: [{
29         name: ‘预算 vs 开销（Budget vs spending）‘,
30         type: ‘radar‘,
31         // areaStyle: {normal: {}},
32         data: [
33             {
34                 value: [4300, 10000, 28000, 35000, 50000, 19000],
35                 name: ‘预算分配（Allocated Budget）‘
36             }41         ]
42     }]
43 };

//重点是这里
myChart.on(‘click‘, function (params) {
        for (var i = 0; i < option.radar.indicator.length; i++) {
            if (params.name == option.radar.indicator[i].name) {
              option.radar.indicator[i].color = "#062540";
            } else
  option.radar.indicator[i].color = "#000";
         
 
        }

        myChart.setOption(option);
     
    });