0 小程序开发背景
1 下载官方Github项目
2 按照Echarts官网的map示例使用
3 点击事件的函数
效果图

0 小程序开发背景

前段时间在上学校的软件开发与实践B课程
因为赶上了工大百年校庆，选择了开发百年工大校庆微信小程序
功能涵盖了校庆官方信息发布、校庆应援点亮地图、校庆活动发布、寻找校友、校友回忆、校庆祝福、校庆捐款、校庆周边等

参考的资料有

微信官方小程序文档
微信小程序的一个开发社区，资料比较老
B站上的小程序开发视频，是一个培训机构的，用于实战还行

在这里想复盘一下校庆应援点亮地图的步骤

使用的百度Echarts地图,参考的模板是中国地图模板

1 下载官方Github项目

进入Echarts for weixin，里面有示例步骤以及示例程序。
为了兼容小程序 Canvas，Echarts官方提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。

首先，需要下载本项目。其中，ec-canvas是提供的组件，其他文件是如何使用该组件的示例。ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。
如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。
在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。

2 按照Echarts官网的map示例使用

map示例

其中注意需要引进中国地图数据 mapData.js，点击此处下载mapData.js

在js文件中：
import geoJson from './mapData.js';

mapData.js中的内容为中国地图坐标文件：
绘制地图（在js文件中）:

  geo: [{// 地理坐标系组件map: "china",roam: false, // 可以缩放和平移aspectScale: 0.8, // 比例layoutCenter: ["50%", "38%"], // position位置layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域label: {// 图形上的文本标签normal: {show: true,textStyle: {color: "#E8E8E8",fontSize: '8'}},emphasis: { // 高亮时样式color: "#333",show: false}},itemStyle: {// 图形上的地图区域normal: {borderColor: "#FFD700",areaColor: "#87CEFF"//#000000 #87CEFF}}}],

绘制地图上的各种效果（在js文件中）：

 series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',// data: convertData(data),symbolSize: function(val) {return val[2] / 100;},label: {normal: {formatter: '{b}',position: 'left',show: false,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}},emphasis: {show: true,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}}},itemStyle: {normal: {color: '#FFD700'}}},{type: 'map',mapType: 'china',geoIndex: 0,roam: false, // 鼠标是否可以缩放label: {normal: {show: false,},emphasis: {show: false}},itemStyle: {normal: {color: '#05C3F9',fontSize: '8'},},// data:citydata},{name: '气泡点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin', //气泡symbolSize: function(val) {var a = (maxSize4Pin - minSize4Pin) / (max - min);var b = minSize4Pin - a * min;b = maxSize4Pin - a * max;return (a * val[2] + b)/3;},label: {normal: {show: false,textStyle: {color: '#fff',fontSize: 8,}},formatter: '{@[6]}',},itemStyle: {normal: {color: '#F62157', //标志颜色fontSize: 8,}},//zlevel: 6,// data: convertData(citydata.sort(function(a, b) {return b.value - a.value;})),
},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',//data: convertData(citydata.sort(function(a, b) {return b.value - a.value; }).slice(0, 5)),symbolSize: function(val) {return val[2]/80;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: false}},endcode:{label:2},itemStyle: {normal: {color: 'yellow',shadowBlur: 10,shadowColor: 'yellow'}},// zlevel: 1
}],

