在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 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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 url 加密解密函数代码
2011/08/26 PHP
理解PHP中的stdClass类
2014/04/18 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python爬虫要用到的库总结
2020/07/28 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
大学生党课思想汇报
2013/12/29 职场文书
职工运动会邀请函
2014/02/02 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
商务英语求职信范文
2015/03/19 职场文书