微信小程序+Echarts實現中國地圖

一、版本說明

微信開發者工具： v1.02.1911180

 

二、下載文件

2.1、在微信小程序中使用 ECharts 官方地址，參考這裏； 小程序+Echarts 的官方Demo 源碼參考這裏

 

2.2、下載上述 Demo 源碼後，找到地圖示例目錄 `echarts-for-weixin-master\pages\map`，發現要實現中國地圖，得下載有關座標的 json 文件，參考這裏下載哦

 

2.3、本文源碼，參考這裏

 

三、在小程序中引入第三方 Echarts 插件

3.1、注意：Echarts官方暫不支持以下功能，具體參考這裏

 

3.2、找到上述 Demo 源碼的目錄 `ec-canvas`，將此文件夾複製到小程序的 `miniprogram` 目錄下，然後對應 page下的 json 文件中引入，如下圖

      【注意】複製目錄`ec-canvas`是爲了便於開發，若是本地預覽或上線，會提示文件過大，可下載此壓縮版本，然後將下載的文件放在 `ec-canvas/echarts.js`，一定需要重命名爲 `echarts.js`。

                  ！！！【這裏還有圖哈】   

 

3.3、對應 page下的 wxml 文件，內容如下，以下步驟也可參考官網Demo引入方式

 其中 "id" 、"canvas-id" 、"ec" 對應的屬性名，可自定義

 

3.4、注意：Echarts 繪製圖形時，需要給當前圖形一定高度，在 wxss 文件中修改樣式，對應上述的 id

 

3.5、【重點】繪製圖形的邏輯，主要在對應 page下的 js 文件中

• 引入文件 echarts.js 和 有中國地圖座標的文件

 

• 其中 mapData.js 文件通過 module.exports 導出對應的 json 內容，格式如下，其中 json 內容（中國地圖等）的下載參考這裏

 

• 地圖初始值格式如下， `initChartMap` 是函數，主要內容是繪製地圖，然後返回對應的 echarts 對象，主要內容參考下面步驟

 

3.6、 `initChartMap` 函數主要內容如下

/**
 * 生成1000以內的隨機數
 */
function randomData() {
  return Math.round(Math.random() * 1000);
}


/**
 * 全國疫情分佈地圖
 */
function initChartMap(canvas, width, height) {
  let myMap = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(myMap);
  echarts.registerMap('china', geoJson);  // 繪製中國地圖

  const option = {
    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: `{b} :  {c}確診`
    },
    geo: [
      {
        // 地理座標系組件
        map: "china",
        roam: false, // 可以縮放和平移
        aspectScale: 0.8, // 比例
        layoutCenter: ["50%", "38%"], // position位置
        layoutSize: 370, // 地圖大小，保證了不超過 370x370 的區域
        label: {
          // 圖形上的文本標籤
          normal: {
            show: true,
            textStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              fontSize: '8'
            }
          },
          emphasis: { // 高亮時樣式
            color: "#333"
          }
        }
        itemStyle: {
          // 圖形上的地圖區域
          normal: {
            borderColor: "rgba(0,0,0,0.2)",
            areaColor: "#005dff"
          }
        }
      }
    ],
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 800,
      max: 50000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        type: 'map',
        mapType: 'china',
        geoIndex: 0,
        roam: false, // 鼠標是否可以縮放
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { name: '北京', value: randomData() },
          { name: '天津', value: randomData() },
          { name: '上海', value: randomData() },
          { name: '重慶', value: randomData() },
          { name: '河北', value: randomData() },
          { name: '河南', value: randomData() },
          { name: '雲南', value: randomData() },
          { name: '遼寧', value: randomData() },
          { name: '黑龍江', value: randomData() },
          { name: '湖南', value: randomData() },
          { name: '安徽', value: randomData() },
          { name: '山東', value: randomData() },
          { name: '新疆', value: randomData() },
          { name: '江蘇', value: randomData() },
          { name: '浙江', value: randomData() },
          { name: '江西', value: randomData() },
          { name: '湖北', value: randomData() },
          { name: '廣西', value: randomData() },
          { name: '甘肅', value: randomData() },
          { name: '山西', value: randomData() },
          { name: '內蒙古', value: randomData() },
          { name: '陝西', value: randomData() },
          { name: '吉林', value: randomData() },
          { name: '福建', value: randomData() },
          { name: '貴州', value: randomData() },
          { name: '廣東', value: randomData() },
          { name: '青海', value: randomData() },
          { name: '西藏', value: randomData() },
          { name: '四川', value: randomData() },
          { name: '寧夏', value: randomData() },
          { name: '海南', value: randomData() },
          { name: '臺灣', value: randomData() },
          { name: '香港', value: randomData() },
          { name: '澳門', value: randomData() }
        ]
      }]
  };

  myMap.setOption(option);
  return myMap
}

 

3.7、最終在小程序中呈現的圖形如下，可根據 Echarts 官網 修改圖形樣式

 

 

寫給自己的隨筆，有問題歡迎指出(*^▽^*)，源碼參考這裏