在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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
AngularJS转换响应内容
Jan 27 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
js实现旋转的星空效果
Nov 01 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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 在线打包_支持子目录
2008/06/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
深入探讨前端框架react
2015/12/09 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
python批量下载图片的三种方法
2013/04/22 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
医生自荐信
2013/10/11 职场文书
就业协议书样本
2014/08/20 职场文书
合作协议书范本
2014/10/25 职场文书
违纪学生保证书
2015/02/27 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
外出培训学习心得体会
2016/01/18 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
导游词之南京中山陵
2019/11/27 职场文书