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 相关文章推荐
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
vue ssr 指南详读
Jun 29 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
Vue数据双向绑定原理实例解析
May 15 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
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php简单实现数组分页的方法
2016/04/30 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
python创建和删除目录的方法
2015/04/29 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python logging模块原理解析及应用
2020/08/13 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
商务英语专业求职信范文
2014/01/28 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
护士自荐信范文
2015/03/25 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
房屋产权证明书
2015/06/19 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python