在Vue中使用Echarts可视化库的完整步骤记录


Posted in Vue.js onNovember 18, 2020

前言

由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:“大数据可视化”(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts、Echarts、AntV。

在Vue中使用Echarts可视化库的完整步骤记录

介绍:

Hcharts:国外的一款图表库,是图表库的领头羊

在Vue中使用Echarts可视化库的完整步骤记录

Echarts:百度开发的数据可视化库,国内图表库的 “领军人物”

在Vue中使用Echarts可视化库的完整步骤记录

AntV:是蚂蚁金服开发的数据可视化库

在Vue中使用Echarts可视化库的完整步骤记录

总结出以下几个优略点区别Echarts、Hcharts哪个比较合适:

1、学习容易程度:只要懂JS,那么相信你能很快上手。两者打分相同。但是百度出品的Echarts对于国内城市已经有了相应的配置,调用非常方便。因此在绘制地图方面,Echarts略胜一筹。

2、大数据表现力:有网友说,当数据量达到万条的级别时,Highcharts的多表联动、自动缩放具有更强的优势,而Echarts则会出现明显的卡顿,需要设置datazoom。因此Hcharts完胜。

3、文档友好程度:Echarts是百度的,Hcharts是国外的。另外,Echarts的文档像是说明书,而Highcharts的文档像是博客。个人仍偏向于说明书一样的文档,容易定位,因此我为Echarts转身亮灯。

4、图表美观程度:看看两家的实例EchartsHchartsEcharts完爆啊!而且Echarts基于Canvas,对于3D绘图有绝对优势,能画出极漂亮的图形。

5、图表配置的自由度:Hcharts基于SVG,方便定制,同类型的图表,Hcharts能玩出100种花样。

6、图表的丰富程度Echarts丰富的图表种类,和惊艳的3D效果,吊打Hcharts。

最后,更为关键的是,Echarts免费,Hcharts用于商业用途时还需要授权,个人用时虽然免费,但会在图表上显示logo,有洁癖的话就只能绕道了。

所以,就决定是你了,Echarts

个人不推荐使用Vue-Echarts版本,因为Echarts本身难度不算大,虽然文档有点像是 “说明书”,但是还算全乎,花点时间还是可以理解的。

引入:

在Vue中使用Echarts时可以按照一般引入插件的方式引入

1、使用npm安装Echarts:

npm install echarts --save

 2、全局引入Echarts:

//main.js 不推荐
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

个人不推荐在main.js全局引入的发方式,根据项目使用Echarts的程度可以选择按需引入:

3、按需引入Echarts:

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表

简单使用: 

首先应该明确Echarts图形必须满足四项刚性条件才可以绘制:

准备一个具有宽高的容器(container);每次绘制之前需要初始化(init);必须设置配置,否则无从绘制(option);改变数据时必须传入改变的数据,否则监听不到新数据(setOption);

四步缺一不可,可以简单理解为日常生活中娶媳妇:

找到适合结婚的女朋友(container);认识一段时间之后确定关系(init);确定关系之后需要买买买,她才会跟你继续交往(option);关系进一步升温之后就可以把他娶回家了(setOption);

使用:

<!-- 准备具有宽高的容器 -->
 <div style="width: 100%; height: 100%" ref="chart"></div>
<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
  data() { return { chart: null } }, //图表实例
  mounted() { this.init() },
  methods: {
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //X轴
        yAxis: { type: 'value' }, //Y轴
        series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] //配置项
      };
      // 4.传入数据
      this.chart.setOption(option);
    }
  }
};
</script>

 在Vue中使用Echarts可视化库的完整步骤记录

自适应窗口大小:

为了兼容性,需要做到每个图表根据屏幕变化而自适应宽高

单个 / 多个图表均生效:

mounted() {
    window.addEventListener('resize', () => {
      this.chart.resize();
    });
  }

效果展示:

在Vue中使用Echarts可视化库的完整步骤记录

总结

到此这篇关于在Vue中使用Echarts可视化库的文章就介绍到这了,更多相关Vue使用Echarts可视化库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
You might like
优化PHP代码技巧的小结
2013/06/02 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Python迭代器与生成器基本用法分析
2018/07/26 Python
Numpy之random函数使用学习
2019/01/29 Python
python命令 -u参数用法解析
2019/10/24 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
老师对学生的寄语
2014/04/09 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
个人创业事迹材料
2014/12/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书