码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-17 15:29:09      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ast   chart   round   pad   series   效果   radius   get   ted   

 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);
     
    });

 

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

标签:ast   chart   round   pad   series   效果   radius   get   ted   

原文地址:https://www.cnblogs.com/qinxuhui/p/13152636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!