微信小程序利用echarts实现中国任意行政区域地图

最新推荐文章于 2024-06-11 21:36:57 发布

abs625

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量4.3k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序绘制中国地图微信小程序绘制行政区域地图微信小程序绘制地图

本文链接：https://blog.csdn.net/abs625/article/details/116455080

版权

微信小程序专栏收录该内容

22 篇文章 12 订阅

订阅专栏

微信小程序利用echarts实现中国任意行政区域地图

前言
实现
尾巴

前言

最近微信小程序中需要绘制地图，然后点击地图可以跳转到下一层级。研究了一番，选择来百度的开源图标框架echarts-for-weixin，不过最近GitHub可能有时候无法访问，使用csdn加速地址也一样Echarts，接下来就分享下实现过程了。

实现

我们先给我们的祖国来张画像，实现一张中国地图。

克隆代码

从上面的地址上面先把代码克隆下来，我们主要使用的就是ec-canvas这个文件夹里面的部分。

集成

新建小程序工程，然后将ec-canvas这个目录拷贝到工程和pages同级目录下。
在这里插入图片描述
新建一个页面，然后在json文件中引入组件：

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

然后是wxml文件：

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

wxss文件：

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

最后最重要的js文件：

import * as echarts from '../../ec-canvas/echarts'
import geoJson from './mapData.js'  //中国地图数据
var that 
Page({
  data: {
    ec: {}
  },
  onLoad(){
    that = this
  },
  onReady() {
    that.ecComponent = that.selectComponent('#mychart-dom-area')
    that.drawChina()
  },
  drawChina(){
    that.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      echarts.registerMap('china', geoJson) // 绘制江西地图
      const option = {
        //点击后的pop弹框
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true
        },
        //右边三个按钮
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [{
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true,
              //正常状态下字体颜色
              textStyle: {
                color: '#fff',
                fontSize: '8'
              }
            },
            //选中后的字体颜色
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',//正常情况每个区域的分割线颜色
              areaColor: '#b13a1c',//正常情况区域的颜色
            },
            emphasis: {
              areaColor: '#389BB7',//选中情况区域的颜色
              borderWidth: 0
            }
          },
          animation: false,
          //要显示地图深浅颜色可以放开注释
          /*data: [
            { name: '北京', value: 10 },
            { name: '天津', value: 20 },
            { name: '上海', value: 40 },
            { name: '重庆', value: 80 },
            { name: '河北', value: 50 },
            { name: '河南', value: 10 },
            { name: '云南', value: 10 },
            { name: '辽宁', value: 60 },
            { name: '黑龙江', value: 100 },
            { name: '湖南', value: 100 },
            { name: '安徽', value: 20 },
            { name: '山东', value: 50 },
            { name: '新疆', value: 50 },
            { name: '江苏', value: 60 },
            { name: '浙江', value: 10 },
            { name: '江西', value: 90 },
            { name: '湖北', value: 80 },
            { name: '广西', value: 10 },
            { name: '甘肃', value: 10 },
            { name: '山西', value: 50 },
            { name: '内蒙古', value: 80 },
            { name: '陕西', value: 100 },
            { name: '吉林', value: 100 },
            { name: '福建', value: 20 },
            { name: '贵州', value: 60 },
            { name: '广东', value: 20 },
            { name: '青海', value: 10 },
            { name: '西藏', value: 20 },
            { name: '四川', value: 50 },
            { name: '宁夏', value: 70 },
            { name: '海南', value: 100 },
            { name: '台湾', value: 60 },
            { name: '香港', value: 100 },
            { name: '澳门', value: 100 }
          ]*/
        }]
      }
      chart.setOption(option)
      //事件控制
      chart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params)
      })
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart
    })
  }
});

好了代码写完了，我们来看下效果：
在这里插入图片描述
哈哈，看着还不错哈。

可能有些人说我不想要左下角那个竖条和右边那三个按钮可以么，我只想显示纯粹的地图？
安排，将下面两个属性注释掉就行

visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true
        },
        //右边三个按钮
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        }

注释掉后我们再看下效果：
在这里插入图片描述

点击事件

点击事件通过以下带来来实现

chart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params)
})

其中弹出框配置为：

tooltip: {
   trigger: 'item',
   formatter: '{b}'
}

formatter可以自己做定制，显示想要的内容，还有一些区域和文字的内容定制代码中也做了注释，自己可以按需更改。这里只展示了部分属性和用法，更多用法参考echarts官网。

点击跳转

接下来我们实现点击省份显示该省份的所有地市。

前面我们介绍了点击事件，思路就是在点击省份的时候根据该省份的地市地图数据重新绘制一遍。为了简化演示，我这里只展示点击江西省来显示江西省所有地市地图。

代码改造

