关于萌新初识VUE的那些事 （在VUE中使用Echarts）
还是老样子，说之前的题外话。一直以肥宅自称的我今天终于也丧失了这个资格，在外面呆的时间久了，都不知道二次元已经成为了贬义词。就我自身而言，我觉得喜欢动漫，喜欢二次元的东西，都是很正常的事，但是要理智去对待，而不是狂热到像那些脑残粉一样，这样就过分了。每个圈子都有自己黑暗的一面，但是也都有自身好的一面，中二病也不一定都是坏的，哪个男生没梦想过拯救世界，哪个女生没梦想过成为公主呢？希望大家可以理智去对待，正眼去看到周围喜欢动漫的人群。所以，我顶多好像也就是个伪宅了吧。
接下来进入正题
如何在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，需要的同学可以自取。
关于萌新初识VUE的那些事 （在VUE中使用Echarts）相关推荐
- 关于萌新初识VUE的那些事
接触VUE这个东西,时间说长不长,说短不短,作为一个刚入坑社会不久的程序员来说,我只能说是初有见识.提笔写下这篇博客,也只是希望可以帮助到一些刚入坑前端的萌新们,具体有一些说的不到位的地方,如果大家有 ...
- 声卡loopback有什么用_萌新做音乐那点事 | 外置专业声卡的选择方法与推荐
[本文长期更新,感兴趣可以点收藏] 前言:作为一名独立音乐人,接触了这么多年,自认为了解一点声卡的常识,为正在准备购买声卡[或是音频接口]的萌新音乐人做一篇介绍文. 市面常见的声卡品牌 常见的品牌真的 ...
- 【关于vue的那些事】vue.runtime.esm.js?2b0e:619
报错: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Can ...
- AOC萌新探索：搭建和体验在线AOC环境
摘要:AOC是一个做网络设备自动化运维以及三方设备纳管的一个能力平台. 本文分享自华为云社区<AOC萌新探索之旅第一期--在线AOC环境初体验>,作者:oysterzz. 接触AOC没多久 ...
- 我的世界java萌新须知_《我的世界》萌新MC须知
今天发号网和大家讲解<我的世界>萌新MC须知 <我的世界>中萌新小伙伴总会遇到各种难题不知道如何解决.这里小编带来了资深玩家分享的<我的世界>萌新MC须知,感兴趣的 ...
- Vue 2.x + Webpack 4.x的那些事---萌新必备
大家好,本人名叫苏日俪格,现在很多的项目都使用了webpack,现在最火的也就是vue和webpack结合来完善一个项目,由于介入了一个有几年历史的产品,第一步不得不看看webpack的配置项,看看项 ...
- Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
- 前端萌新看过来了—— 0基础1小时vue入门到实战
Vue.js+element ui从零开始一个项目 浅析一下:Vue.js到底是个什么东西? 项目概览 1. 脚手架安装与搭建 2. 初始创建建议 3. 引入element ui框架 4. 测试UI框 ...
- 萌新养成 | AI科技大本营实习生招募计划
金三银四跳槽季 这个时候需要做好准备的可不仅仅只有在职或者离职的萝卜 尚未毕业的萌新也需要提早做准备了 毕竟把自己修炼成一个优秀的萝卜也不是一件容易的事 所以,放下你找对象.刷副本.世界游的想法 加入 ...
最新文章
- 【Linux】02-Linux远程管理常用命令
- 【Linux系统编程】POSIX有名信号量
- x86汇编语言-从实模式到保护模式----第五章
- [转]使用Navicat for Oracle工具连接oracle的
- Linux新手笔记 源 安装chromium
- 浪潮服务器可管理和维护性,专注用户需求，浪潮服务器提供优质高效的产品
- 用C++ TR1 生成随机数
- 企业全面运营管理沙盘模拟心得_企业沙盘模拟心得感受
- 通过PreparedStatement执行更新查询操作
- Java输入小数和整数求COSx_嗖嗖移动大厅 源代码 Java初级小项目
- Redis主从, 哨兵, Lettuce(二)
- JS实现方块颜色的渐变
- 如果你突然打了个喷嚏，那
- Autoar之 CAN NM网络管理
- 【POJ3710】Christmas Game 博弈 有限制的图上删边游戏（树形删边游戏进化1）
- gromcas 分析NAMD轨迹文件dcd
- 将十进制数转换成二进制数（C语言）
- LeetCode 221. 最大正方形
- 刘强东：B2C电商本质在于娇惯消费者
- iOS基于jenkins打包+上传蒲公英+钉钉群通知