小程序Echarts 构建中国地图并锚定区域点击事件
- 2020 年 3 月 18 日
- 筆記
小程序Echarts 构建中国地图并锚定区域点击事件
Step1 效果展示
使用的绘图框架为 Echarts for Wexin
具体API文档地址请点击 —->
Step2 条件准备
1.Github上下载echarts-for-weixin 项目
- 将组件 ec-canvans 全部导入你的小程序中，把ec-canvans 作为组件引用
3.在使用到的页面注册该组件
show.json
{ "component": true, "usingComponents": { "ec-canvas": "../../../ec-canvas/ec-canvas" } }
show.wxml
<view class="box" > <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ ec }}"></ec-canvas> </view>
show.wxss
.box { width:100%; height:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #mychart-dom-map { position: relative; width: 100%; padding-top: 20rpx; height: 720rpx; }
Step3 逻辑实现
3.1 引入地图数据 data.js
该数据是Canvas绘制地图的关键，可以使用json 或者 js 形式进行导入，小程序中使用js 更为方便。
代码过长，托管在Gitee data.js
3.2 组件初始化
通过 pageInstance 绑定page 内事件，进行锚定。
show… 共同构成一个地图展示组件，可以直接进行引入使用。
show.js
import * as echarts from '../../../ec-canvas/echarts.js'; import geoJson from 'data.js'; let chart = null; let dataList = [{ name: 'china' }]; let pageInstance = {} // 2、进行初始化数据 function initChart(canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); //容器初始化 echarts.registerMap('china', geoJson); //地图数据注册 var option = { tooltip: { triggerOn: "click", formatter: function (e, t, n) { pageInstance.BindEvent(e); return e.name } },//点击响应事件 geo: { map: "china", roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: "10", color: "rgba(0,0,0,0.7)" } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: 'rgba(0, 0, 0, 0.2)', borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad", shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } },//地图颜色等配置 series: [{ name: "来源信息", type: "map", geoIndex: 0, data: dataList }]//对应点击事件响应 }; chart.setOption(option);//返回初始化结果 return chart; } Component({ /** * 组件的属性列表 */ options: { addGlobalClass: true, multipleSlots: true }, properties: { }, /** * 组件的初始数据 */ data: { ec: { onInit: initChart } }, /** * 组件的方法列表 */ lifetimes: { created: function () { pageInstance = this; } }, methods: { BindEvent(e){ //点击事件锚定 // e.name 是 省份 把 需要的操作在该事件内实现 } } })
