还是老样子,说之前的题外话。一直以肥宅自称的我今天终于也丧失了这个资格,在外面呆的时间久了,都不知道二次元已经成为了贬义词。就我自身而言,我觉得喜欢动漫,喜欢二次元的东西,都是很正常的事,但是要理智去对待,而不是狂热到像那些脑残粉一样,这样就过分了。每个圈子都有自己黑暗的一面,但是也都有自身好的一面,中二病也不一定都是坏的,哪个男生没梦想过拯救世界,哪个女生没梦想过成为公主呢?希望大家可以理智去对待,正眼去看到周围喜欢动漫的人群。所以,我顶多好像也就是个伪宅了吧。
接下来进入正题
如何在VUE项目中使用Echarts
最近在做的项目中有用到这些,因为之前需要从别人的项目中移植过来一个Echarts的项目,加上目前也在使用一些图表类功能,所以趁此机会将使用经验和在这之中遇到的一些问题的解决方法写下来希望可以帮助到需要的人。
先从最基础的说起。笔者用使用的是基于Webpack的Vue-cli搭建的项目,所以是使用的cnpm方式进行引入Echarts的依赖。
cnpm install echarts --save
如果你是使用cdn方式(直接在页面进行引入,此处引用官方文档的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
)或者是使用其他方法进行引入的,详情可见Echarts官网里面的安装教程。
之后在main.js文件中进行全局配置
之后在你绘制的页面之中进行引用,首先要给一个容器
之后进行填充
具体的配置我们写在另一个方法之中,这么使用是可以将配置与填充分开,更加灵活(这是从官方那里拿来的一个例子)
最后不要忘记挂载结束后进行启动
之后我们就可以看到效果了
接下来我们粗略讲一下配置中的参数。具体的详细,需要的同学可以到官方文档之中进行查询。
1.tooltip:当你的鼠标移动到上面时显示的数据样式
2.legend:在侧边辅助提示的样式,这里data中的数据名称必须要跟你所展示的数据的value一致才行哦。
3.series:你的数据绑定的地方,将你自己的数据在这里的data处进行绑定。
如果只是需要展示一个基本的图表的话这些就可以完成你的功能需求了,如果你还需要更加细致的配置的话,请移步到官方文档API处,那里有更加详细的配置讲解。
遇到的坑
之前要求把别人项目中的东西强行移植到VUE上,再加上那段时间刚接触Echarts,移植=重写。当时头大的狠。
图截图自官网一个例子,当初就是要处理类似这样的一个“炫酷”地图。
1.使用VUE自带的v-html不可能把全部内容移植进来
2.就我目前所拥有的技术,在VUE中直接写一个html用,并且通过vue-router跳转展示在页面之中,我暂且还没有找到好的方法。如果大家有好的方法希望在下面进行留言。
3.如图显示的那些亮闪闪的线,其实是一个大型的JSON数据处理之后得到的,使用VUE进行处理这些数据的时候,内存会炸掉,没错,一瞬间就满了,之后浏览器就会崩溃,调节VUE内置的内存参数也没有用,会爆炸。
解决方法
因为需求问题,你不能说NO!所以最后我选择使用Iframe将Html页面嵌套进入VUE的页面之中,不让VUE直接对JSON数据进行处理。虽然听起来很Low,但是最后也是解决掉了问题。希望有幸可以帮助到需要帮助的朋友,如果大家有更好的解决方法,这里十分感谢大家!
题外话:1.使用cdn模式引入Echarts时,如果需要引用到地图的话,一定要把地图引用放置在最上面,不要问我为什么知道,这种低级错误找的我甚至想死!
2.记得一定要给你的容器设置大小,不要出现写好了,也没错误,为什么我的图标不显示的问题,不要问我为什么知道!
最后,关于这个小Demo的代码我放在了https://github.com/Super-aoao/a-little-cookie/blob/master/test.vue,需要的同学可以自取。