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判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript函数详解
Nov 17 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
javscript 数组扁平化的实现
Feb 03 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数据类型判断函数有哪些
2013/09/23 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php排序算法实例分析
2016/10/17 PHP
js自带函数备忘 数组
2006/12/29 Javascript
FireFox中textNode分片的问题
2007/04/10 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
实习自荐信
2013/10/13 职场文书
课程设计心得体会
2013/12/28 职场文书
承诺书格式
2014/06/03 职场文书
美术专业自荐信
2014/07/07 职场文书
建议书格式
2015/02/04 职场文书
合作协议书格式范本
2016/03/21 职场文书