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 相关文章推荐
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
详细分析Node.js 模块系统
Jun 28 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中遍历stdclass object的实现代码
2011/06/09 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
目前最全的python的就业方向
2018/06/05 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python如何急速下载第三方库详解
2020/11/02 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
毕业典礼主持词大全
2014/03/26 职场文书
图书室标语
2014/06/21 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android