在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 26 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php返回json数据函数实例
2014/10/09 PHP
php函数与传递参数实例分析
2014/11/15 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序实现留言板
2018/10/31 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
python 中random模块的常用方法总结
2017/07/08 Python
Python中单例模式总结
2018/02/20 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
什么是数组名
2012/05/10 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
十佳护士先进事迹
2014/05/08 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
心理健康教育主题班会
2015/08/13 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书