微信小程序ec-canvas(echarts)显示地图【以甘肃省为例】

文章目录

参考文档《微信小程序使用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有些大(包含了所有图表),小程序后期上线对文件大小有要求,所以建议进行定制可减少文件大小占比。

  • 点击在线定制
  • 选择版本 (必须和前面下载的ec-canvas中的echarts.js版本保持一致)
  • 选择需要定制的图表 (我需要的是地图map和视觉映射visualMap),其它保持默认
  • 其它选项包保持默认,点击下载。
  • 下载完成后,把项目中 ec-canvas目录中的 echarts.js 文件替换为下载的文件:echarts.min.js
  • 注意: ec-canvas.jsimport引入的是原来的 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组件

json 复制代码
 "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas",
  },

analysis.js文件中引入 mapData.jsec-canvas 中的 echarts.js

javascript 复制代码
import * as echartsAll from '../../ec-canvas/echarts.min'
import geoJson from './mapData';

在页面analysis.wxml文件

html 复制代码
<view class="chatdt">
  <ec-canvas-all id="mychart-dom-area" canvas-id="mychart-area" ec="{{ dtMap }}"></ec-canvas-all>
</view>

在页面analysis.wxss文件

css 复制代码
.chatdt {
  width: 750rpx;
  height: 750rpx;
  margin: 0 auto;
}

analysis.js文件

javascript 复制代码
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 },
    ],
  }]
}
javascript 复制代码
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
}
相关推荐
图表制作解说(目标1000个图表)5 小时前
ECharts散点图-散点图15,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
沉迷...7 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
老李不敲代码13 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa13 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J15 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896316 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
晚风3081 天前
el-tab组件与echarts的影响
echarts·element
跨时代科技1 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰1 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序