在沒(méi)接觸小程序前，項(xiàng)目中經(jīng)常遇到圖形圖表，大家可能會(huì)采用常見(jiàn)的Echarts或者Highcharts這兩個(gè)開(kāi)源的插件來(lái)進(jìn)行開(kāi)發(fā)。自從小程序出現(xiàn)后，圖形圖表也在小程序中出現(xiàn)，包括常見(jiàn)的餅狀圖、柱形圖、折線圖、混合圖、地圖。今天我們就來(lái)拿地圖效果來(lái)分析下。
相信在開(kāi)發(fā)中，使用Echarts的同學(xué)比較多，自小程序正式使用后，Echarts團(tuán)隊(duì)也開(kāi)發(fā)出一套適合小程序的組件，這個(gè)組件和PC端一樣，同樣支持常見(jiàn)的餅狀圖、柱形圖、折線圖、混合圖、地圖等效果。
接下來(lái)看下如何使用Echarts組件
1、首先下載Echarts在git上提供的組件，下載到本地放到項(xiàng)目中。如下圖：

image.png

2、組件放入到項(xiàng)目中后，在相應(yīng)的目錄中找到j(luò)son頁(yè)面并引入組件：

{
  "navigationBarTitleText": "地圖",
  "usingComponents": {
    "ec-canvas" : "../../ec-canvas/ec-canvas"
  }
}

3、在wxll頁(yè)面中，寫(xiě)個(gè)ec-canvas標(biāo)簽，地圖和折線、柱形圖等都是用canvas實(shí)現(xiàn)出來(lái)的。

<view class="mychart">
        <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ ecMap }}"></ec-canvas>
</view>

4、重點(diǎn)部分，js文件， 首先先下載各省市或者全國(guó)地圖的json文件。然后進(jìn)行改造并改成js文件，先拿山東地圖來(lái)說(shuō)，看下如何改造：
沒(méi)改造前的代碼如下圖：

image.png

image.png

5、這里開(kāi)始講如何在js中進(jìn)行繪制地圖。

import * as echarts from '../../ec-canvas/echarts';//引入下載好的echarts提供的組件
import geoJson from 'shandong.js'//這里就是引入上一步講的 將json改成js文件。
const app = getApp();

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart(chart);
  echarts.registerMap('shandong', geoJson);
  
  const option ={
      title:{
          text: '山東省地圖',
          top:'3%',
          left:'center',
          textStyle:{
            fontSize:20,
            fontWeight:600,
            color:'#222'
          }
      },
      tooltip:{
        trigger:'item',
        formatter: function (val) {
          return val.data.name + '人口數(shù)量: ' + val.data.value + '萬(wàn)'
        }
      },
      series:[{
        type: 'map',
        map:'shandong',
        roam:true,//開(kāi)啟地圖縮放， 開(kāi)啟后在預(yù)覽模式中有一點(diǎn)點(diǎn)卡，暫時(shí)還沒(méi)找到解決辦法
        geoIndex:0,
        label:{
          normal:{
              show:true,//顯示省市標(biāo)簽
              textStyle:{color:"#222"}
          },
          emphasis:{
              show:true,//顯示省市標(biāo)簽
              textStyle:{color:"#222"}
          }
        },
        itemStyle: {
            normal: {
                borderWidth: .5,//區(qū)域邊框?qū)挾?                borderColor: '#0550c3',//區(qū)域邊框顏色
                areaColor:"#57cfff",//區(qū)域顏色
            },
            emphasis: {
               borderWidth: .95,//鼠標(biāo)滑過(guò)區(qū)域，區(qū)域邊框?qū)挾?               borderColor: '#fff',//鼠標(biāo)滑過(guò)區(qū)域，區(qū)域邊框顏色
               areaColor:"#ff6511",//鼠標(biāo)滑過(guò)區(qū)域背景色
              
            }
        },
        data: [//數(shù)據(jù)
          { name: '濟(jì)南市', value: 1000 },
          { name: '青島市', value: 10 },
          { name: '德州市', value: 20 },
          { name: '淄博市', value: 30 },
          { name: '濰坊市', value: 40 },
          { name: '日照市', value: 41 },
          { name: '濟(jì)寧市', value: 15 },
          { name: '菏澤市', value: 25 },
          { name: '煙臺(tái)市', value: 35 },
          { name: '威海市', value: 35 },
          { name: '泰安市', value: 35 },
          { name: '臨沂市', value: 35 },
          { name: '棗莊市', value: 35 },
          { name: '濱州市', value: 35 },
          { name: '東營(yíng)市', value: 35 },
          { name: '萊蕪市', value: 35 },
          { name: '聊城市', value: 35 }
        ]
      }],
  }
  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ecMap: {//這里的ecMap要與wxll中的{{ecMap}}一致
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 獲取 chart 實(shí)例的方式
      // console.log(chart)
    }, 2000);
  }
});

最終效果圖：

image.png

以上是在小程序中 實(shí)現(xiàn)省市地圖的基礎(chǔ)代碼，有不足的地方歡迎大家指正。