vue使用echarts繪制河南地圖並實現個人軌跡

import echarts from 'echarts';
import "echarts/map/js/province/henan.js";

　　

<div id="hndt" style="width: 100%;height: 50%;"></div>

　　軌跡數據沒有貼完只有一個的其它的自己增加就行

 //使用echarts.init()方法初始化一個Echarts實例，在init方法中傳入echarts map的容器 dom對象
      var mapChart = echarts.init(document.getElementById('hndt'));
      // mapChart的配置
      var option = {
backgroundColor: "#0b1225",
        title: {
          text: '個人軌跡運行圖',
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        toolbox: {
          show : true,
          feature : {
            // dataView : {
            //   show: true,
            //   readOnly: true,
            // },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        visualMap: {
          show: true,
          min: 0,
          max: 255,
          calculable: true,
          inRange: {
            color: ['aqua', 'lime', 'yellow', 'orange', '#ff3333']
          },
          textStyle: {
            color: '#12223b'
          }
        },
        geo: { // 這個是重點配置區
          map: '河南', // 表示河南地圖
          roam: true,
          layoutCenter: ['50%', '50%'],
          layoutSize: "100%",
          label: {
            normal: {
              show: false, // 是否顯示對應地名
              textStyle: {
                color: 'rgba(94,239,27,0.95)'
              }
            },
          },
          itemStyle: {
            normal: {
              areaColor: '#37376e',
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            "type": "lines",
            "zlevel": 2,
            "effect": {
              "show": true,
              "period": 4,
              "trailLength": 0.02,
              "symbol": "arrow",
              "symbolSize": 5
            },
            "lineStyle": {
              "normal": {
                "width": 1,
                "opacity": 0.6,
                "curveness": 0.2
              }
            },
            "tooltip": {
              "trigger": "item"
            },
            "data": [
              {
                "fromName": "鄭州市",
                "toName": "周口市",
                "value": 1,
                "coords": [
                  [
                    113.467,
                    34.623
                  ],
                  [
                    114.697,
                    33.625

                  ]
                ],            
              },
                      
           
          {
            "name": "地點",
            "type": "effectScatter",
            "coordinateSystem": "geo",
            "zlevel": 2,
            "rippleEffect": {
              "period": 4,
              "brushType": "stroke",
              "scale": 4
            },
            "tooltip": {
              "trigger": "item"
            },
            "label": {
              "normal": {
                "show": true,
                "position": "left",
                "offset": [
                  -5,
                  5
                ],
                "formatter": "{b}"
              },
              "emphasis": {
                "show": true
              }
            },
            "hoverAnimation": true,
            "symbol": "circle",
            "symbolSize": 5,
            "itemStyle": {
              "normal": {
                "show": false,
                "color": "#f00"
              }
            },
            "data": [
              {
                "name": "鄭州市",
                "value": [
                  113.467,
                  34.623,
                  0
                ],
                tooltip:{
                  formatter:'時間:8:30am<br/>出發地:鄭州市'
                },
              },
              {
                "name": "周口市",
                "value": [
                  114.697,
                  33.625,
                  1
                ]
              },   
            ]
          },
        ]
  };
      //設置圖表的配置項
      mapChart.setOption(option);