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

在没接触小程序前，项目中经常遇到图形图表，大家可能会采用常见的Echarts或者Highcharts这两个开源的插件来进行开发。自从小程序出现后，图形图表也在小程序中出现，包括常见的饼状图、柱形图、折线图、混合图、地图。今天我们就来拿地图效果来分析下。
相信在开发中，使用Echarts的同学比较多，自小程序正式使用后，Echarts团队也开发出一套适合小程序的组件，这个组件和PC端一样，同样支持常见的饼状图、柱形图、折线图、混合图、地图等效果。
接下来看下如何使用Echarts组件
1、首先下载Echarts在git上提供的组件，下载到本地放到项目中。如下图：

image.png

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文件，先拿山东地图来说，看下如何改造：
没改造前的代码如下图：

image.png

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

image.png

改造好并改成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);
  }
});

最终效果图：

image.png

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

最后编辑于：2020.08.11 10:47:30

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

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