如何在微信小程序中使用echarts绘制地图（微信小程序制作疫情数据地图）

2023年2月18日 364次阅读 来源: 不解清风

《如何在微信小程序中使用echarts绘制地图（微信小程序制作疫情数据地图）》

如上图所示的地图怎么样去制作呢？我们现在开始

放到我们的程序目录下 并将  mapData.js也放到文件目录中。

《如何在微信小程序中使用echarts绘制地图（微信小程序制作疫情数据地图）》

放好之后呢我们需要把ec-canvas引入到我们的页面 index/index.json

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

接下来wxml页面里写入组件

 <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{
  { ec }}"></ec-canvas>

然后我们来看对应的js改如何去写，引入必要的echarts 和 对应的geoJson 数据

// index.js
import * as echarts from '../../ec-canvas/echarts';
import geoJson from './mapData.js';

在data里创建ec 变量 

 data: {
    ec: {}
  },

写入地图方法

// 加载全国疫情地图
  initChart: function () {
    this.oneComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      echarts.registerMap('china', geoJson);

      const option = {
        tooltip: {
          show: false,
          trigger: 'item'
        },

        visualMap: {
          show: true,
          type: "piecewise",
          left: 10,
          bottom: "0",
          align: "left",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 10
          },
          pieces: [
            { min: 1000, label: '1000人以上', color: '#ED514E' },
            { min: 100, max: 999, label: '100-999人', color: '#FF8F66' },
            { min: 10, max: 99, label: '10-99人', color: '#FFB769' },
            { min: 1, max: 9, label: '1-9人', color: '#FFE6BD' }
          ]
        },
        series: [{
          type: 'map',
          mapType: 'china',
          label: {
            show: true,
            fontSize: 8
          },
          itemStyle: {
            normal: {
              borderColor: '#eaeaea',
              areaColor: '#fff',
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
          animation: false,
          data: this.data.data
        }]
      };
      chart.setOption(option);

      return chart;
    });
  },

获取数据方法 这里我封装了请求

//加载数据
  loadData: function () {
    var vm = this
    wx.$api.getOnsInfo().then(res => {
      const data = JSON.parse(res.data);
      console.log(data)
      const areaTree = data['areaTree']
      const china = areaTree[0]
      const provinces = china['children']
      const provincesData = provinces.map(item => {
        return {
          name: item.name,
          value: item.total.confirm
        }
      })
      const detail = provinces.map(item => {
        return {
          area: item.name,
          ...item.total
        }
      })
      vm.setData({ data: provincesData, tableData: detail, })
      vm.initChart()
    })
  },

接口地址：

 getOnsInfo() { return request.get("https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&t=" + Date.now()); }

希望对大家有所帮助吧

    原文作者：不解清风
    原文地址: https://blog.csdn.net/qq_43438095/article/details/114010968
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