在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引用对象的方法代码
Aug 13 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
javascript局部自定义鼠标右键菜单
Dec 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
dedecms模版制作使用方法
2007/04/03 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php实现中文转数字
2016/02/18 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python中 logging的使用详解
2017/10/25 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
详解python logging日志传输
2020/07/01 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
高中升旗仪式演讲稿
2014/09/09 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
义诊活动通知
2015/04/24 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
导游词之广西漓江
2019/11/02 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
再谈python_tkinter弹出对话框创建
2022/03/20 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL