微信小程序+Echarts实现中国地图

一、版本说明

微信开发者工具： v1.02.1911180

 

二、下载文件

2.1、在微信小程序中使用 ECharts 官方地址，参考这里； 小程序+Echarts 的官方Demo 源码参考这里

 

2.2、下载上述 Demo 源码后，找到地图示例目录 `echarts-for-weixin-master\pages\map`，发现要实现中国地图，得下载有关坐标的 json 文件，参考这里下载哦

 

2.3、本文源码，参考这里

 

三、在小程序中引入第三方 Echarts 插件

3.1、注意：Echarts官方暂不支持以下功能，具体参考这里

 

3.2、找到上述 Demo 源码的目录 `ec-canvas`，将此文件夹复制到小程序的 `miniprogram` 目录下，然后对应 page下的 json 文件中引入，如下图

      【注意】复制目录`ec-canvas`是为了便于开发，若是本地预览或上线，会提示文件过大，可下载此压缩版本，然后将下载的文件放在 `ec-canvas/echarts.js`，一定需要重命名为 `echarts.js`。

                  ！！！【这里还有图哈】   

 

3.3、对应 page下的 wxml 文件，内容如下，以下步骤也可参考官网Demo引入方式

 其中 "id" 、"canvas-id" 、"ec" 对应的属性名，可自定义

 

3.4、注意：Echarts 绘制图形时，需要给当前图形一定高度，在 wxss 文件中修改样式，对应上述的 id

 

3.5、【重点】绘制图形的逻辑，主要在对应 page下的 js 文件中

• 引入文件 echarts.js 和 有中国地图坐标的文件

 

• 其中 mapData.js 文件通过 module.exports 导出对应的 json 内容，格式如下，其中 json 内容（中国地图等）的下载参考这里

 

• 地图初始值格式如下， `initChartMap` 是函数，主要内容是绘制地图，然后返回对应的 echarts 对象，主要内容参考下面步骤

 

3.6、 `initChartMap` 函数主要内容如下

/**
 * 生成1000以内的随机数
 */
function randomData() {
  return Math.round(Math.random() * 1000);
}


/**
 * 全国疫情分布地图
 */
function initChartMap(canvas, width, height) {
  let myMap = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(myMap);
  echarts.registerMap('china', geoJson);  // 绘制中国地图

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: "#FFF",
      padding: [
        10,  // 上
        15, // 右
        8,  // 下
        15, // 左
      ],
      extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
      textStyle: {
        fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
        color: '#005dff',
        fontSize: 12,
      },
      formatter: `{b} :  {c}确诊`
    },
    geo: [
      {
        // 地理坐标系组件
        map: "china",
        roam: false, // 可以缩放和平移
        aspectScale: 0.8, // 比例
        layoutCenter: ["50%", "38%"], // position位置
        layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域
        label: {
          // 图形上的文本标签
          normal: {
            show: true,
            textStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              fontSize: '8'
            }
          },
          emphasis: { // 高亮时样式
            color: "#333"
          }
        }
        itemStyle: {
          // 图形上的地图区域
          normal: {
            borderColor: "rgba(0,0,0,0.2)",
            areaColor: "#005dff"
          }
        }
      }
    ],
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 800,
      max: 50000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        type: 'map',
        mapType: 'china',
        geoIndex: 0,
        roam: false, // 鼠标是否可以缩放
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { name: '北京', value: randomData() },
          { name: '天津', value: randomData() },
          { name: '上海', value: randomData() },
          { name: '重庆', value: randomData() },
          { name: '河北', value: randomData() },
          { name: '河南', value: randomData() },
          { name: '云南', value: randomData() },
          { name: '辽宁', value: randomData() },
          { name: '黑龙江', value: randomData() },
          { name: '湖南', value: randomData() },
          { name: '安徽', value: randomData() },
          { name: '山东', value: randomData() },
          { name: '新疆', value: randomData() },
          { name: '江苏', value: randomData() },
          { name: '浙江', value: randomData() },
          { name: '江西', value: randomData() },
          { name: '湖北', value: randomData() },
          { name: '广西', value: randomData() },
          { name: '甘肃', value: randomData() },
          { name: '山西', value: randomData() },
          { name: '内蒙古', value: randomData() },
          { name: '陕西', value: randomData() },
          { name: '吉林', value: randomData() },
          { name: '福建', value: randomData() },
          { name: '贵州', value: randomData() },
          { name: '广东', value: randomData() },
          { name: '青海', value: randomData() },
          { name: '西藏', value: randomData() },
          { name: '四川', value: randomData() },
          { name: '宁夏', value: randomData() },
          { name: '海南', value: randomData() },
          { name: '台湾', value: randomData() },
          { name: '香港', value: randomData() },
          { name: '澳门', value: randomData() }
        ]
      }]
  };

  myMap.setOption(option);
  return myMap
}

 

3.7、最终在小程序中呈现的图形如下，可根据 Echarts 官网 修改图形样式

 

 

写给自己的随笔，有问题欢迎指出(*^▽^*)，源码参考这里