Vue中使用echart实现中国地图统计图

前言

在Vue2.x开发中，为了更好地展示某一个时间段，在全国范围内的吸粉数据。elementUI的日期选择器就不做过多的讲解，主要是讲解Echart中国统计图的实现。我们想实现的中国地图统计图的效果为：

Echart版本的确定

【注意】：echart的5.0.2版本不支持china.js文件了，所以我们要确定那些版本里有china.js以及china.json文件。

经过更换Echart版本发现，“echarts”: “^4.8.0” 的依赖中中有map文件夹，
4.8.0版本

4.8.0版本的Echart的样式和颜色都很丑，所以我们只需要将map文件夹拿出来，按需引入到5.0.2版本中

其实我们这里只需要china.json 文件

全局导入或按需导入

方便起见，我们直接在main.js文件中全局导入

import * as echarts from 'echarts' // 全部导入
// 引入中国地图json文件
import china from './libs/china.json'
// 挂载echart
Vue.prototype.$echarts = echarts
// 统计图注册中国地图
echarts.registerMap('china', china) 

注意这个地方要用到echart的registerMap方法，这个地方我没有能够实现按需导入【未解决】
这里有一个文档是关于按需引入的，并且讲解了Vue-echarts的使用方法。我按照此文档来按需导入，echart老是报警告

估计是中国统计图跟折线/柱状统计图等是不一样的

在对应的页面调用echart

1）第一种效果

Dom部分：

// 给 div绑定一个特定的id，此div一定要定宽高，才会显示出来
// 下述的方法将此div更改为canvas了
<div id="mapChart"></div>

绘图方法：

  // 绘制中国地图
    canvasMap() {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      var myChartContainer = document.getElementById('mapChart')
      var resizeMyChartContainer = function() {
        myChartContainer.style.width =
          document.body.offsetWidth / 2 - 100 + 'px' //页面一半的大小
      }
      resizeMyChartContainer()
      var myChartChina1 = that.$echarts.init(myChartContainer)

      function randomData() {
        return Math.round(Math.random() * 500)
      }
      // 绘制图表
      var optionMap = {
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['']
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: '10%',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          color: ['#158BFE', '#ffffff']
        },
        selectedMode: 'single',
        series: [
          {
            name: '',
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            showLegendSymbol: true,
            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() }
            ]
          }
        ]
      }

      myChartChina1.setOption(optionMap)
      window.onresize = function() {
        resizeMyChartContainer()
        myChartChina1.resize()
      }
    }

2）第二种效果

更改一下上面的那个canvasMap方法：

// 绘制中国地图
canvasMap() {
  let that = this
  // 基于准备好的dom，初始化echarts实例
  var myChartContainer = document.getElementById('mapChart')
  var resizeMyChartContainer = function() {
    myChartContainer.style.width =
      document.body.offsetWidth / 2 - 100 + 'px' //页面一半的大小
  }
  resizeMyChartContainer()
  var myChartChina1 = that.$echarts.init(myChartContainer)

  function randomData() {
    return Math.round(Math.random() * 500)
  }
  // 绘制图表
  var optionMap = {
    tooltip: {},
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['']
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: '10%',
      top: 'bottom',
      /*          text: ['高', '低'],
      calculable: true,
      color: ['#158BFE', '#ffffff'], */
      splitList: [
        { start: 1500, color: '#4682B4' },
        { start: 900, end: 1500, color: 'lightskyblue' },
        { start: 300, end: 1000, color: '#FF7F50' },
        { start: 200, end: 300, color: '  #FF4500' },
        {
          start: 50,
          end: 200,
          color: 'lightcoral',
          label: '10 到 200（想念暴雨）'
        },
        { start: 0, end: 50, label: '<50 干巴巴', color: 'darkred' }
      ]
    },
    selectedMode: 'single',
    series: [
      {
        name: '',
        type: 'map',
        mapType: 'china',
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          emphasis: {
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        showLegendSymbol: true,
        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() }
        ]
      }
    ]
  }

  myChartChina1.setOption(optionMap)
  window.onresize = function() {
    resizeMyChartContainer()
    myChartChina1.resize()
  }
},

【注意】绑定id为mapChart的div一定要定宽高，再三强调，因为canvas必须有固定宽高才会显示出来，vw/vh/rem/px都可以，而不是百分比%

前后端数据交互注意事项

一个简单的表格是这么创建的：

可能会出现后端返回的数据，跟china.json数据里的name不一样，中国地图是按照name字符串来查找各个省份的数据的
china.json文件要求是这种格式的

而后端返回的是

很明显name字符串不一致，那么就需要更改china.json文件中的name值

如，将下面的原本的湖北改为后端返给我的湖北省
在这里插入图片描述

可以发现中国地图有一部分已经渲染好了，那就说明是china.json文件中的name属性值必须要跟后端返给我们的name属性值保持一致

完结散花…