以厦门市为例做地区悬浮上浮效果

echarts用地图还挺复杂的，

先展示下成果，Make A Pie - 以厦门市为例做地区悬浮事件上浮效果

参考了这个老铁的作品，Make A Pie - echarts地图渲染（厦门市）

结合Echarts官网关于shadowBlur和它的小伙伴的介绍，Documentation - Apache ECharts

地图geoJson文件来自于这个网站，echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang

上vue代码

  1 <template>
  2   <div>
  3     <el-card id="mapTest" style="width: 900px; height: 700px"></el-card>
  4   </div>
  5 </template>
  6 
  7 <script>
  8 import * as echarts from "echarts";
  9 export default {
 10   data() {
 11     return {};
 12   },
 13   mounted() {
 14     (window.onresize = () => {
 15       this.myChart.resize();
 16     }),
 17       this.drawMap();
 18   },
 19   methods: {
 20     drawMap() {
 21       if (
 22         this.myChart != null &&
 23         this.myChart != "" &&
 24         this.myChart != undefined
 25       ) {
 26         this.myChart.dispose();
 27       }
 28       this.$nextTick(() => {
 29         let self = this;
 30         this.myChart = echarts.init(document.getElementById("mapTest"));
 31         // HuaiAn
 32         // let geoJson = "http://localhost:8080/static/mapHuaiAn.geoJson";
 33         // XiaMen
 34         let geoJson = "http://localhost:8080/static/mapXiaMen.geoJson";
 35         // let geoJson =
 36         //   "https://geo.datav.aliyun.com/areas_v3/bound/350200_full.json";
 37         //   "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=350200_full";
 38         // var uploadedDataURL = "/asset/get/s/data-1628045698067-F_q-w3jYq.json";
 39 
 40         $.get(geoJson, (res) => {
 41           var mapData = res;
 42           echarts.registerMap("xiamen", mapData);
 43           var centerMap = {};
 44           if (mapData && mapData.features && mapData.features.length > 0) {
 45             for (var i = 0; i < mapData.features.length; i++) {
 46               var feature = mapData.features[i];
 47               var properties = feature.properties || {};
 48               if (properties && properties.name) {
 49                 centerMap[properties.name] = properties.cp || [];
 50               }
 51             }
 52           }
 53           console.log("centerMap:", centerMap);
 54 
 55           var option = {
 56             backgroundColor: "#fff",
 57             title: {
 58               text: "厦门市",
 59             },
 60             // visualMap: {
 61             //     show: false,
 62             //     max: 100,
 63             //     seriesIndex: [3],
 64             //     inRange: {
 65             //         color: ['#A5DCF4', '#006edd'],
 66             //     },
 67             // },
 68             tooltip: {
 69               trigger: "item",
 70               formatter: function (params) {
 71                 console.log(params);
 72                 return params.name + params.data;
 73               },
 74             },
 75             geo: [
 76               {
 77                 map: "xiamen",
 78                 layoutCenter: ["50%", "50%"], //地图位置
 79                 layoutSize: "630",
 80                 itemStyle: {
 81                   borderColor: "#2b9bf9", //省市边界线,
 82                   borderWidth: 2,
 83                   normal: {
 84                     show: false,
 85                     color: "#e9e6b3", //地图背景色
 86                     borderColor: "#2b9bf9", //省市边界线
 87                     borderWidth: 1,
 88                   },
 89                   emphasis: {
 90                     show: true,
 91                     color: "#d6eaff", //悬浮背景
 92                     // focus: "self",  // emphasis only itself [default:none]
 93                     // itemStyle: {
 94                     shadowOffsetX: 5,
 95                     shadowOffsetY: 5,
 96                     //   shadowColor: "rgba(0, 0, 0, 0.5)",
 97                     shadowBlur: 5,
 98                     // },
 99                   },
100                 },
101                 label: {
102                   show: true,
103                 },
104                 // roam:true, // control the zoom
105                 regions: [
106                   {
107                     name: "湖里区", //区块名称
108                     itemStyle: {
109                       normal: {
110                         areaColor: "#ebccb9",
111                       },
112                     },
113                   },
114                   {
115                     name: "思明区", //区块名称
116                     itemStyle: {
117                       normal: {
118                         areaColor: "#e4a2a3",
119                       },
120                     },
121                   },
122                   {
123                     name: "翔安区", //区块名称
124                     itemStyle: {
125                       normal: {
126                         areaColor: "#d8c0d6",
127                       },
128                     },
129                   },
130                   {
131                     name: "海沧区", //区块名称
132                     itemStyle: {
133                       normal: {
134                         areaColor: "#acd4a0",
135                       },
136                     },
137                   },
138                   {
139                     name: "集美区", //区块名称
140                     itemStyle: {
141                       normal: {
142                         areaColor: "#b4d3d6",
143                       },
144                     },
145                   },
146                   {
147                     name: "同安区", //区块名称
148                     itemStyle: {
149                       normal: {
150                         areaColor: "#e9e6b3",
151                       },
152                     },
153                   },
154                 ],
155               },
156             ],
157             series: [
158               {
159                 type: "scatter",
160                 coordinateSystem: "geo",
161                 data: [
162                   {
163                     name: "湖里区",
164                     value: 10,
165                   },
166                   {
167                     name: "思明区",
168                     value: 1123,
169                   },
170                   {
171                     name: "集美区",
172                     value: 3421,
173                   },
174                   {
175                     value: [112.68353, 22.38265],
176                   },
177                 ],
178                 symbolSize: "10",
179                 itemStyle: {
180                   normal: {
181                     color: "rgba(209,248,0,1)",
182                   },
183                 },
184               },
185             ],
186           };
187 
188           self.myChart.setOption(option);
189         });
190 
191         // jQuery---
192         // $.get(geoJson, function (res) {
193         //   echarts.registerMap("huaiAn", res);
194         //   self.myChart.setOption({
195         //     series: [
196         //       {
197         //         type: "map",
198         //         map: "huaiAn",
199         //       },
200         //     ],
201         //   });
202         // });
203         // Axios---
204         // this.get(geoJson)
205         //   .then((res) => {
206         //     echarts.registerMap("HuaiAn", res);
207         //     this.myChart.setOption({
208         //       series: [
209         //         {
210         //           type: "map",
211         //           map: "HuaiAn",
212         //         },
213         //       ],
214         //     });
215         //   })
216         //   .catch((err) => {
217         //     console.log("ERR", err);
218         //   });
219 
220         // });
221       });
222     },
223   },
224 };
225 </script>
226 
227 <style>
228 </style>
View Code

目前没做到用网址引入，一直报错403

 

 

大概效果如图

label: {
                    show: true,
                    color: "#222",
                  },

　　

 

posted @ 2021-08-24 17:46  乐盘游  阅读(124)  评论(0)    收藏  举报