在Vue项目中使用echarts完成迁徙图（Map组件）

最新推荐文章于 2024-05-23 10:10:00 发布

张海智_

最新推荐文章于 2024-05-23 10:10:00 发布

阅读量2.2k

点赞数 2

分类专栏： Vue 文章标签： html5 echarts vue.js es6 chrome

本文链接：https://blog.csdn.net/m0_49304996/article/details/118702290

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue项目中使用echarts完成迁徙图

此章个人理解：参考原有的代码基础上，完成了一个地图迁徙的组件先了解一下整体代码，有能力的可以参照整体完成，下面也会列出详细步骤解答

代码我放在了github代码地址

前言

以下封装了组件作为在地图中国使用只需传入以下格式的数据即可，也可以设置重点位置

[
    { 'name': '北京', 'value': 6 },
    { 'name': '湖南', 'value': 3 }, 
    { 'name': '广东', 'value': 2 }, 
    { 'name': '山西', 'value': 2 }, 
    { 'name': '上海', 'value': 1 }, 
    { 'name': '重庆', 'value': 1 },
    { 'name': '河北', 'value': 1 }, 
    { 'name': '陕西', 'value': 1 },
    { 'name': '山东', 'value': 0 }, 
    { 'name': '黑龙江', 'value': 0 }, 
    { 'name': '贵州', 'value': 0 }
]

效果：
在这里插入图片描述

整体代码

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

</template>

