如何在vue項目中使用echarts和高德地圖繪制折線和熱力圖

1.先下載相關的依賴，這里echarts和高德地圖放到一起。（高德地圖需要先去申請一個key）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index'
import VueResource from 'vue-resource'
import echarts from 'echarts'
import VueAMap from 'vue-amap'
import './assets/fonts/fonts.css'
import './assets/fonts/reset.css'
Vue.use(VueAMap)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(VueResource)
VueAMap.initAMapApiLoader({
  key:'你申請的key',
  plugin: [
    "AMap.Autocomplete", //輸入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角縮略圖插件 比例尺
    "AMap.OverView", //地圖鷹眼插件
    "AMap.ToolBar", //地圖工具條
    "AMap.MapType", //類別切換控件，實現默認圖層與衛星圖、實施交通圖層之間切換的控制
    "AMap.PolyEditor", //編輯 折線多，邊形
    "AMap.CircleEditor", //圓形編輯器插件
    "AMap.Geolocation", //定位控件，用來獲取和展示用戶主機所在的經緯度位置
    "AMap.Heatmap"//熱力圖插件
  ],
  v: '1.4.4',
  uiVersion: '1.0'
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2.在需要使用echarts的頁面引入

 <div
        ref="qiji"
        :data-title="allTitle.qiji"
        class="chart qiji"
        :style="{width:chartWidth,height:chartHeight}"
      ></div>

import echarts from "echarts";

 相應的options這里就不貼了 可以配合watch進行動態繪制

3.這里吧地圖組件的完整代碼貼過來

<template>
  <div class="containers">
    <template>
    <div class="amap-wrapper">
       <el-amap class="cont"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :center="center"
        :events="events"
      >
       <!-- <el-amap-polygon v-for="(polygon, index) in polygons" :vid="index" :path="polygon.path" :strokeWeight="polygon.strokeWeight" :fillColor="polygon.fillColor" :strokeColor="polygon.strokeColor" :fillOpacity="polygon.fillOpacity" :strokeOpacity="polygon.strokeOpacity" :draggable="polygon.draggable" :key="index"></el-amap-polygon> -->
     </el-amap>
     <div id="container"></div>
    </div>
  </template>
      <!--
        amap-manager： 地圖管理對象
        vid：地圖容器節點的ID
        zooms： 地圖顯示的縮放級別范圍，在PC上，默認范圍[3,18]，取值范圍[3-18]；在移動設備上，默認范圍[3-19]，取值范圍[3-19]
        center： 地圖中心點坐標值
        plugin：地圖使用的插件
        events： 事件
      -->
        <!-- 標記 -->

    </div>
</template>
<style lang="css">
.amap-wrapper {
  width: 1139px;
  height: 511px;
}
</style>

<script>
import {AMapManager,lazyAMapApiLoaderInstance} from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name:'HMap',
  data () {
    return {
      address: null,
      amapManager,
      center: [121.496837,31.048251],
      zoom: 14,
      mapData:null,
      polygons:[
        {
          strokeWeight: 2, 
          strokeColor: "#19A4EB", 
          strokeOpacity: 0.8, 
          fillColor: "green", 
          fillOpacity:0.1,
          draggable: false,
          path: [
        [121.490164,31.058288], 
        [121.508102,31.063031],
        [121.510162,31.063692], 
        [121.511536,31.06428],
        [121.511793,31.059685], 
        [121.512609,31.045604], 
        [121.503425,31.046266], 
        [121.502953,31.048398], 
        [121.50218,31.057296],
        [121.49055,31.054465],
        [121.491237,31.053325], 
        [121.486602,31.052296], 
        [121.486945,31.050751], 
        [121.486988,31.049979], 
        [121.487374,31.049575], 
        [121.488833,31.047185], 
        [121.48922,31.047038], 
        [121.490336,31.041192], 
        [121.490507,31.040089], 
        [121.49085,31.039647], 
        [121.491323,31.03825], 
        [121.491451,31.036853], 
        [121.492138,31.035014], 
        [121.493039,31.033176], 
        [121.487804,31.031263], 
        [121.486774,31.033801], 
        [121.486087,31.03939], 
        [121.485701,31.039721], 
        [121.485872,31.041265], 
        [121.485486,31.042479], 
        [121.485357,31.045861], 
        [121.484413,31.048509], 
        [121.48407,31.051376], 
        [121.484113,31.051965], 
        [121.48334,31.052516], 
        [121.483169,31.053325], 
        [121.482739,31.05406], 
        [121.481581,31.057516], 
        [121.480722,31.060604], 
        [121.480894,31.061303], 
        [121.480594,31.062295], 
        [121.480207,31.062736], 
        [121.479735,31.06406], 
        [121.479778,31.064464], 
        [121.48201,31.065052], 
        [121.482225,31.065236], 
        [121.483512,31.065383], 
        [121.484027,31.065677], 
        [121.48849,31.066927], 
        [121.490207,31.058104], 
        [121.490207,31.058215]
        ],  
        },
      ],
      events: {
        init (o) {
         o.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f');//自定義的高德地圖的樣式  
        },
      },
    }
  },
    watch: {
    //觀察seriesData的變化
    mapData: {
      handler(newVal) {
      	lazyAMapApiLoaderInstance.load().then(() => {
       this.initMap()
      });
      },
      deep: true //對象內部屬性的監聽，關鍵。
    },
  },
  created() {
    // this.getMapData()
  },
    mounted() {
    this.getMapData()
	lazyAMapApiLoaderInstance.load().then(() => {
       this.initMap()
      });
    this.yanTime()
  },
  methods: {
    getMapData(){
       this.$http.post("/api/home/heatMapData").then(data => {
        console.log(data)
        //這里是熱力圖數據
        this.mapData = data.body
      });
    },
    //延時執行測試
    yanTime(){
       setInterval(() => {
        this.getMapData()
      }, 600000);
    },
    initMap() {
      var that = this
      let map = new AMap.Map("amap-vue", {
        resizeEnable: false,
        center: [121.496837,31.048251],
        zoom: 14
      });
      map.setMapStyle('amap://styles/31444436f4e6420ee2c6b4ecec90f75f')
      //繪制折線
      var path = [
    new AMap.LngLat(121.490164,31.058288), 
    new AMap.LngLat(121.508102,31.063031),
    new AMap.LngLat(121.510162,31.063692), 
    new AMap.LngLat(121.511536,31.06428),
    new AMap.LngLat(121.511793,31.059685), 
    new AMap.LngLat(121.512609,31.045604), 
    new AMap.LngLat(121.503425,31.046266), 
    new AMap.LngLat(121.502953,31.048398), 
    new AMap.LngLat(121.50218,31.057296),
    new AMap.LngLat(121.49055,31.054465),
    new AMap.LngLat(121.491237,31.053325), 
    new AMap.LngLat(121.486602,31.052296), 
    new AMap.LngLat(121.486945,31.050751), 
    new AMap.LngLat(121.486988,31.049979), 
    new AMap.LngLat(121.487374,31.049575), 
    new AMap.LngLat(121.488833,31.047185), 
    new AMap.LngLat(121.48922,31.047038), 
    new AMap.LngLat(121.490336,31.041192), 
    new AMap.LngLat(121.490507,31.040089), 
    new AMap.LngLat(121.49085,31.039647), 
    new AMap.LngLat(121.491323,31.03825), 
    new AMap.LngLat(121.491451,31.036853), 
    new AMap.LngLat(121.492138,31.035014), 
    new AMap.LngLat(121.493039,31.033176), 
    new AMap.LngLat(121.487804,31.031263), 
    new AMap.LngLat(121.486774,31.033801), 
    new AMap.LngLat(121.486087,31.03939), 
    new AMap.LngLat(121.485701,31.039721), 
    new AMap.LngLat(121.485872,31.041265), 
    new AMap.LngLat(121.485486,31.042479), 
    new AMap.LngLat(121.485357,31.045861), 
    new AMap.LngLat(121.484413,31.048509), 
    new AMap.LngLat(121.48407,31.051376), 
    new AMap.LngLat(121.484113,31.051965), 
    new AMap.LngLat(121.48334,31.052516), 
    new AMap.LngLat(121.483169,31.053325), 
    new AMap.LngLat(121.482739,31.05406), 
    new AMap.LngLat(121.481581,31.057516), 
    new AMap.LngLat(121.480722,31.060604), 
    new AMap.LngLat(121.480894,31.061303), 
    new AMap.LngLat(121.480594,31.062295), 
    new AMap.LngLat(121.480207,31.062736), 
    new AMap.LngLat(121.479735,31.06406), 
    new AMap.LngLat(121.479778,31.064464), 
    new AMap.LngLat(121.48201,31.065052), 
    new AMap.LngLat(121.482225,31.065236), 
    new AMap.LngLat(121.483512,31.065383), 
    new AMap.LngLat(121.484027,31.065677), 
    new AMap.LngLat(121.48849,31.066927), 
    new AMap.LngLat(121.490207,31.058104), 
    new AMap.LngLat(121.490207,31.058215)
      ]
      var polygon = new AMap.Polygon({
      path: path,  
          strokeWeight: 2, 
          strokeColor: "#19A4EB", 
          strokeOpacity: 0.8, 
          fillColor: "green", 
          fillOpacity:0.1,
          draggable: false,
    });
    map.add(polygon);

      let heatmap;
      let heatmapData = [
        { lng: 121.490164, lat: 31.058288, count: 1555 },
        { lng: 121.508102, lat: 31.063031, count: 2000 },
      ];
      map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap對象
        heatmap = new AMap.Heatmap(map, {
          radius: 25, //給定半徑
          opacity: [0, 0.8],
          gradient: {
            0.3: "#96fa57",
            0.9: "#f0ef5e",
            1.0: "#f6784e"
          }
        });
        //設置數據集
        heatmap.setDataSet({
          data: that.mapData,
          max: 100
        });
      });
	},
  }
}
</script>

上面有好多無用的代碼，懶得刪了