vue实现echarts地图展示省份数据

想实现的功能

想要统计各个省份下单的量，在省份地图中显示出来

实现效果

地图的安装

我都是使用cnpm安装ECharts

cnpm install echarts --save

引入模块

引入echarts核心

import * as echarts from 'echarts/core'

echarts的新版采用了模块化的方式加载title，visualMap，tooltip等都需要单独的引入组件，否则就显示不了，单独引入组件并使用

import { GeoComponent, TooltipComponent, VisualMapComponent, TitleComponent } from 'echarts/components'

import { MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([GeoComponent, MapChart, CanvasRenderer, TooltipComponent, VisualMapComponent, TitleComponent])

引入地图省份的数据源

我采用的是一个线上的地图数据，使用数据源地址：http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5，我在后端请求对应省份的数据，从接口返回给前端对于返回的数据，需要registerMap：

echarts.registerMap('china', result.data)

配置项说明

具体代码

```javascript
<template>
  <div class="dashboard-container">
    <div ref="chart" class="dashboard-chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GeoComponent, TooltipComponent, VisualMapComponent, TitleComponent } from 'echarts/components'

import { MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([GeoComponent, MapChart, CanvasRenderer, TooltipComponent, VisualMapComponent, TitleComponent])

import { mapGetters } from 'vuex'
import { fetchChinaMapJson } from '@/api/chinaMap'

export default {
  name: 'InternalSealsAddressMap',
  data() {
    return {
      barOption: {
        title: {
          show: true,
          text: '导入数量统计',
          z: 10
        },
        roam: true,
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => {
            return `${params.name}<br />总订单 ${params.value || 0}单`
          }
        },
        visualMap: {
          min: 0,
          max: 2000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'blue']
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            // label 在省份上显示的文本
            label: {
              show: false,
              color: 'Maroon',
              position: 'top',
              formatter: (params) => {
                return `${params.name} ${params.value || 0}`
              }
            },
            data: [{
              name: '北京市',
              value: '1002'
            }, {
              name: '四川省',
              value: 520
            }, {
              name: '广东省',
              value: 2502
            }, {
              name: '重庆市',
              value: 890
            }]
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {},
  mounted() {
    // 选取dom元素
    const chartDom = this.$refs.chart
    const myChart = echarts.init(chartDom)
    // 添加loading加载
    myChart.showLoading()
    fetchChinaMapJson({
      id: 100000
    }).then(result => {
      myChart.hideLoading()
      echarts.registerMap('china', result.data)
      myChart.setOption(this.barOption)
    }).catch(err => {
      console.log(err)
    })
    // 在容器大小发生改变时改变图表尺寸
    window.onresize = function() {
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    width: 100%;
    height: 100%;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  &-chart {
    height: calc(100vh - 60px);
    width: 100%;
  }
}
</style>

其他配置参考

如此一来，就可以把地图渲染出来了，至于其他的业务需求需要用的参数，还是需要去echarts官网看文档，对应去配置。