在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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 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 Switch 语句之学习笔记
2013/09/21 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vue实现登录功能
2020/12/31 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
出国留学自荐信
2013/10/25 职场文书
商超业务员岗位职责
2014/03/12 职场文书
创优争先心得体会
2014/09/11 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
SQL写法--行行比较
2021/08/23 SQL Server
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
MySQL存储过程及语法详解
2022/08/05 MySQL