微信小程序 使用Echarts实现省市地图（山东地图demo）

上篇写过 在PC端使用Echarts实现省市地图效果，今天说下在小程序中如何使用echarts实现省市地图，这次就拿山东地图来说下。

1、首先还是下载Echarts在git上提供的组件，下载到本地放到项目中。如下图： 2、组件放入到项目中，在相应的json中引入组件：

{ "navigationBarTitleText": "地图", "usingComponents": { "ec-canvas" : "../../ec-canvas/ec-canvas" } }

3、在wxll页面中，写个ec-canvas标签，地图和折线、柱形图等都是用canvas实现出来的。

<view class="mychart"> <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ ecMap }}"></ec-canvas> </view>

4、重点部分，js文件， 首先先下载各省市或者全国地图的json文件。然后进行改造并改成js文件，先拿山东地图来说，看下如何改造：

没改造前的代码如下图：

改造后的（改造后将json改成js文件）

改造好并改成js文件后，讲文件放到对应的目录下面。

5、这里开始讲如何在js中进行绘制地图。

import * as echarts from '../../ec-canvas/echarts';//引入下载好的echarts提供的组件 import geoJson from 'shandong.js'//这里就是引入上一步讲的 将json改成js文件。 const app = getApp(); function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height, }); canvas.setChart(chart); echarts.registerMap('shandong', geoJson); const option ={ title:{ text: '山东省地图', top:'3%', left:'center', textStyle:{ fontSize:20, fontWeight:600, color:'#222' } }, tooltip:{ trigger:'item', formatter: function (val) { return val.data.name + '人口数量: ' + val.data.value + '万' } }, series:[{ type: 'map', map:'shandong', roam:true,//开启地图缩放， 开启后在预览模式中有一点点卡，暂时还没找到解决办法 geoIndex:0, label:{ normal:{ show:true,//显示省市标签 textStyle:{color:"#222"} }, emphasis:{ show:true,//显示省市标签 textStyle:{color:"#222"} } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#0550c3',//区域边框颜色 areaColor:"#57cfff",//区域颜色 }, emphasis: { borderWidth: .95,//鼠标滑过区域，区域边框宽度 borderColor: '#fff',//鼠标滑过区域，区域边框颜色 areaColor:"#ff6511",//鼠标滑过区域背景色 } }, data: [//数据 { name: '济南市', value: 1000 }, { name: '青岛市', value: 10 }, { name: '德州市', value: 20 }, { name: '淄博市', value: 30 }, { name: '潍坊市', value: 40 }, { name: '日照市', value: 41 }, { name: '济宁市', value: 15 }, { name: '菏泽市', value: 25 }, { name: '烟台市', value: 35 }, { name: '威海市', value: 35 }, { name: '泰安市', value: 35 }, { name: '临沂市', value: 35 }, { name: '枣庄市', value: 35 }, { name: '滨州市', value: 35 }, { name: '东营市', value: 35 }, { name: '莱芜市', value: 35 }, { name: '聊城市', value: 35 } ] }], } chart.setOption(option); return chart; } Page({ onShareAppMessage: function (res) { return { title: 'ECharts 可以在微信小程序中使用啦！', path: '/pages/index/index', success: function () { }, fail: function () { } } }, data: { ecMap: {//这里的ecMap要与wxll中的{{ecMap}}一致 onInit: initChart } }, onReady() { setTimeout(function () { // 获取 chart 实例的方式 // console.log(chart) }, 2000); } });

最终效果图：

以上是在小程序中 实现省市地图的基础代码，有不足的地方欢迎大家指正。