因爲項目的需求，須要作一種遷徙效果， 最後咱們採用了組件化開發，能夠說這個坑本身一我的踩，有點累，但也收穫很多。
vue-cli +echarts-amap集成echarts和高德地圖，出現報錯，錯誤以下
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'dataToPoint' of null" found in ---> <VChart> at node_modules/vue-echarts/components/ECharts.vue <EchartsAmap> at src/components/EchartsAmap.vue <App> at src/App.vue <Root> warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896 TypeError: Cannot read property 'dataToPoint' of null at Object.progress (webpack-internal:///./node_modules/echarts/lib/chart/lines/linesLayout.js:99) at Task.eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:488) at doProgress (webpack-internal:///./node_modules/echarts/lib/stream/task.js:217) at Task.taskProto.perform (webpack-internal:///./node_modules/echarts/lib/stream/task.js:157) at eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:286) at HashMap.each (webpack-internal:///./node_modules/zrender/lib/core/util.js:665) at eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:278) at Array.forEach (<anonymous>) at each (webpack-internal:///./node_modules/zrender/lib/core/util.js:298) at performStageTasks (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:247) logError @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896
網上找了不少方法，可是都沒有解決的辦法，可是用google搜索了一下，也有人遇到這樣的一個問題，可是就是沒有解決，通過一個早上的決鬥，仍是本身解決了。html
先看下 ECharts配置項，echarts用的底圖是高德地圖，網上資源不多，多多少少會遇到些問題。
const series_ = [ //閃動的線 { name: "上海 Top10", coordinateSystem: "amap", type: "lines", zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: "#2f44c8", symbolSize: 3 }, lineStyle: { normal: { color: "#2f44c8", width: 0, curveness: 0.2 } }, data: [ { fromName: "上海", toName: "包頭", coords: [ [ 121.4648, 31.2891 ], [ 109.853634, 40.651412 ] ], value: 95 } ] }, //軌跡 { name: "上海 Top10", coordinateSystem: "amap", type: "lines", zlevel: 2, symbol: [ "none", "arrow" ], symbolSize: 10, lineStyle: { normal: { color: "#a6c84c", width: 1, opacity: 0.6, curveness: 0.2 } }, data: [ { fromName: "上海", toName: "包頭", coords: [ [ 121.4648, 31.2891 ], [ 109.853634, 40.651412 ] ], "value": 95 } ] }, //包頭圓點 { name: "上海 Top10", type: "effectScatter", coordinateSystem: "amap", zlevel: 2, symbolSize: 20, rippleEffect: { brushType: "stroke" }, label: { normal: { show: true, position: "bottom", formatter: "{b}" } }, itemStyle: { normal: { color: "#a6c84c" } }, data: [ { name: "包頭", value: [ 109.853634, 40.651412, 95 ] } ] } ]; export default { data() { return { openflower: { title: { text: '模 擬 遷 徙', subtext: '數據純屬虛構', left: 'center', textStyle: { color: '#1935ff' } }, amap: { maxPitch: 60, pitch: 10, //45 俯仰角 viewMode: '3D', zoom: 5.5, expandZoomRange: true, zooms: [3, 20], //mapStyle: 'amap://styles/darkblue', //地圖主題 center: [110, 33], //中心點 rotation: 0, //順時針旋轉角度 resizeEnable: true, }, animation: false, series: series_ } } } }
這個主要的緣由是我在index.html中引入 了vue
<!-- 引入高德地圖擴展 -->
<!--<script src="/echarts-amap.min.js"></script>-->
這個，可是沒有效果，根本加載不到。因此我肯定這確定是沒有加載到，加載這個是我沒有寫vue的時候是完成能夠實現，可是到了vue組件化開發這裏來呢？這就是一個問題。
終於，我發現，在使用vue-cli的時候，再也不是直接引入echarts-amap.min.js了，是有組件是能夠npm下載的。這時候就要用npm來下載了，
安裝
npm install echarts-extension-amap --save
引入
在index.html中引入node
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_visualization</title> <script src="https://webapi.amap.com/maps?v=1.4.13&key=你的高德key"></script> </head> <body> <div id="app"></div> </body> </html>
若是是 webpack 打包，在main.js中使用 require 引入
//導入echarts-amp
require('echarts-extension-amap');
具體的解決方法若是看不懂，能夠查看連接：https://www.npmjs.com/package/echarts-extension-amap ，，這也是使用vue-cli整合echarts-amap的一種方法。webpack
按照步驟一步一步來，問題解決了，地圖也出來發，效果也出來了。web
如有不正確，請指正， 小白的代碼生涯。vue-cli