先引入江西省所有地市地图数据

import nanchang from './jiangxi.js'

新增一个绘制江西省所有地市地图的函数，完整js代码如下：

import * as echarts from '../../ec-canvas/echarts'
import geoJson from './mapData.js'
import nanchang from './jiangxi.js'
var that 
Page({
  data: {
    ec: {}
  },
  onLoad(){
    that = this
  },
  onReady() {
    that.ecComponent = that.selectComponent('#mychart-dom-area')
    that.drawChina()
  },
  drawChina(){
    that.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      echarts.registerMap('china', geoJson) // 绘制江西地图
      const option = {
        //点击后的pop弹框
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        }/*,
        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true
        },
        //右边三个按钮
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        }*/,
        series: [{
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true,
              //正常状态下字体颜色
              textStyle: {
                color: '#fff',
                fontSize: '12'
              }
            },
            //选中后的字体颜色
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',//正常情况每个区域的分割线颜色
              areaColor: '#b13a1c',//正常情况区域的颜色
            },
            emphasis: {
              areaColor: '#389BB7',//选中情况区域的颜色
              borderWidth: 0
            }
          },
          animation: false,
          /*data: [
            { name: '北京', value: 10 },
            { name: '天津', value: 20 },
            { name: '上海', value: 40 },
            { name: '重庆', value: 80 },
            { name: '河北', value: 50 },
            { name: '河南', value: 10 },
            { name: '云南', value: 10 },
            { name: '辽宁', value: 60 },
            { name: '黑龙江', value: 100 },
            { name: '湖南', value: 100 },
            { name: '安徽', value: 20 },
            { name: '山东', value: 50 },
            { name: '新疆', value: 50 },
            { name: '江苏', value: 60 },
            { name: '浙江', value: 10 },
            { name: '江西', value: 90 },
            { name: '湖北', value: 80 },
            { name: '广西', value: 10 },
            { name: '甘肃', value: 10 },
            { name: '山西', value: 50 },
            { name: '内蒙古', value: 80 },
            { name: '陕西', value: 100 },
            { name: '吉林', value: 100 },
            { name: '福建', value: 20 },
            { name: '贵州', value: 60 },
            { name: '广东', value: 20 },
            { name: '青海', value: 10 },
            { name: '西藏', value: 20 },
            { name: '四川', value: 50 },
            { name: '宁夏', value: 70 },
            { name: '海南', value: 100 },
            { name: '台湾', value: 60 },
            { name: '香港', value: 100 },
            { name: '澳门', value: 100 }
          ]*/
        }]
      }
      chart.setOption(option)

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      //that.chart = chart
      chart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params)
        that.drawJx()
      })
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart
    })
  },
  drawJx(){
    that.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      echarts.registerMap('jiangxi', nanchang) // 绘制江西地图
      const option = {
        //不显示点击后的pop弹框
        tooltip: {
          trigger: 'item',
          formatter: '点击的是{b}'
        }/*,
        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true
        },
        //右边三个按钮
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        }*/,
        series: [{
          type: 'map',
          mapType: 'jiangxi',
          label: {
            normal: {
              show: true,
              //正常状态下字体颜色
              textStyle: {
                color: '#fff'
              }
            },
            //选中后的字体颜色
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',
              areaColor: '#b13a1c',
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
          animation: false,
          data: [
            { name: '赣州市', value: 100 },
            { 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 }
          ]
        }]
      }
      chart.setOption(option)

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      //that.chart = chart
      chart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params)
      })
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart
    })
  }
});

接下来看下效果
在这里插入图片描述
当然你还可以再页面加上返回按钮，当点击返回按钮的时候返回上一层，就是根据上层的地图数据重新绘制一遍就行。需要注意的是按钮需要使用cover-view实现，这里就不演示了。

地图数据因为太长了，我就不贴出来了，已将上传到csdn地图数据，大家直接下载找到对应的地图数据就行。理论上只要数据齐全，中国各个层级行政区域地图都可以显示。

注意：由于微信小程序打包限制，你还可以按照需求去在线定制echarts.js来减少体积。

尾巴

今天的内容就分享到这里了，如果文章对你有帮助，或者你喜欢我的文章，欢迎点赞，评论，关注，谢谢！

abs625

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
7
评论
微信小程序利用echarts实现中国任意行政区域地图

微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图，然后点击地图可以跳转到下一层级。研究了一番，选择来百度的开源图标框架echarts-for-weixin，不过最近GitHub可能有时候无法访问，使用csdn加速地址也一样Echarts，接下来就分享下实现过程了。实现我们先给我们的祖国来张画像，实现一张中国地图。克隆代码从上面的地址上面先把代码克隆下来，我们主要使用的就是ec-canvas这个文件夹里面的部分。
复制链接

扫一扫