在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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
公众号SVG动画交互实战代码
May 31 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP三元运算符的结合性介绍
2012/01/10 PHP
php 保留字列表
2012/10/04 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
Js的MessageBox
2006/12/03 Javascript
浅说js变量
2011/05/25 Javascript
javascript动画浅析
2012/08/30 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
python创建线程示例
2014/05/06 Python
python配置grpc环境
2019/01/01 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Java的for语句中break, continue和return的区别
2013/12/19 面试题
12岁生日感言
2014/01/21 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
学生检讨书如何写
2014/10/30 职场文书
庆祝教师节主持词
2015/07/06 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书