1 创建一个中国地图

  <div>
    <div id="china"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
//echart自适应配置，可以不用
import chartResize from '@/assets/js/chartResize'
//网上下载的china.js
import '@/assets/js/china'
export default {
  mixins: [chartResize],
  data () {
    return {
      chart: null,
      options: {}
    }
  },
  methods: {
    initChart () {
      const echartsDom = document.querySelector('#china')
      this.chart = echarts.init(echartsDom)
      this.chart.clear()
      this.options = { // 进行相关配置
        backgroundColor: '#051b4a',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        }
        ]
      }
      this.chart.setOption(this.options)
      this.chart.resize()
      window.onresize = () => {
        this.chart.resize()
      }
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>
<style lang="scss">
#china {
  width: 100%;
  height: 937px;
}
</style>

效果图如下

image.png

2 创建点位

<template>
  <div>
    <div id="china"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import chartResize from '@/assets/js/chartResize'
import '@/assets/js/china'
import { data, geoCoordMap } from '@/assets/js/data'
const convertData = require('@/assets/js/chinamap.json')
export default {
  mixins: [chartResize],
  data () {
    return {
      chart: null,
      options: {}
    }
  },
  methods: {
    initChart () {
      const echartsDom = document.querySelector('#china')
      this.chart = echarts.init(echartsDom)
      this.chart.clear()
      this.options = { // 进行相关配置
        backgroundColor: '#051b4a',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {

            name: '数量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(),
            symbolSize: function (val) {
              return val[2] / 100
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }
        ]
      }
      this.chart.setOption(this.options)
      this.chart.resize()
      window.onresize = () => {
        this.chart.resize()
      }
    },
    convertData () {
      const res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>
<style lang="scss">
#china {
  width: 100%;
  height: 937px;
}
</style>

data.js

//示例数据
const data = [
  { name: '上海', value: 2623 }
]

const geoCoordMap = {
  上海: [121.48, 31.22]
}

export { data, geoCoordMap }

image.png

连线

<template>
  <div>
    <div id="china"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import chartResize from '@/assets/js/chartResize'
import '@/assets/js/china'
import { data, geoCoordMap } from '@/assets/js/data'
const convertData = require('@/assets/js/chinamap.json')
export default {
  mixins: [chartResize],
  data () {
    return {
      chart: null,
      options: {},
      pointData: [
        {
          name: '上海',
          value: 22
        }
      ]
    }
  },
  methods: {
    initChart () {
      const echartsDom = document.querySelector('#china')
      this.chart = echarts.init(echartsDom)
      this.chart.clear()
      this.options = { // 进行相关配置
        backgroundColor: '#051b4a',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          // 地图点位
          {

            name: '数量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(),
            symbolSize: function (val) {
              return val[2] / 100
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          },
          // 地图连线动效
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 3 // 图标大小
            },
            lineStyle: {
              normal: {
                color: 'rgb(244, 110, 54)',
                width: 0.1, // 尾迹线条宽度
                opacity: 0.5, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            // 设置终点为上海
            data: this.convertToLineData([121.48, 31.22])
          }
        ]
      }
      this.chart.setOption(this.options)
      this.chart.resize()
      window.onresize = () => {
        this.chart.resize()
      }
    },
    // 点位信息对应
    convertData () {
      const res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    },
    // 线信息对应  gps终点坐标
    convertToLineData (gps) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        var fromCoord = geoCoordMap[dataItem.name]
        var toCoord = gps // 郑州
        //  var toCoord = geoGps[Math.random()*3];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem.value
          }, {
            coord: toCoord
          }])
        }
      }
      return res
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>
<style lang="scss">
#china {
  width: 100%;
  height: 937px;
}
</style>

image.png