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

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示例

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

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

   mapData.js中的内容为中国地图坐标文件：

2. 绘制地图（在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
        }
      }
    }
  ],

3. 绘制地图上的各种效果（在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)