通过echarts引入地图

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

地图生成器

datav.aliyun.com/portal/scho…

通过这个网址来生成想要区域的地图的JSON文件。

在echarts中引入

<template>
  <div class="chart"></div>
</template>

<script>
// http://datav.aliyun.com/portal/school/atlas/area_selector  地图生成器网址
import mapJson from './assets/jx.json'
import * as echarts from 'echarts'
export default {
  name: 'echarts',
  data () {
    return {
      mapColor: '',
      // !注意数据和json里面的数据一定要相匹配
      dataValue: [
        { name: '嘉善县', value: 8 },
        { name: '平湖市', value: 28 },
        { name: '秀洲区', value: 48 },
        { name: '南湖区', value: 68 },
        { name: '海盐县', value: 88 },
        { name: '桐乡市', value: 108 },
        { name: '海宁市', value: 128 }
      ]
    }
  },
  mounted () {
    this.echartsInit()
  },
  methods: {
    echartsInit () {
      // 这里填写json文件数据
      echarts.registerMap('jx', mapJson)

      echarts.init(this.$el).setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<ba/>{c}可调负荷'
        },
        title: {
          // text: "嘉兴市",
          x: 'center'
        },
        geo: {
          map: 'jx',
          label: {},
          roam: true,
          itemStyle: {}
        },
        visualMap: {
          min: 0,
          max: 108,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#326343', '#b06b64']
          }
        },
        series: [
          {
            // !显示字体修改这两个地方
            type: 'map',
            map: 'jx',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            symbolSize: function (val, params) {
              return 8
            },
            data: this.dataValue,
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: { color: '#fff' } // 省份标签字体颜色
              },
              emphasis: {
                // 对应的鼠标悬浮效果
                show: true,
                textStyle: { color: '#800080' }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#009fe8', // 区域边框颜色
                // areaColor: 'red' // 区域颜色
                areaColor: this.mapColor // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#4b0082',
                areaColor: '#f47920'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  height: 500px;
  width: 100%;
}
</style>

效果图：

线上地址：general-background-vue2 (gitee.io)

当地图数据需要改动时

这个时业务需要的嘉兴市地图：

但是无论是百度还是高德地图都没有滨海新区这个地方，也就是说需要我们手动的去修改JSON文件里面的地图数据，但是，一个json文件动辄上万行，手动去改是行不通的。

我们可以借助另一个网站： geojson.io | powered by Mapbox 来快速修改地图JSON文件。

1. Open 可以将要修改的JSON文件导入。
2. Save 可以将修改过的JSON文件导出。
3. 右边的工具框可以在地图上通过可视化的方式来修改JSON文件。