读取数据时使用的是微信小程序自带的云数据库

 const db = wx.cloud.database()getData:function(){wx.cloud.callFunction({name:"getCity"}).then(res=>{//console.log(res.result.data)const citydata=[];for(var i=0;i<res.result.data.length;i++){citydata.push(res.result.data[i])}//console.log(citydata)for(var i=0;i<citydata.length;i++){delete citydata[i]._id;delete citydata[i]._openid;}// console.log(citydata)// option.yAxis[0].data = note;option.series[0].data =  convertData(citydata);option.series[1].data = citydata;option.series[2].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}));option.series[3].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));if(!myMap){this.init_ChartMap();}else{myMap.clear();this.init_ChartMap();}})},

3 点击事件的函数

点击点亮之后，云数据库中该地区的数值+1

  lightHIT:function (){var cityAll = ['广东省','湖南省','黑龙江省','山东省','吉林省','辽宁省','内蒙古自治区','天津市','陕西省','山西省','宁夏回族自治区','新疆维吾尔自治区','西藏自治区','青海省','河北省','河南省','安徽省','浙江省','江苏省','上海市','重庆市','江西省','贵州省','海南省','台湾省','云南省','香港特别行政区','澳门特别行政区']var cityEasy = ['广东','湖南','黑龙江','山东','吉林','辽宁','内蒙古','天津','陕西','山西','宁夏','新疆','西藏','青海','河北','河南','安徽','浙江','江苏','上海','重庆','江西','贵州','海南','台湾','云南','香港','澳门']var num = cityAll.indexOf(this.data.region[0])console.log(cityEasy[num])db.collection("city").where({name:_.eq(cityEasy[num])}).update({data:{value:_.inc(1)}}).then(res=> {// res.data 包含该记录的数据this.getData();console.log(res)})this.setData({dialogShow: true,//lightshow:false})},

完整代码：

js文件

import * as echarts from '../../ec-canvas/echarts';
import geoJson from './mapData.js';
//import mychart from './china.json';const app = getApp();var geoCoordMap = {'台湾': [121.5135,25.0308],'黑龙江': [127.9688, 45.368],'内蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京': [116.4551, 40.2539],"辽宁": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陕西": [109.1162, 34.2004],"甘肃": [103.5901, 36.3043],"宁夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重庆": [108.384366, 30.439702],"山东": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江苏": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],"广西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891],'香港':[114.204522,22.263085],'澳门':[113.58206,22.14282],
};
var max = 607,min = 0; // todo
var maxSize4Pin = 50,minSize4Pin = 0;var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;
};
const getPixelRatio = () => {let pixelRatio = 0wx.getSystemInfo({success: function (res) {pixelRatio = res.pixelRatio},fail: function () {pixelRatio = 0}})return pixelRatio
}
// console.log(pixelRatio)
var dpr = getPixelRatio()var option = {backgroundColor: 'transparent',title: {subtext: '工大应援，点亮中国',left: 'center',
},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: function (params) {if(typeof(params.value)[2] == "undefined"){return params.name + ' : ' + params.value;}else{return params.name + ' : ' + params.value[2];}}},geo: [{// 地理坐标系组件map: "china",roam: false, // 可以缩放和平移aspectScale: 0.8, // 比例layoutCenter: ["50%", "38%"], // position位置layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域label: {// 图形上的文本标签normal: {show: true,textStyle: {color: "#E8E8E8",fontSize: '8'}},emphasis: { // 高亮时样式color: "#333",show: false}},itemStyle: {// 图形上的地图区域normal: {borderColor: "#FFD700",areaColor: "#87CEFF"//#000000 #87CEFF}}}],visualMap: {show: true,min: 0,max: 607,left: 'left',top: 'bottom',text: ['high'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: { color: ['#63B8FF', '#FFD700','#EE0000'] //渐变颜色}
},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',// data: convertData(data),symbolSize: function(val) {return val[2] / 100;},label: {normal: {formatter: '{b}',position: 'left',show: false,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}},emphasis: {show: true,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}}},itemStyle: {normal: {color: '#FFD700'}}},{type: 'map',mapType: 'china',geoIndex: 0,roam: false, // 鼠标是否可以缩放label: {normal: {show: false,},emphasis: {show: false}},itemStyle: {normal: {color: '#05C3F9',fontSize: '8'},},// data:citydata},{name: '气泡点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin', //气泡symbolSize: function(val) {var a = (maxSize4Pin - minSize4Pin) / (max - min);var b = minSize4Pin - a * min;b = maxSize4Pin - a * max;return (a * val[2] + b)/3;},label: {normal: {show: false,textStyle: {color: '#fff',fontSize: 8,}},formatter: '{@[6]}',},itemStyle: {normal: {color: '#F62157', //标志颜色fontSize: 8,}},//zlevel: 6,// data: convertData(citydata.sort(function(a, b) {return b.value - a.value;})),
},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',//data: convertData(citydata.sort(function(a, b) {return b.value - a.value; }).slice(0, 5)),symbolSize: function(val) {return val[2]/80;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: false}},endcode:{label:2},itemStyle: {normal: {color: 'yellow',shadowBlur: 10,shadowColor: 'yellow'}},// zlevel: 1
}],};const db = wx.cloud.database()
const _ = db.command
var myMap = null;
Page({onShareAppMessage: function (res) {wx.showShareMenu({withShareTicket: true}) return {title: '我为哈工大百年校庆应援！祝福工大生日快乐！',path: '/pages/light/light',imageUrl: 'https://6869-hit100-g6bma-1302265912.tcb.qcloud.la/2020.png?sign=b90eef1d7eabe42c1e5a362110b6a77c&t=1590806475',    success: function () { },fail: function () { }}},data: {ecMap: {// onInit: initChartMaplazyLoad: true //初始化加载},StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,index: null,region: ['广东省', '深圳市', '南山区'],multiIndex: [0, 0, 0],customItem: '全部',dialogShow: false,//lightshow:true,buttons: [{text: '规格严格,功夫到家!  :)'}],},tapDialogButton(e) {this.setData({dialogShow: false,})if(e.detail){console.log(e.detail)wx.showShareMenu({withShareTicket: true}) return {title: '我为哈工大百年校庆应援！祝福工大生日快乐！',path: '/pages/light/light',imageUrl: '/images/100.png',    success: function () { },fail: function () { }}}//console.log(e.detail)},lightHIT:function (){var cityAll = ['广东省','湖南省','黑龙江省','山东省','吉林省','辽宁省','内蒙古自治区','天津市','陕西省','山西省','宁夏回族自治区','新疆维吾尔自治区','西藏自治区','青海省','河北省','河南省','安徽省','浙江省','江苏省','上海市','重庆市','江西省','贵州省','海南省','台湾省','云南省','香港特别行政区','澳门特别行政区']var cityEasy = ['广东','湖南','黑龙江','山东','吉林','辽宁','内蒙古','天津','陕西','山西','宁夏','新疆','西藏','青海','河北','河南','安徽','浙江','江苏','上海','重庆','江西','贵州','海南','台湾','云南','香港','澳门']var num = cityAll.indexOf(this.data.region[0])console.log(cityEasy[num])db.collection("city").where({name:_.eq(cityEasy[num])}).update({data:{value:_.inc(1)}}).then(res=> {// res.data 包含该记录的数据this.getData();console.log(res)})this.setData({dialogShow: true,//lightshow:false})},bindPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},MultiColumnChange(e) {let data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;switch (e.detail.column) {case 0:data.multiIndex[1] = 0;data.multiIndex[2] = 0;break;case 1:switch (data.multiIndex[0]) {case 0:break;case 1:break;}data.multiIndex[2] = 0;break;}this.setData(data);},bindRegionChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})},/**1. 生命周期函数--监听页面加载*/onLoad: function (options) {this.echartsComponnet = this.selectComponent('#mychart-dom-map');this.getData(); //获取数据},onReady() {},getData:function(){wx.cloud.callFunction({name:"getCity"}).then(res=>{//console.log(res.result.data)const citydata=[];for(var i=0;i<res.result.data.length;i++){citydata.push(res.result.data[i])}//console.log(citydata)for(var i=0;i<citydata.length;i++){delete citydata[i]._id;delete citydata[i]._openid;}// console.log(citydata)// option.yAxis[0].data = note;option.series[0].data =  convertData(citydata);option.series[1].data = citydata;option.series[2].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}));option.series[3].data = convertData(citydata.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));if(!myMap){this.init_ChartMap();}else{myMap.clear();this.init_ChartMap();}})},init_ChartMap: function() {this.echartsComponnet.init((canvas, width, height)=>{myMap = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});   myMap.showLoading(); // 首次显示加载动画canvas.setChart(myMap);echarts.registerMap('china', geoJson);  // 绘制中国地图myMap.setOption(option);myMap.hideLoading(); // 隐藏加载动画return myMap;});}});

json文件

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas","mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"}
}

wxml文件

<!--index.wxml--><view class="container">
<text class="word1">哈尔滨工业大学百年校庆</text><ec-canvas id="mychart-dom-map" canvas-id="mychart" ec="{{ ecMap }}"></ec-canvas><text class="word2"> 我为哈工大百年校庆应援！</text><view class="cu-form-group"><view class="title">地址选择</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker></view> <view style="width:500rpx;display: flex;flex-direction: row; justify-content:space-between; padding:10rpx;"><button type="primary" bindtap="lightHIT" >应援按钮</button><button type="primary" plain="true" open-type="share">分享给朋友</button></view><mp-dialog title="为哈工大百年校庆应援成功!" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><image style="width: 160px; height: 125px;"  src="https://6869-hit100-g6bma-1302265912.tcb.qcloud.la/2020.png?sign=b90eef1d7eabe42c1e5a362110b6a77c&t=1590806475"></image></mp-dialog></view>

wxss文件

/**index.wxss**/
ec-canvas {width: 100%;height: 100%;padding:300rpx,0rpx,10rpx,10rpx;
}#mychart-dom-map{width:100%;height:800rpx;padding:100rpx,0rpx,20rpx,20rpx;
}.button-sp-area{margin: 0 auto;width: 50%;padding-top:10rpx;
}.word2{font-size:18px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/font-family:"微软雅黑";
}.word1{font-size:19px;      /*设置文字字号*/color:black;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/font-family:"微软雅黑";
}.container {position: absolute;top: 10rpx;bottom: 0;left: 0;right: 0;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;
}

效果图

总体布局
进入工大应援
选择地区后点亮

【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能相关推荐

腾讯地图微信小程序JavaScript SDK
简介腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
谷歌地图api 微信小程序_使用Google的融合位置提供程序API进行实时位置跟踪
谷歌地图api 微信小程序 Location tracking and monitoring have seen a surge in modern application development w ...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...
微信小程序自带地图_小程序丨教你：如何打开小程序如何打开微信自带的地图（附源码）...
教你小程序系列教程:教你小程序系列教程: 1.教你:微信小程序如何实现scroll-view隐藏滚动条 2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码) 3.教你:小程序如何使用 ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
引用百度地图微信小程序JS API模块
1.原理前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面. 2. js 引入模块在 ...
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
小程序：位置信息(Location)及微信小程序LBS解决方案实践
目前在做的小程序需要使用到map组件以及小程序个性地图,涉及到的功能如下: 1# 获取用户当前位置,返回对应的省市区 2# 根据目的地的具体地址,显示在地图中的位置 3# 根据用户当前位置,计算出与 ...
“小程序”的最佳入口位置--关于微信小程序的思考笔记
看到一位前辈撰文[1]阐述微信小程序提出入口位置包括两个:1. 传统的微信订阅号/服务号会话入口:2. "发现"栏朋友圈/摇一摇/扫一扫按钮之外的大片空白区域,除了腾讯预留的 VI ...
微信小程序打包的原理_说说微信小程序和它的打包加密算法
B站传送门www.bilibili.com 不愿看视频的可以看下面的视频文字稿不知道你有没有发现这样一个现象,当年用QQ的人越来越多的转战到了微信.当时那群留着爆炸头用着￡吙星妏☆★的孩子把自己非 ...

【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能

0 小程序开发背景

1 下载官方Github项目

2 按照Echarts官网的map示例使用

3 点击事件的函数

效果图

【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能相关推荐

最新文章

热门文章