在vue中使用echarts图表实例代码详解


Posted in Javascript onOctober 22, 2018

安装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中使用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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 #Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 #Javascript
You might like
PHP 读取文件的正确方法
2009/04/29 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
个人求职信范文分享
2013/12/13 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
安全教育月活动总结
2014/05/05 职场文书
李敖北大演讲稿
2014/05/24 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python