vue2+echarts绘制一个飞线图

1.导入echarts的包

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

2.准备所需的地图json文件 china.json 下载地址： http://datav.aliyun.com/portal/school/atlas/area_selector

根据所需地图区域选定即可

3.vue文件中 创建容器存放echarts 绘制echarts图表

此处使用在methods中初始化的方式

   methods: {
    initCharts() {
      let myChart = echarts.init(document.getElementById("main"));
      // myChart.registerMap("china", china);

      this.$echarts.registerMap("china", geoJson);

      let province = [
        { name: "重庆", value: [106.33, 29.35] },
        { name: "济南", value: [117, 36.4] }
      ];

      // 绘制图表
      myChart.setOption({
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "rgba(0,0,0,0.8)",
              borderColor: "#111"
            },
            emphasis: {
              areaColor: "#2a333d"
            }
          }
        },
        series: [
          //不能使用这种方式引入地图 会导致 打点不显示
          // {
          //   type: "map",
          //   map: "china",
          //   silent: true, // 图形是否不响应和触发鼠标事
          //   roam: false, // 鼠标缩放
          //   zoom: 1.01,
          //   // 是否显示省份名称
          //   label: {
          //     show: false,
          //     color: "#0484a5"
          //   },
          //   itemStyle: {
          //     borderColor: "rgba(208, 180, 100, 1)",
          //     borderWidth: 1,
          //     areaColor: "rgba(9, 40, 77, 1)"
          //   }
          // },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: province,
            symbolSize: 10,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#ddb926"
              }
            }
          },
          {
            type: "lines",
            coordinateSystem: "geo",
            polyline: true,
            data: [
              {
                // name: "重庆-济南",
                coords: [
                  [117, 36.4],
                  [106.33, 29.35]
                ]
              },
              {
                // name: "重庆-济南",
                coords: [
                  [120, 35],
                  [106, 29]
                ]
              }
            ],
            effect: {
              show: true,
              period: 5,
              trailLength: 0,
              symbol: "arrow",
              color: "#01AAED",
              symbolSize: 8
            }
          }
        ]
      });
      //获取 echats 要渲染的dom
      let dom = document.getElementById("echartsContainer");
      let ro = new ResizeObserver(entries => {
        myChart.resize();
      });
      ro.observe(dom);
    }
    }

option中的geo用于配置地图文件

series中分别配置

1. effectScatter：在地图上打点坐标

2. lines：绘制两点之间的连线

踩坑点：

1.option中使用geo配置地图 不在series中配置地图（会导致下面配置的scatter失效）

2.配置lines时，coordinateSystem属性要设置为geo，同时data中的格式一定要符合规范

vue文件完整代码：

<template>
  <div class="home">
    <div class="map-class" id="echartsContainer">
      <div ref="mapBar" id="main"></div>
    </div>
  </div>
</template>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  .map-class {
    width: 1000px;
    height: 800px;
    border: 1px solid #ccc;
  }
  #main {
    height: 100%;
    width: 100%;
    background-image: url("../static/picture/KlnlM0cojj.jpg");
    background-repeat: no-repeat;
  }
}
</style>

<script>
import * as echarts from "echarts";
import geoJson from "../static/js/china.json";

export default {
  name: "map-geo",
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = echarts.init(document.getElementById("main"));
      // myChart.registerMap("china", china);

      this.$echarts.registerMap("china", geoJson);

      let province = [
        { name: "重庆", value: [106.33, 29.35] },
        { name: "济南", value: [117, 36.4] }
      ];

      // 绘制图表
      myChart.setOption({
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "rgba(0,0,0,0.8)",
              borderColor: "#111"
            },
            emphasis: {
              areaColor: "#2a333d"
            }
          }
        },
        series: [
          //不能使用这种方式引入地图 会导致 打点不显示
          // {
          //   type: "map",
          //   map: "china",
          //   silent: true, // 图形是否不响应和触发鼠标事
          //   roam: false, // 鼠标缩放
          //   zoom: 1.01,
          //   // 是否显示省份名称
          //   label: {
          //     show: false,
          //     color: "#0484a5"
          //   },
          //   itemStyle: {
          //     borderColor: "rgba(208, 180, 100, 1)",
          //     borderWidth: 1,
          //     areaColor: "rgba(9, 40, 77, 1)"
          //   }
          // },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: province,
            symbolSize: 10,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#ddb926"
              }
            }
          },
          {
            type: "lines",
            coordinateSystem: "geo",
            polyline: true,
            data: [
              {
                // name: "重庆-济南",
                coords: [
                  [117, 36.4],
                  [106.33, 29.35]
                ]
              },
              {
                // name: "重庆-济南",
                coords: [
                  [120, 35],
                  [106, 29]
                ]
              }
            ],
            effect: {
              show: true,
              period: 5,
              trailLength: 0,
              symbol: "arrow",
              color: "#01AAED",
              symbolSize: 8
            }
          }
        ]
      });
      //获取 echats 要渲染的dom
      let dom = document.getElementById("echartsContainer");
      let ro = new ResizeObserver(entries => {
        myChart.resize();
      });
      ro.observe(dom);
    }
  }
};
</script>