参考文档《微信小程序使用echarts显示全国地图》《如何在微信小程序开发中使用echarts以及踩坑记录(最全教程)》

一、效果图

二、实现

1、下载echarts插件

• echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。
• echarts-for-weixin 下载地址：https://github.com/ecomfe/echarts-for-weixin
• 下载压缩包解压后如下图：

• 将 ec-canvas文件夹放置小程序的项目目录下（ components或pages下 均可，根据个人习惯）

• github 网页下载时，可以看到 ec-canvas 的版本号为 5.3.3 版本（定制图表时需要版本一致，若不定制可忽略）

2、定制图形，生成 echarts.min.js 文件

ec-canvas目录中的 echarts.js有些大（包含了所有图表），小程序后期上线对文件大小有要求，所以建议进行定制可减少文件大小占比。

• 进入echarts官网
• 点击下载

• 点击在线定制
  
• 选择版本（必须和前面下载的ec-canvas中的echarts.js版本保持一致）
• 选择需要定制的图表（我需要的是地图map和视觉映射visualMap），其它保持默认

• 其它选项包保持默认，点击下载。

• 下载完成后，把项目中 ec-canvas目录中的 echarts.js 文件替换为下载的文件：echarts.min.js；

• 注意： ec-canvas.js的import引入的是原来的echarts.js文件，需要自己改成刚才下载的文件，如下图所示

3、小程序中使用

（1）下载甘肃地图

• 下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector
• 搜索想要的地图节点，选择 JSON API(包含子域)，我下载的是甘肃省
• 复制链接并在新窗口打开，这个文件原本为json格式，我们在小程序项目的文件目录下新建一个 mapData.js ,将页面中的所有内容复制到这个js文件中并将其公开（module.exports = 页面上复制的内容）。

（2）使用

analysis.json文件中引入ec-canvas组件

 "usingComponents": {    "ec-canvas": "../../ec-canvas/ec-canvas",  },

在analysis.js文件中引入 mapData.js 和 ec-canvas 中的 echarts.js；

import * as echartsAll from '../../ec-canvas/echarts.min'import geoJson from './mapData';

在页面analysis.wxml文件

<view class="chatdt">  <ec-canvas-all id="mychart-dom-area" canvas-id="mychart-area" ec="{{ dtMap }}"></ec-canvas-all></view>

在页面analysis.wxss文件

.chatdt {  width: 750rpx;  height: 750rpx;  margin: 0 auto;}

在analysis.js文件

let defaultDtObj = {  tooltip: {    show: false,  },  visualMap: {    type: 'continuous',    inRange: {      color: '#7ecac6', //地图用一种颜色显示，不同程度的话，写成数组形式的颜色    },    show: false  },  series: [{    type: 'map',    mapType: 'gansu',    left: 10,    right: 10,    label: {      normal: {        show: true, //在省市区是否显示省市区名称        formatter: '{b}/n{c}',        fontSize: 10,        lineHeight: 13,      },    },    itemStyle: {      borderColor: '#ffffff',      emphasis: {        areaColor: '#6aa4ce',        borderWidth: 0      },    },    animation: false,    selectedMode: false,    data: [      { name: '兰州', value: 0 },      { name: '平凉', value: 0 },      { name: '张掖', value: 0 },      { name: '酒泉', value: 0 },      { name: '白银', value: 0 },      { name: '庆阳', value: 0 },      { name: '嘉峪关', value: 0 },      { name: '武威', value: 0 },      { name: '临夏', value: 0 },      { name: '定西', value: 0 },      { name: '天水', value: 0 },      { name: '陇南', value: 0 },      { name: '甘南', value: 0 },      { name: '金昌', value: 0 },    ],  }]}

Page({  data: {    dtMap: {      onInit: function (canvas, width, height, dpr) {        dtChart = echartsAll.init(canvas, null, {          width: width,          height: height,          devicePixelRatio: dpr // new        });        canvas.setChart(dtChart);        echartsAll.registerMap('gansu', geoJson);        dtChart.setOption(getDtOption());        return dtChart;      }    },  },  getDtData() {    let obj1 = { ...defaultDtObj }    obj1.series[0].data = [      { name: '兰州', value: 10 },      { name: '平凉', value: 20 },      { name: '张掖', value: 30 },      { name: '酒泉', value: 40 },      { name: '白银', value: 41 },      { name: '庆阳', value: 15 },      { name: '嘉峪关', value: 10 },      { name: '武威', value: 20 },      { name: '临夏', value: 30 },      { name: '定西', value: 40 },      { name: '天水', value: 41 },      { name: '陇南', value: 15 },      { name: '甘南', value: 15 },      { name: '金昌', value: 15 },    ]    dtChart.setOption(obj1)  },  onReady() {    this.getDtData()  }})function getDtOption() {  return defaultDtObj}