在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 24 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue router配置与使用分析讲解
Dec 24 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
世界收音机发展史
2021/03/01 无线电
用php来检测proxy
2006/10/09 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
高三霸气励志标语
2014/06/24 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
黄埔军校观后感
2015/06/10 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL