vue-cli项目中使用echarts图表实例


Posted in Javascript onOctober 22, 2018

我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网

现在的前端一般需要完成将大量的数据,实现可视化。现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势。而ECharts和d3.js则是可视化的成熟框架。对于制作的图表可以说是满足你的创造力。

两者相比,D3 它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。

而ECharts图表更加的适合应用,具备华丽的外衣,但很实用。

vue-cli项目中使用echarts图表实例

安装vue依赖

使用npm

npm install echarts --save

使用yarn

yarn add echarts

使用国内的淘宝镜像:

//安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

//从淘宝镜像下载
cnpm install echarts -S

引入ECharts

安装好的ECharts会放在node_modules目录下。

全部引入

1.直接在项目代码引入

可以直接在项目代码中 require('echarts') 得到 ECharts。声明一个echarts变量,直接使用变量即可。

Home.vue //需要使用的页面

//引入
var echarts = require('echarts');

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 绘制图表
myChart.setOption({
 title: {
 text: 'ECharts 入门示例'
 },
 tooltip: {},
 xAxis: {
 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
 },
 yAxis: {},
 series: [{
 name: '销量',
 type: 'bar',
 data: [5, 20, 36, 10, 10, 20]
 }]
});

2.全局引入

在mian.js中全局引入,并在vue.prototype属性中添加echarts属性为$echarts,在代码中通过this.$echarts就可以使用了。

main.js

//引入
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Home.vue //需要使用的页面

//基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));

// 绘制图表
myChart.setOption({
 title: {
 text: 'ECharts 入门示例'
 },
 tooltip: {},
 xAxis: {
 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
 },
 yAxis: {},
 series: [{
 name: '销量',
 type: 'bar',
 data: [5, 20, 36, 10, 10, 20]
 }]
});

3.运行结果

vue-cli项目中使用echarts图表实例

按需引入

默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。

如果只用到了柱状图,提示框和标题组件,在引入的时候也只需要引入这些模块,可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

引入之后使用方式和全局引入相同。

1.直接在项目代码引入

Home.vue

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

2.全局引入

main.js

import * as echarts from 'echarts/lib/echarts';
// 引入 echarts 主模块。
import 'echarts/lib/echarts'
// 引入柱形图
import 'echarts/lib/chart/bar'
// 引入柱形图
import 'echarts/lib/chart/pie'
//// 引入提示框组件、标题组件、工具箱、legend组件。
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

Vue.prototype.$echarts =echarts;

注意

问题:

在以上例子中,我们获取dom的方式是通过document.getElementById('main'),也就是元素的id获取到dom的,这其实是会出现问题的。

代码如下

<div id="main"></div>

this.$echarts.init(document.getElementById('main'))

因为vue是单页面应用,如果将以上的组件使用两次,一个页面内id是不允许相同的,就会出现第一个组件正常显示,第二个组件无法显示。

解决办法:

在vue中,我们可以通过另一种方式获取dom,vue有一个$refs的对象,只要将组件注册ref。

代码如下

<div ref="main"></div>

this.$echarts.init(this.$refs.main)
或
this.$echarts.init(this.$refs['main'])

通过以上方法获取dom,无论组件复用多少次,都不需要担心id唯一的问题了。

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
聘任书的写作格式及范文
2014/03/29 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年保送生自荐信
2015/03/24 职场文书
怎么用Python识别手势数字
2021/06/07 Python