1、echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用。
参考链接:https://blog.csdn.net/qq_21386275/article/details/79039024
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 }
待续......