在Vue2项目中使用ElementUI和Echarts

=Start=

缘由:

自己毕竟不是专门做前端/UI的,所以在页面布局以及样式上面没有那么专业,但爱美之心人皆有之,我也想做出一些好看的页面,用的时候感觉也会好些。这时,就需要借助一些UI框架以及图表工具了,对应的比较流行的就是ElementUI和Echarts了,这里简单介绍一下它们在Vue2的项目中该如何引入和使用,方便以后参考。

正文:

参考解答:
一、Vue2.0 项目中怎样添加 ElementUI 和 Echarts

方法一:直接在 package.json 文件里面的 dependencies 里配置

然后再执行 npm install 命令。

方法二:直接执行命令

二、Vue2.0 项目中如何使用 ElementUI 和 Echarts

2.1 elemnt-ui 只需在 main.js 里添加

2.2 对于用到 echarts 的页面,哪个页面用到就在哪个.vue文件中添加

补充:.vue 文件结构介绍

三、简单样例

ElementUI样例

Echarts样例

四、一些注意事项

需要注意的是:Echarts对应的DOM容器必须要指定宽高,否则Echarts无法渲染dom !!!

 

错误:
Uncaught TypeError: Cannot read property ‘getAttribute’ of null
参考:
这个错误的发生是因为当方法被调用的时候这个HTML元素的对象还没有加载进去,所以你需要把这个报错的方法用在DOM对象加载之后。

或则你把js文件的调用放在body的最后,就是俗称的网页底部,在确定对应的HTML元素被加载之后再运行。

在 Vue2.0 里面一般就是放在 mounted 里面,然后整个网页就恢复正常了。

错误:
Uncaught Error: series.type should be specified.
参考:
https://segmentfault.com/q/1010000012411869

错误:
Uncaught TypeError: Cannot read property ‘get’ of undefined
参考:
echart_obj.setOption(echart_obj_option);
即便是 空option 也需要先 setOption 之后再 setOption 其它的部分(当echarts的两个option存在不同的参数的时候),否则会报错。

 

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/4004.html

《在Vue2项目中使用ElementUI和Echarts》上有5条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注