Echarts地图

TIP

主要了解使用echarts地图绘制以及打点飞线

地图绘制

TIP

1、需要地图JSON得同学可以去 Echarts Github 去获取， 3X下有对应得map json 资源文件
2、echarts 地图配置手册链接需要哪种配置可以看下具体

用到得具体配置如下, 以下就能得到一个地图（根据JSON文件绘制具体）

// options.js
export const mapOptions = {
  silent: true,
  geo: {
    left: '10%',
    right: '5%',
    bottom: '5%',
    top: '5%',
    map: 'world',
    zoom: 1.1,
    label: {
      emphasis: {
        show: false,
        color: '#fff',
      },
    },
    itemStyle: {
      normal: {
        areaColor: '#6596D4',
        borderColor: '#4E8BD5', // 国界线颜色
        borderType: 'solid', // 国界线类型
      },
      emphasis: {
        show: false,
        areaColor: '#6596D4',
        borderColor: '#4E8BD5', // 国界线颜色
      },
    },
  },
}

vue

<!-- map.vue -->
<template>
  <div class="map-container"></div>
</template>

<script>
import echarts from 'echarts';
import worldMap from './world.json'; // 再3X 里面获取得JSON文件
import { mapOptions } from './options';

export default {
  name: 'Map',

  mounted() {
    this.$nextTick(() => {
      this.initMapChart();
    });
  },

  methods: {
    initMapChart() {
      echarts.registerMap('world',worldMap);
      const mapChart = echarts.init(this.$el);
      mapChart.setOption({
        ...mapOptions,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 500px;
  width: 500px;
}
</style>

以上就能得到一个基础得地图了。

打点、飞线

TIP

再地图上绘制打点、飞线。

1、飞线相关配置项链接
2、打点相关配置项链接

加上打点飞线得options

// options.js
export const mapOptions = {
  silent: true,
  geo: {
    left: '10%',
    right: '5%',
    bottom: '5%',
    top: '5%',
    map: 'world',
    zoom: 1.1,
    label: {
      emphasis: {
        show: false,
        color: '#fff',
      },
    },
    itemStyle: {
      normal: {
        areaColor: '#6596D4',
        borderColor: '#4E8BD5', // 国界线颜色
        borderType: 'solid', // 国界线类型
      },
      emphasis: {
        show: false,
        areaColor: '#6596D4',
        borderColor: '#4E8BD5', // 国界线颜色
      },
    },
  },
  series: [
    {
      type: 'lines', // 飞线
      zlevel: 1,
      effect: {
        show: true,
        period: 4,
        trailLength: 0.1,
        color: '#FFCA59', // 箭头颜色
        symbolSize: 6,
      },
      lineStyle: {
        normal: {
          color: '#FFA84F',
          width: 1,
          curveness: 0.2,
          type: 'dotted', // 'dotted'点型虚线 'solid'实线 'dashed'线性虚线
        },
        emphasis: {
          type: 'dotted',
          color: '#FFA84F',
        },
      },
      data: [{
        coords: [[109.82222, 40.65222], [120.28866, 30.01347]],
      }],
    },
    {
      type: 'scatter', // 打点
      coordinateSystem: 'geo',
      zlevel: 10,
       symbol: 'pin',
      symbolSize: 15,
      symbolOffset: [0, '-50%'],
      silent: false,
      data: [[109.82222, 40.65222]],
    },
    {
      type: 'scatter', // 打点
      coordinateSystem: 'geo',
      zlevel: 10,
      symbol: 'pin', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
      symbolSize: 30,
      silent: false,
      data: [[120.28866, 30.01347]],
    },
  ],
};

Echarts地图 ​

地图绘制 ​

打点、飞线 ​

Echarts地图

地图绘制

打点、飞线