vue-cli +echarts-amap集成echarts和高德地圖TypeError: Cannot read property 'dataToPoint' of null解決方案

 

由於項目的需求，需要做一種遷徙效果， 最后我們采用了組件化開發，可以說這個坑自己一個人踩，有點累，但也收獲不少。

 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搜索了一下，也有人遇到這樣的一個問題，但是就是沒有解決，經過一個早上的決斗，還是自己解決了。

先看下 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中引入 了

<!-- 引入高德地圖擴展 -->
<!--<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中引入

<!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的一種方法。

按照步驟一步一步來，問題解決了，地圖也出來發，效果也出來了。

 

 

若有不正確，請指正， 小白的代碼生涯。