小程序Echarts 构建中国地图并锚定区域点击事件
Step1 效果展示
使用的绘图框架为 Echarts for Wexin
具体API文档地址请点击 [---->](https://www.echartsjs.com/zh/tutorial.html#自定义构建 ECharts)
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.7)"
}
},itemStyle: {
normal: {
//shadowBlur: 50,//shadowColor: 'rgba(0,0.2)',borderColor: "rgba(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 是 省份 把 需要的操作在该事件内实现
}
}
})
小程序开发联系 QQ 1025584691
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
