IT序号网

echarts的地图点击事件知识解答

sanshao 2021年06月03日 编程语言 138 0

1、echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用。

参考链接:IT虾米网

  1 //地图展示 
  2 function map() { 
  3     //url,将需要的数据查询出来,放到固定的省份的位置即可。 
  4     var url = "xxxxxx.action"; 
  5     var array = new Array(); 
  6     $.ajax({ 
  7         url : url, 
  8         dataType : "json", 
  9         async : false, 
 10         success : function(data){ 
 11             var datas = data.result; 
 12             var length = datas.length; 
 13             //逻辑控制 
 14             ...... 
 15         } 
 16     }); 
 17     //console.log(array); 
 18      
 19     //将查询出的需要的省份的数据值存放到下面对应的地方 
 20     var option = { 
 21         tooltip : { 
 22             trigger : 'item' 
 23         }, 
 24         dataRange : { 
 25             orient : 'horizontal', 
 26             min : 0, 
 27             max : 55000, 
 28             text : [ '高', '低' ], // 文本,默认为数值文本 
 29             splitNumber : 0 
 30         }, 
 31         series : [ { 
 32             name : '', 
 33             type : 'map', 
 34             mapType : 'china', 
 35             mapLocation : { 
 36                 x : 'left' 
 37             }, 
 38             selectedMode : 'multiple', 
 39             itemStyle : { 
 40                 normal : { 
 41                     label : { 
 42                         show : true 
 43                     } 
 44                 }, 
 45                 emphasis : { 
 46                     label : { 
 47                         show : true 
 48                     } 
 49                 } 
 50             }, 
 51             data : [ { 
 52                 name : '西藏', 
 53                 value : array[1], 
 54                 selected : true,//此属性值是默认被选中 
 55             }, { 
 56                 name : '青海', 
 57                 value : array[2], 
 58             }, { 
 59                 name : '宁夏', 
 60                 value : array[3], 
 61             }, { 
 62                 name : '海南', 
 63                 value : array[4], 
 64             }, { 
 65                 name : '甘肃', 
 66                 value : array[5], 
 67             }, { 
 68                 name : '贵州', 
 69                 value : array[6], 
 70                 selected : true, 
 71             }, { 
 72                 name : '新疆', 
 73                 value : array[7], 
 74             }, { 
 75                 name : '云南', 
 76                 value : array[8], 
 77             }, { 
 78                 name : '重庆', 
 79                 value : array[9], 
 80                 selected : true, 
 81             }, { 
 82                 name : '吉林', 
 83                 value : array[10], 
 84             }, { 
 85                 name : '山西', 
 86                 value : array[11], 
 87             }, { 
 88                 name : '天津', 
 89                 value : array[12], 
 90             }, { 
 91                 name : '江西', 
 92                 value : array[13], 
 93             }, { 
 94                 name : '广西', 
 95                 value : array[14], 
 96             }, { 
 97                 name : '陕西', 
 98                 value : array[15], 
 99             }, { 
100                 name : '黑龙江', 
101                 value : array[16], 
102             }, { 
103                 name : '内蒙古', 
104                 value : array[17], 
105             }, { 
106                 name : '安徽', 
107                 value : array[18], 
108                 selected : true, 
109             }, { 
110                 name : '北京', 
111                 value : array[19], 
112                 //selected : true, 
113             }, { 
114                 name : '福建', 
115                 value : array[20], 
116             }, { 
117                 name : '上海', 
118                 value : array[21], 
119                 selected : true, 
120             }, { 
121                 name : '湖北', 
122                 value : array[22], 
123             }, { 
124                 name : '湖南', 
125                 value : array[23], 
126             }, { 
127                 name : '四川', 
128                 value : array[24], 
129                 selected : true, 
130             }, { 
131                 name : '辽宁', 
132                 value : array[25], 
133             }, { 
134                 name : '河北', 
135                 value : array[26], 
136             }, { 
137                 name : '河南', 
138                 value : array[27], 
139             }, { 
140                 name : '浙江', 
141                 value : array[28], 
142                 selected : true, 
143             }, { 
144                 name : '山东', 
145                 value : array[29], 
146                 selected : true, 
147             }, { 
148                 name : '江苏', 
149                 value : array[30], 
150                 selected : true, 
151             }, { 
152                 name : '广东', 
153                 value : array[31], 
154                 selected : true, 
155             }, { 
156                 name : '台湾', 
157                 value : array[32], 
158             } ] 
159         } ], 
160         animation : false 
161     }; 
162     myChart.setOption(option, true); 
163      
164      
165     //点击事件,根据点击某个省份计算出这个省份的数据 
166     myChart.on('click', function (params) { 
167         console.log(params); 
168         //逻辑控制 
169         ...... 
170     }); 
171      
172 }

待续......


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Eclipse连接到My sql数据库的操作总结/配置数据库驱动知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。