<script>
// 城市坐标文件
import City from '@/utils/City'
import '@/utils/china'
export default {
  props: {
    provinces: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  watch: {
    provinces: {
      handler() {
        this.getMap()
      },
      deep: true
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    // 地图
    getMap() {
      // 地图的坐标信息
      var geoCoordMap = City
      // const a = [{ 'name': '北京', 'value': 6 }, { 'name': '湖南', 'value': 3 }, { 'name': '广东', 'value': 2 }, { 'name': '山西', 'value': 2 }, { 'name': '上海', 'value': 1 }, { 'name': '重庆', 'value': 1 }, { 'name': '河北', 'value': 1 }, { 'name': '陕西', 'value': 1 }, { 'name': '山东', 'value': 0 }, { 'name': '黑龙江', 'value': 0 }, { 'name': '贵州', 'value': 0 }]
      // 数据信息
      var BJData = this.provinces.filter(item => item.value > 0).map(item => {
        return [{
          name: '北京'
        },
        {
          name: item.name,
          value: item.value
        }]
      })

      // var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'
      var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
      var convertData = function(data) {
        // data BJData
        var res = []
        for (var i = 0; i < data.length; i++) {
          // BJData
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name] // 北京
          var toCoord = geoCoordMap[dataItem[1].name] // 成都
          if (fromCoord && toCoord) {
            res.push([{
              coord: toCoord,
              value: dataItem[1].value
            }, {
              coord: fromCoord
            }])
          }
        }
        return res
      }
      var series = [];
      [
        ['北京', BJData]
      ].forEach(function(item) {
        series.push({
          // 设置飞机后的烟雾
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: 'white',
            symbolSize: 3,
            symbol: planePath
          },
          // 线宽
          lineStyle: {
            normal: {
              color: '#fff',
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(item[1]) // 坐标
        }, {
          name: '飞速入学中',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: function(params) {
                if (params.value > 0 && params.value <= 1) {
                  return '#ffe566'
                } else if (params.value === 2) {
                  return '#74ebd5'
                } else if (params.value > 2 && params.value < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              },
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: convertData(item[1])
        }, {
          // 设置圆圈属性的
          name: item[0] + '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // 鼠标移入显示的东西
          tooltip: {

            showDelay: 0,

            formatter: function(params) {
              return `
${params.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>报道人数:
        <span">${params.value[2]}人</span>`
            },

            axisPointer: {

              show: true,

              type: 'cross',

              lineStyle: {

                type: 'dashed',

                width: 1

              }

            }

          },
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          // 设置圆圈大小
          symbolSize: function(val) {
            // val的值是data的值
            return 10
          },
          itemStyle: {
            normal: {
              color: function(params) {
                if (params.value[2] > 0 && params.value[2] <= 1) {
                  return '#ffe566'
                } else if (params.value[2] === 2) {
                  return '#74ebd5'
                } else if (params.value[2] > 2 && params.value[2] < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              }
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            }
          })
        })
      })

      const option = {
        // 设置为半透明
        backgroundColor: 'transparent',
        title: {
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        // 设置地图默认大小
        geo: {
          zoom: 1.2,
          map: 'china',
          label: {
            normal: {
              show: false,
              color: '#fff'
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              // 设置区域颜色
              areaColor: 'rgba(237,242,244,0.06)',
              // 设置边框颜色
              borderColor: '#10beae'
            },
            emphasis: {
              // 设置鼠标悬停时候的样式
              areaColor: '#c6c2c2'
            }
          }
        },

        visualMap: { // 颜色的设置  dataRange
          textStyle: { color: '#fff' },
          x: 'right',
          y: '380',
          splitList: [
            { start: 30 }, { start: 20, end: 30 },
            { start: 10, end: 20 }, { start: 0, end: 10 }
          ],
          // text:['高','低'],// 文本，默认为数值文本
          // color: ['#65A2D9', '#E09107', '#A3E00B']
          color: ['#f26419', '#5bc0eb', '#74ebd5', '#ffe566']
        },
        series: series
      }
      this.$echarts.init(document.querySelector('.map')).setOption(option)
    }
  }
}
</script>

<style scoped>

.map{
  width: 723px;
  height: 498px;
  margin-top: 26px;
}
</style>

1. 下载ECharts

yarn add  echarts --save 
npm i  echarts --save

2. 引入Echarts

// 引入ECharts
import * as echarts from 'echarts'
// 挂载到Vue原形上
Vue.prototype.$echarts = echarts

3. 引入China.js地图文件

地图文件必不可少我都放在了github的untils中了（由于地图代码文件太多臃肿）

import '@/utils/China.js'

4.引入坐标系数组

图中要使用各个省市的坐标系，一次性使用代码臃肿，采用文件导入方式

City.js

export default {
  阿克苏地区: [80.260604, 41.168779],
  和田地区: [79.922211, 37.114157],
  上海: [121.480237, 31.236305],
  东莞: [113.758231, 23.026997],
  东营: [118.588614, 37.454925],
  中山: [113.399023, 22.522262],
  临汾: [111.526153, 36.094052],
  临沂: [118.36299, 35.110531],
  丹东: [124.362564, 40.00569],
  丽水: [119.929503, 28.472979],
  乌鲁木齐: [87.623314, 43.832806],
  佛山: [113.128432, 23.027707],
  保定: [115.471052, 38.880055],
  兰州: [103.840692, 36.067312],
  包头: [109.846755, 40.663636],
  北京: [116.413554, 39.911013],
  北海: [109.126614, 21.486955],
  南京: [118.802891, 32.064735],
  南宁: [108.373351, 22.823037],
  南昌: [115.864528, 28.687675],
  南通: [120.900301, 31.985237],
  厦门: [118.095915, 24.485821],
  台州: [121.426996, 28.662297],
  合肥: [117.235447, 31.82687],
  呼和浩特: [111.758518, 40.847461],
  咸阳: [108.715712, 34.335599],
  哈尔滨: [126.542417, 45.807782],
  唐山: [118.187036, 39.636673],
  嘉兴: [120.762045, 30.750912],
  大同: [113.306446, 40.082539],
  大连: [121.621391, 38.919345],
  天津: [117.205914, 39.090908],
  太原: [112.55706, 37.876885],
  威海: [122.128245, 37.519322],
  宁波: [121.556686, 29.880177],
  宝鸡: [107.243899, 34.367747],
  宿迁: [118.282062, 33.967686],
  常州: [119.980142, 31.816791],
  广州: [113.270793, 23.135308],
  廊坊: [116.69034, 39.54352],
  延安: [109.496361, 36.591003],
  张家口: [114.894165, 40.830172],
  徐州: [117.29235, 34.210143],
  德州: [116.365825, 37.441313],
  惠州: [114.423348, 23.116409],
  成都: [104.071216, 30.576279],
  扬州: [119.419107, 32.39986],
  承德: [117.969798, 40.957855],
  拉萨: [91.121025, 29.650088],
  无锡: [120.318954, 31.496704],
  日照: [119.533606, 35.422798],
  昆明: [102.839667, 24.885953],
  杭州: [120.161693, 30.280059],
  枣庄: [117.328513, 34.816569],
  柳州: [109.42198, 24.331519],
  株洲: [113.140431, 27.833737],
  武汉: [114.311831, 30.598428],
  汕头: [116.688739, 23.359289],
  江门: [113.088165, 22.584459],
  沈阳: [123.438973, 41.811339],
  沧州: [116.845272, 38.31022],
  河源: [114.707097, 23.749829],
  泉州: [118.682316, 24.880242],
  泰安: [117.094893, 36.205905],
  泰州: [119.932115, 32.4612],
  济南: [117.001319, 36.671627],
  济宁: [116.593852, 35.420269],
  海口: [110.206424, 20.050057],
  淄博: [118.061254, 36.819182],
  淮安: [119.022429, 33.616272],
  深圳: [114.066112, 22.548515],
  清远: [113.062619, 23.688238],
  温州: [120.705869, 28.001095],
  渭南: [109.516739, 34.505687],
  湖州: [120.094566, 30.899015],
  湘潭: [112.950575, 27.83585],
  滨州: [117.9792, 37.388387],
  潍坊: [119.168138, 36.713212],
  烟台: [121.454425, 37.469868],
  玉溪: [102.5537, 24.357512],
  珠海: [113.583235, 22.276392],
  盐城: [120.168187, 33.355301],
  盘锦: [122.077269, 41.125939],
  石家庄: [114.520828, 38.048684],
  福州: [119.302938, 26.080447],
  秦皇岛: [119.606184, 39.941259],
  绍兴: [120.586673, 30.036519],
  聊城: [115.992077, 36.462681],
  肇庆: [112.47177, 23.052984],
  舟山: [122.214339, 29.991092],
  苏州: [120.589613, 31.304566],
  莱芜: [117.683221, 36.219357],
  菏泽: [115.487696, 35.239435],
  营口: [122.241475, 40.672565],
  葫芦岛: [120.843388, 40.717364],
  衡水: [115.676942, 37.745166],
  衢州: [118.880768, 28.941661],
  西宁: [101.784269, 36.623477],
  西安: [108.946306, 34.347436],
  贵阳: [106.636816, 26.652747],
  连云港: [119.229571, 34.602342],
  邢台: [114.510889, 37.076646],
  邯郸: [114.545808, 36.631222],
  郑州: [113.631349, 34.753488],
  鄂尔多斯: [109.787314, 39.61463],
  重庆: [106.557165, 29.570997],
  金华: [119.654027, 29.084455],
  铜川: [108.951558, 34.902957],
  银川: [106.238976, 38.492392],
  镇江: [119.431494, 32.195688],
  长春: [125.33017, 43.82178],
  长沙: [112.945333, 28.233971],
  长治: [113.123046, 36.201585],
  阳泉: [113.587087, 37.86234],
  青岛: [120.389445, 36.072358],
  韶关: [113.603757, 24.816174],
  九江: [116.007993, 29.711328],
  大庆: [125.109727, 46.593216],
  宁德: [119.554701, 26.671748],
  忻州: [112.740804, 38.422382],
  石嘴山: [106.39078, 38.989783],
  池州: [117.497839, 30.67098],
  淮南: [117.006189, 32.631837],
  吐鲁番地区: [89.196029, 42.957303],
  宜昌: [111.292971, 30.697602],
  景德镇: [117.184967, 29.274337],
  安庆: [117.070127, 30.548594],
  怒江傈僳族自治州: [98.863189, 25.823736],
  白城: [122.845302, 45.6254],
  萍乡: [113.86077, 27.62897],
  抚州: [116.364627, 27.953603],
  朝阳: [120.457301, 41.579487],
  海东: [102.003965, 36.406412],
  湘西土家族苗族自治州: [109.745507, 28.317399],
  鹰潭: [117.075765, 28.265879],
  阿拉善盟: [105.735357, 38.857806],
  大阪府: [0, 0],
  鹤岗: [130.304284, 47.356043],
  吴忠: [106.205161, 38.003863],
  石河子: [86.085507, 44.312423],
  开封: [114.313904, 34.802941],
  延边朝鲜族自治州: [129.515602, 42.897211],
  白银: [104.144182, 36.550821],
  吕梁: [111.148086, 37.525476],
  随州: [113.389071, 31.696341],
  雅安: [103.04636, 30.021277],
  平顶山: [113.198935, 33.772051],
  阜新: [121.676518, 42.027983],
  普洱: [100.98114, 22.788486],
  三亚: [109.518646, 18.258217],
  赣州: [114.94126, 25.837179],
  广元: [105.849993, 32.441808],
  锦州: [121.133631, 41.100869],
  南充: [106.117231, 30.843297],
  衡阳: [112.578397, 26.899517],
  齐齐哈尔: [123.924531, 47.360087],
  兴安盟: [122.044544, 46.088444],
  乌海: [106.80185, 39.660154],
  楚雄彝族自治州: [101.534082, 25.051226],
  伊春: [128.84704, 47.733329],
  陇南: [104.928233, 33.406825],
  荆门: [112.205843, 31.041792],
  辽源: [125.150107, 42.8943],
  怀化: [110.008116, 27.575595],
  牡丹江: [129.638976, 44.558647],
  黄南藏族自治州: [102.021495, 35.526125],
  湛江: [110.365494, 21.277163],
  天水: [105.731276, 34.587162],
  黔东南苗族侗族自治州: [107.990602, 26.589858],
  云浮: [112.051045, 22.921154],
  安康: [109.03592, 32.690575],
  日喀则地区: [88.956063, 29.26816],
  海北藏族自治州: [100.907395, 36.960702],
  海西蒙古族藏族自治州: [97.377823, 37.382839],
  吉安: [115.00027, 27.119751],
  黄石: [115.045433, 30.205336],
  宿州: [116.970454, 33.652034],
  茂名: [110.931773, 21.669051],
  阳江: [111.989051, 21.864421],
  信阳: [114.099264, 32.153186],
  三门峡: [111.206832, 34.778442],
  咸宁: [114.328967, 29.847123],
  许昌: [113.858804, 34.041737],
  保山: [99.168373, 25.117882],
  鹤壁: [114.304044, 35.752656],
  运城: [111.013379, 35.032587],
  达州: [107.474504, 31.214347],
  常德: [111.704994, 29.037723],
  酒泉: [98.500427, 39.738615],
  马鞍山: [118.512691, 31.67633],
  南阳: [112.535009, 32.996701],
  邵阳: [111.474133, 27.245167],
  黔南布依族苗族自治州: [107.528663, 26.260586],
  孝感: [113.922962, 30.930712],
  安顺: [105.952622, 26.259904],
  辽阳: [123.243726, 41.274452],
  黔西南布依族苗族自治州: [104.910858, 25.095974],
  克拉玛依: [84.89587, 45.585765],
  庆阳: [107.649305, 35.716096],
  呼伦贝尔: [119.77221, 49.217977],
  六盘水: [104.836786, 26.599086],
  新余: [114.923664, 27.823541],
  七台河: [131.009618, 45.776512],
  商丘: [115.662798, 34.420378],
  漯河: [114.02323, 33.587703],
  乌兰察布: [113.140223, 40.999972],
  潜江: [112.905773, 30.407633],
  定西: [104.631662, 35.587354],
  鸡西: [130.976161, 45.300906],
  汕尾: [115.381693, 22.791322],
  四平: [124.356844, 43.172447],
  西双版纳傣族自治州: [100.803836, 22.013792],
  遂宁: [105.599152, 30.539156],
  商洛: [109.94688, 33.876525],
  海南藏族自治州: [100.626831, 36.292132],
  文山壮族苗族自治州: [104.221606, 23.404187],
  六安: [116.529651, 31.741226],
  张家界: [110.484925, 29.122477],
  潮州: [116.62943, 23.662923],
  蚌埠: [117.395835, 32.921498],
  桂林: [110.296442, 25.279893],
  甘南藏族自治州: [102.917605, 34.98901],
  驻马店: [114.029465, 33.017546],
  林芝地区: [94.368109, 29.654792],
  百色: [106.624969, 23.907845],
  鞍山: [123.000974, 41.114122],
  郴州: [113.021311, 25.776711],
  巴中: [106.753912, 31.872851],
  恩施土家族苗族自治州: [109.494763, 30.277908],
  十堰: [110.80454, 32.635042],
  临沧: [100.10566, 23.914336],
  泸州: [105.449092, 28.877577],
  平凉: [106.671741, 35.549266],
  宣城: [118.765196, 30.946576],
  绵阳: [104.686164, 31.473364],
  佳木斯: [130.32696, 46.806581],
  遵义: [106.933658, 27.731749],
  钦州: [108.66089, 21.985392],
  玉树藏族自治州: [97.01308, 33.011061],
  本溪: [123.773468, 41.299847],
  朔州: [112.438184, 39.33789],
  毕节: [105.333323, 27.408562],
  张掖: [100.456221, 38.932187],
  南平: [118.1843, 26.647662],
  濮阳: [115.035917, 35.767586],
  宜宾: [104.648103, 28.75761],
  铜仁: [109.168558, 27.674903],
  松原: [124.831633, 45.147201],
  漳州: [117.653827, 24.519197],
  梧州: [111.285647, 23.482873],
  洛阳: [112.460033, 34.624376],
  龙岩: [117.023668, 25.081257],
  莆田: [119.014232, 25.45996],
  济源: [112.609314, 35.072867],
  哈密地区: [93.522785, 42.824642],
  昭通: [103.723311, 27.344057],
  大理白族自治州: [100.274223, 25.612206],
  昌吉回族自治州: [87.314822, 44.016923],
  迪庆藏族自治州: [99.70948, 27.825264],
  黑河: [127.535014, 50.251193],
  吉林: [126.556073, 43.843512],
  广安: [106.639772, 30.461708],
  黄山: [118.174807, 30.133213],
  德阳: [104.404319, 31.133105],
  河池: [108.091898, 24.698828],
  益阳: [112.361677, 28.559818],
  通化: [125.946506, 41.733906],
  永州: [111.618703, 26.426612],
  周口: [114.703433, 33.631958],
  梅州: [116.129179, 24.294311],
  锡林郭勒盟: [116.054141, 43.939525],
  固原: [106.24917, 36.021609],
  滁州: [118.323252, 32.308165],
  荆州: [112.24722, 30.340606],
  芜湖: [118.439561, 31.358798],
  襄阳: [112.250093, 32.229169],
  吉隆坡: [0, 0],
  榆林: [109.741195, 38.290886],
  果洛藏族自治州: [100.251341, 34.477207],
  玉林: [110.18743, 22.660656],
  临夏回族自治州: [103.217303, 35.607475],
  鄂州: [114.901557, 30.396522],
  晋中: [112.759375, 37.692757],
  巴音郭楞蒙古自治州: [86.151584, 41.770226],
  澳门: [113.549403, 22.192961],
  内江: [105.065028, 29.585836],
  揭阳: [116.37922, 23.555773],
  通辽: [122.251207, 43.658363],
  阜阳: [115.821389, 32.895879],
  中卫: [105.203332, 37.506058],
  铜陵: [117.818795, 30.950899],
  红河哈尼族彝族自治州: [103.38215, 23.369914],
  曲靖: [103.802685, 25.496328],
  香港: [114.171994, 22.281089],
  汉中: [107.030197, 33.07382],
  乐山: [103.77193, 29.558141],
  新乡: [113.933349, 35.308973],
  晋城: [112.857706, 35.496081],
  巴彦淖尔: [107.394129, 40.749427],
  武威: [102.644524, 37.934078],
  岳阳: [113.135679, 29.363262],
  赤峰: [118.895463, 42.264586],
  白山: [126.431052, 41.94643],
  攀枝花: [101.725262, 26.588109],
  黄冈: [114.878872, 30.459422],
  绥化: [126.975678, 46.658789],
  双鸭山: [131.165442, 46.652966],
  凉山彝族自治州: [102.273965, 27.887685],
  伊犁哈萨克自治州: [81.330697, 43.922815],
  德宏傣族景颇族自治州: [98.591419, 24.438031],
  安阳: [114.3996, 36.103649],
  三明: [117.645742, 26.269683],
  宜春: [114.422683, 27.820089],
  上饶: [117.950028, 28.460864],
  自贡: [104.784891, 29.345379],
  娄底: [112.001082, 27.703196],
  丽江: [100.23357, 26.862521],
  防城港: [108.361138, 21.693439],
  淮北: [116.804878, 33.96064],
  儋州: [109.587145, 19.527081],
  怒江州: [98.863189, 25.823736],
  焦作: [113.248557, 35.221493],
  铁岭: [123.848797, 42.292573],
  抚顺: [123.963595, 41.886078],
  巢湖: [117.88049, 31.608733],
  西双版纳: [100.803836, 22.013792],
  德宏州: [98.591419, 24.438031],
  恩施: [109.485727, 30.30089],
  湘西州: [109.745507, 28.317399],
  西昌: [102.269526, 27.900601],
  阿坝州: [102.231186, 31.905609],
  黔南州: [107.528663, 26.260586],
  黔东南州: [107.990602, 26.589858],
  黔西南州: [104.910858, 25.095974],
  大理州: [100.274223, 25.612206],
  红河州: [103.38215, 23.369914],
  文山州: [104.221606, 23.404187],
  楚雄州: [101.534082, 25.051226],
  迪庆州: [99.70948, 27.825264],
  山南地区: [91.779601, 29.24309],
  那曲地区: [92.0578, 31.482375],
  博尔塔拉蒙古自治州: [82.073064, 44.912168],
  临夏州: [103.217303, 35.607475],
  甘南州: [102.917605, 34.98901],
  格尔木: [94.909745, 36.408588],
  奎屯: [84.90832, 44.432645],
  亳州: [115.7786, 33.8445],
  崇左: [107.3647, 22.3765],
  定安县: [110.3588, 19.6814],
  东方: [108.6518, 19.0953],
  贵港: [109.5989, 23.1115],
  贺州: [111.5666, 24.4035],
  嘉峪关: [98.2891, 39.7731],
  金昌: [102.1880, 38.5200],
  来宾: [109.2214, 23.7503],
  乐东黎族自治县: [109.1730, 18.7502],
  陵水黎族自治县: [110.0375, 18.5060],
  眉山: [103.8485, 30.0754],
  琼海: [110.4921, 19.2396],
  台湾: [120.9605, 23.6978],
  天门: [113.3169, 30.8657],
  屯昌县: [110.1034, 19.3517],
  万宁: [110.3816, 18.8078],
  文昌: [113.8259, 25.8228],
  五指山: [109.5169, 18.7751],
  仙桃: [113.4234, 30.3608],
  资阳: [104.6520, 30.1246],
  安徽: [117.17, 31.52],
  福建: [119.18, 26.05],
  甘肃: [103.51, 36.04],
  广东: [113.14, 23.08],
  广西: [108.19, 22.48],
  贵州: [106.42, 26.35],
  海南: [110.20, 20.02],
  河北: [114.30, 38.02],
  河南: [113.40, 34.46],
  黑龙江: [126.36, 45.44],
  湖北: [114.17, 30.35],
  湖南: [112.59, 28.12],
  江苏: [118.46, 32.03],
  江西: [115.55, 28.40],
  辽宁: [123.25, 41.48],
  内蒙古: [111.41, 40.48],
  宁夏: [106.16, 38.27],
  青海: [101.48, 36.38],
  山东: [117.00, 36.40],
  山西: [112.33, 37.54],
  陕西: [108.57, 34.17],
  四川: [104.04, 30.40],
  西藏: [91.08, 29.39],
  新疆: [87.36, 43.45],
  云南: [102.42, 25.04],
  浙江: [120.10, 30.16]
}

引入到组件

import City from '@/utils/City'

5. 准备容器

地图的位置大小，可以用div来衡量一下，后期可以配置缩放配置地图大小

<div class="map" />
<!--   css 代码如下  根据需求配置
.map{
  width: 723px;
  height: 498px;
  margin-top: 26px;
}
-->

6. 准备props接受父组件传过来的数据

为了方便操作，我直接用的name和value格式的对象，如果数据不是可用map数组方法和filter完成处理即可

json格式的数据

[
    { 'name': '北京', 'value': 6 },
    { 'name': '湖南', 'value': 3 }, 
    { 'name': '广东', 'value': 2 }, 
    { 'name': '山西', 'value': 2 }, 
    { 'name': '上海', 'value': 1 }, 
    { 'name': '重庆', 'value': 1 },
    { 'name': '河北', 'value': 1 }, 
    { 'name': '陕西', 'value': 1 },
    { 'name': '山东', 'value': 0 }, 
    { 'name': '黑龙江', 'value': 0 }, 
    { 'name': '贵州', 'value': 0 }
]

props

export default {
    props: {
      // 父组件传过来的值
      provinces: {
        type: Array,
        default() {
          return {}
        }
      }
    }
}

7. 在methods定义方法把地图挂载到DOM

export default {
   methods: {
    // 地图
    getMap() {
      // 地图的坐标信息
      var geoCoordMap = City
      // 数据信息
      var BJData = this.provinces.filter(item => item.value > 0).map(item => {
        return [{
          name: '北京'
        },
        {
          name: item.name,
          value: item.value
        }]
      })
      // var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'
      var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
      var convertData = function(data) {
        // data BJData
        var res = []
        for (var i = 0; i < data.length; i++) {
          // BJData
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name] // 北京
          var toCoord = geoCoordMap[dataItem[1].name] // 成都
          if (fromCoord && toCoord) {
            res.push([{
              coord: toCoord,
              value: dataItem[1].value
            }, {
              coord: fromCoord
            }])
          }
        }
        return res
      }
      var series = [];
      [
        ['北京', BJData]
      ].forEach(function(item) {
        series.push({
          // 设置飞机后的烟雾
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: 'white',
            symbolSize: 3,
            symbol: planePath
          },
          // 线宽
          lineStyle: {
            normal: {
              color: '#fff',
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(item[1]) // 坐标
        }, {
          name: '飞速入学中',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: function(params) {
                if (params.value > 0 && params.value <= 1) {
                  return '#ffe566'
                } else if (params.value === 2) {
                  return '#74ebd5'
                } else if (params.value > 2 && params.value < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              },
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: convertData(item[1])
        }, {
          // 设置圆圈属性的
          name: item[0] + '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // 鼠标移入显示的东西
          tooltip: {

            showDelay: 0,

            formatter: function(params) {
              return `${params.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>报道人数:<span">${params.value[2]}人</span>`
            },
            axisPointer: {

              show: true,

              type: 'cross',

              lineStyle: {

                type: 'dashed',

                width: 1

              }

            }

          },
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          // 设置圆圈大小
          symbolSize: function(val) {
            // val的值是data的值
            return 10
          },
          itemStyle: {
            normal: {
              color: function(params) {
                if (params.value[2] > 0 && params.value[2] <= 1) {
                  return '#ffe566'
                } else if (params.value[2] === 2) {
                  return '#74ebd5'
                } else if (params.value[2] > 2 && params.value[2] < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              }
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            }
          })
        })
      })

      const option = {
        // 设置为半透明
        backgroundColor: 'transparent',
        title: {
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        // 设置地图默认大小
        geo: {
          zoom: 1.2,
          map: 'china',
          label: {
            normal: {
              show: false,
              color: '#fff'
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              // 设置区域颜色
              areaColor: 'rgba(237,242,244,0.06)',
              // 设置边框颜色
              borderColor: '#10beae'
            },
            emphasis: {
              // 设置鼠标悬停时候的样式
              areaColor: '#c6c2c2'
            }
          }
        },

        visualMap: { // 颜色的设置  dataRange
          textStyle: { color: '#fff' },
          x: 'right',
          y: '380',
          splitList: [
            { start: 30 }, { start: 20, end: 30 },
            { start: 10, end: 20 }, { start: 0, end: 10 }
          ],
          // text:['高','低'],// 文本，默认为数值文本
          // color: ['#65A2D9', '#E09107', '#A3E00B']
          color: ['#f26419', '#5bc0eb', '#74ebd5', '#ffe566']
        },
        series: series
      }
      this.$echarts.init(document.querySelector('.map')).setOption(option)
    }
  }
}

以下介绍以上配置代码

坐标信息介绍

// 地图的坐标信息 上面引入的City文件  包含城市的地理坐标  如果是爆红 参考最后的解决办法
var geoCoordMap = City

//  一下planePath是迁徙的图片  下面的是飞机  注释掉的是普通流线 按照自己需求配置就可以
// var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

数据信息介绍

// 数据信息 
var BJData = this.provinces.filter(item => item.value > 0).map(item => {
  return [{
    name: '北京' // 如果需要更改起始点位置就把首个对象的name改为起始点
  },
  {
    name: item.name,
    value: item.value
  }]
})

convertData函数介绍

此数据是配合下面代码完成处理返回对应的 地理坐标系

var convertData = function(data) {
  // data BJData
  var res = []
  for (var i = 0; i < data.length; i++) {
    // BJData
    var dataItem = data[i]
    var toCoord = geoCoordMap[dataItem[0].name] // 北京
    var fromCoord = geoCoordMap[dataItem[1].name] // 成都
    if (fromCoord && toCoord) {
      res.push([
          {
            coord: fromCoord,  // 这里写迁徙开始的位置
            value: dataItem[1].value 
          }, 
          {
            coord: toCoord   // 这里写迁徙结束的位置
          }
      ])
    }
  }
  return res
}

series配置介绍

以上函数返回的地理坐标系会应用到series配置中，应用位置看以下注释

var series = [];
      [
        ['北京', BJData]
      ].forEach(function(item) {
        series.push({
          // 设置飞机后的烟雾
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: 'white', // 设置烟雾颜色
            symbolSize: 3, // 设置烟雾大小
            symbol: planePath // 采用飞机还是抛物线  我这里采用的是飞机  不需要飞机用第一个 planePath
          },
          // 线宽
          lineStyle: {
            normal: {
              color: '#fff',
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(item[1]) // 这里应用的是上面convertData函数返回的坐标系坐标
        }, {
          name: '飞速入学中', // 设置飞机图中的文字
          type: 'lines', 
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              // 看需求完成根据数据的大小 改变飞机的颜色
              color: function(params) {
                if (params.value > 0 && params.value <= 1) {
                  return '#ffe566'
                } else if (params.value === 2) {
                  return '#74ebd5'
                } else if (params.value > 2 && params.value < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              },
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: convertData(item[1])  // 这里应用的是上面convertData函数返回的坐标系坐标
        }, {
          // 设置圆圈属性的
          name: item[0], // 名字 参考遍历的数组 ‘北京’
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // 鼠标移入显示的东西
          tooltip: {

            showDelay: 0,
			// 这里自己配置的移入框 根据需求完成配置即可
            formatter: function(params) {
              return `
${params.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>报道人数:
        <span">${params.value[2]}人</span>`
            },

            axisPointer: {

              show: true,

              type: 'cross',

              lineStyle: {

                type: 'dashed',

                width: 1

              }

            }

          },
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          // 设置圆圈大小
          symbolSize: function(val) {
            // val的值是data的值
            return 10
          },
          itemStyle: {
            normal: {
              // 根据数据的大小  展示不同的颜色
              color: function(params) {
                if (params.value[2] > 0 && params.value[2] <= 1) {
                  return '#ffe566'
                } else if (params.value[2] === 2) {
                  return '#74ebd5'
                } else if (params.value[2] > 2 && params.value[2] < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              }
            }
          },
          // data这里就是需要坐标系还有总体移入的名称 
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            }
          })
        })
      })

配置option介绍

以下注释说明配置信息：不懂可以尝试修改配置，看哪里发生了变化

const option = {
  // 设置为半透明
  backgroundColor: 'transparent',
  title: {
    left: 'left',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  // 设置地图默认大小
  geo: {
    // 缩放比列
    zoom: 1.2,
    map: 'china',
    label: {
      normal: {
        show: false,
        color: '#fff'
      },
      emphasis: {
        show: true,
        color: '#fff'
      }
    },
    // 是否开启缩放
    roam: true,
    itemStyle: {
      normal: {
        // 设置区域颜色
        areaColor: 'rgba(237,242,244,0.06)',
        // 设置边框颜色
        borderColor: '#10beae'
      },
      emphasis: {
        // 设置鼠标悬停时候的样式
        areaColor: '#c6c2c2'
      }
    }
  },
  visualMap: { 
    // 颜色的设置  dataRange
    textStyle: { color: '#fff' },
    x: 'right', // 右下角
    y: '380', 
    // 设置区间
    splitList: [
      { start: 30 }, 
      { start: 20, end: 30 },
      { start: 10, end: 20 }, 
      { start: 0, end: 10 }
    ],
    // text:['高','低'],// 文本，默认为数值文本
    // color: ['#65A2D9', '#E09107', '#A3E00B']
    color: ['#f26419', '#5bc0eb', '#74ebd5', '#ffe566']
  },
  series: series // 上边处理后的series
}

挂载初始化挂载到DOM上

this.$echarts.init(document.querySelector('.map')).setOption(option)

在mounted里面调用方法

mounted() {
  this.getMap()
}

监测数据，实时更新

当数据发生变化时地图实时更新

watch: {
  provinces: {
    handler() {
      this.getMap()
    },
    deep: true // 必须开启深度监听
  }
}

在需要地方引入即可

// 组件记得注册在使用
import Map from './components/Map

8. 错误处理

以下错误说明City.js文件中包含坐标在文件夹引入即可

在这里插入图片描述

以上个人理解，在原有的基础上完成修改，不足请指出

张海智_

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
4
评论
在Vue项目中使用echarts完成迁徙图（Map组件）

在Vue项目中使用echarts完成迁徙图此章个人理解：参考原有的代码基础上，完成了一个地图迁徙的组件先了解一下整体代码，有能力的可以参照整体完成，下面也会列出详细步骤解答前言以下封装了组件作为在地图中国使用只需传入以下格式的数据即可[ { 'name': '北京', 'value': 6 }, { 'name': '湖南', 'value': 3 }, { 'name': '广东', 'value': 2 }, { 'name': '山西', 'val
复制链接

扫一扫