在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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
React如何避免重渲染
Apr 10 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Django的models模型的具体使用
2019/07/15 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python 字符串池化的前提
2020/07/03 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
python 高阶函数简单介绍
2021/02/19 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
财务会计自荐信范文
2014/02/21 职场文书
结婚周年感言
2014/02/24 职场文书
国企干部对照检查材料
2014/08/22 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
上班迟到检讨书
2015/05/06 职场文书