在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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue如何清除浏览器历史栈
May 25 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
Yii框架登录流程分析
2014/12/03 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP最常用的正则表达式
2017/02/13 PHP
YII框架http缓存操作示例
2019/04/29 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
管理专员自荐信
2014/01/26 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
质量整改通知单
2015/04/21 职场文书
赢在执行观后感
2015/06/16 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL