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: [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:
webpack-internal:///./node_modules/vue/dist/vue.esm.js: TypeError: Cannot read property 'dataToPoint' of null
at Object.progress (webpack-internal:///./node_modules/echarts/lib/chart/lines/linesLayout.js:)
at Task.eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:)
at doProgress (webpack-internal:///./node_modules/echarts/lib/stream/task.js:)
at Task.taskProto.perform (webpack-internal:///./node_modules/echarts/lib/stream/task.js:)
at eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:)
at HashMap.each (webpack-internal:///./node_modules/zrender/lib/core/util.js:)
at eval (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:)
at Array.forEach (<anonymous>)
at each (webpack-internal:///./node_modules/zrender/lib/core/util.js:)
at performStageTasks (webpack-internal:///./node_modules/echarts/lib/stream/Scheduler.js:)
logError @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:
网上找了很多方法,但是都没有解决的办法,但是用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的一种方法。
按照步骤一步一步来,问题解决了,地图也出来发,效果也出来了。
若有不正确,请指正, 小白的代码生涯。
vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案的更多相关文章
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- Vue 组件封装发布到npm 报错 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 原因是 没有导出 export default { name:& ...
- vue报错 Uncaught TypeError: Cannot read property ‘children ’ of null
Uncaught TypeError: Cannot read property ‘children ’ of null ratings未渲染完毕,就跳走goods了,取消默认跳转,即可
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- 【教程】高德地图使用ECharts实现数据可视化
关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
- echarts js报错 Cannot read property 'getAttribute' of null
本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...
- 高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...
随机推荐
- Robot Framework 环境安装(一)
1.安装python:https://www.python.org/2.安装python的第三方库:robotframework (1)检查是否支持pip命令. (2)robotframework安装 ...
- uni-app hbuilderX ios离线打包,启动图修改没反应
最后还是没反应 删除app从新安装, 可参考https://www.jianshu.com/p/47c1377c61d6
- linux ps top 命令 VSZ,RSS,TTY,STAT, VIRT,RES,SHR,DATA的含义
VIRT:virtual memory usage 虚拟内存1.进程“需要的”虚拟内存大小,包括进程使用的库.代码.数据等2.假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而 ...
- python 2.7 数据结构: 基础面试总结
python中基础的数据类型包括: 1 Number(数字) 2 String(字符串) 3 List(列表) 4 Tuple(元组) 5 set(集合) 6 Pictionary(字典) 按照可变数 ...
- js-事件以及window操作
属性 当以下情况发生时,出现此事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfocus 元素获得焦 ...
- [转]Windows下安装storm-0.9.1
来源:https://www.cnblogs.com/liuruitao/p/4669657.html Windows下安装storm-0.9.1的详细步骤如下: 1.确定已经正确安装JDK1.6或J ...
- Redis数据结构之intset
本文及后续文章,Redis版本均是v3.2.8 上篇文章<Redis数据结构之robj>,我们说到redis object数据结构,其有5中数据类型:OBJ_STRING,OBJ_LIST ...
- python之psutil模块(获取系统性能数据)
psutil模块 1.介绍 psutil是一个跨平台库(http://code.google.com/p/psutil/),能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等) ...
- git 中文文档 及测试命令
git 使用官方中文文档 https://git-scm.com/book/zh/v2/ 或者你在github上只填写一个仓库名称点击创建后会跳转一个页面给出参考命令如下 echo "# w ...
- Java反射通过getter和setter方法实现类的拷贝
private User copyFieldValues(User userData, User user) { Field[] fields = user.getClass().getDeclare ...