在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 String 的扩展方法集合
Jun 01 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
JS如何生成动态列表
Sep 22 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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:风雨欲来 路在何方?
2006/10/09 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php验证码生成代码
2015/11/11 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jquery选择器简述
2015/08/31 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
django之session与分页(实例讲解)
2017/11/13 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python3常用内置方法代码实例
2019/11/18 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
new修饰符是起什么作用
2015/06/28 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
煤矿安全生产月活动总结
2014/07/05 职场文书
白酒营销策划方案
2014/08/17 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
作弊检讨书
2015/01/27 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers