P.S. online Echarts has so few resources that you have to pay tuition to download it. -, in line with the noble character of predecessors trees descendants cool, put my free version out, I hope this article can meet the general hand party (I also) copy with the mentality, after all, this does not involve what profound principle, to meet the needs of the work is enough.

rendering

steps

1. First you need to have the Key portal of the Autonavi API: lbs.amap.com/api/android…
2. There are many ways to introduce Autonavi online. There are vuE-AMap packages under NPM as well as others. I feel quite laborious and have to go to main.js to configure, I use the direct inindex.htmlThe way in which script scripts are introduced (easy to copy and paste).
   
   <script SRC ="//webapi.amap.com/maps?v=1.4.15&key= here to fill your application key&plugin= amap.customLayer "></script>
   
   Usage: Copy the above paragraphscriptTag, double clickFill in your application key hereSelect delete and replace it with your own key. Then paste the label into your VUE project. There’s one under the public folderindex.htmlLine 9 (if you haven’t introduced anything else)

main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

You think you’re done with this? No, no, no, this is just the beginning.

Key points:npm i echarts-extension-amapThen, inmain.jsTo introduceimport 'echarts-extension-amap'

Don’t believe echarts-amap or amap-echarts or anything that asks you to pay for amap.js, it’s a fraud! Liar! I’ve been drawing pages for years for nothing, and you want me to spend money? No way.

Completing the above steps is actually half the battle, and it’s time to wrap the components.

<template>
  <div id="111" style="width:100%; height:100%"></div>
</template>
<script>
exportDefault {props: {// This is the coordinate of the center point of the map. You don't have to be like me. center: {type: Array,
      default: () => {
        return[113.74947682142859, 22.835607857142858]; }}},mounted() {
        this.initMap()
    },
  methods: {
    initMap() {const option = {// amAP map configuration amap: {center: this.center, resizeEnable:true,
          mapStyle: "amap://styles/whitesmoke",// Map style White Rotation: 10, zoom: 10,// Zoom viewMode:"3D",// Enable 3D map pitch: 35, // Angle height skyColor:"#33216a"
        },
        animation: true, series: [// Scatter layer {type: "scatter", zlevel: 2, // coordinateSystem using autonavi coordinateSystem:"amap"// The data format is the same as in the GEO coordinate system, each item is [longitude, latitude, numerical size, other dimensions...]. Data :[], // data format [y,x,name] symbolSize: 5, // small point size encode: {// dimension value: 2}, label: {normal: {formatter:"{@ [2]}"// index position:"right"// display position show:false}, emphasis: {// emphasis show:true
              }
            },
            itemStyle: {
              normal: {
                color: "#00c1de"}}}, // Attack line layer {type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return` from${data.fromName}to${data.endName}`;
                },
                position: "right"// display position show:false}, emphasis: {// emphasis show:trueOpacity: 1; // Curveness: 0.3; // Animator: 0; // Animator: 0; // animator: 0; // animator: 0; // Data format [{fromName:"111",
          endName: "222", coords: [[coordinate, coordinate, the name], [coordinate, coordinate, the name]]}, the layer 2 {}, / / attack charttype: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return` from${data.fromName}to${data.endName}`;
                },
                position: "right"// display position show:false}, emphasis: {// emphasis show:trueOpacity: 1; // Curveness: 0.3; // Animator: 0; // Animator: 0; // animator: 0; // animator: 0; // The same data format as attack map layer 1}]}; var chart = this.$echarts.init(document.getElementById('111'));
      chart.setOption(option);
      // get amap instance
      var amap = chart
        .getModel()
        .getComponent("amap") .getAMap(); // operations below are the same as amap // amap.addControl(new AMap.Scale()); // amap.addControl(new AMap.ToolBar()); // add layers // var satelliteLayer = new AMap.TileLayer.Satellite(); Var roadNetLayer = new amap.tilelayer.roadnet (); // Road layer // amap.add([satelliteLayer, roadNetLayer]); }}}; </script>Copy the code

The data of each layer is simulated by itself, and the format is written in the comments. If you copy and paste run not to report the error can also comment to ask me.