在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 相关文章推荐
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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手册及PHP编程标准
2006/12/17 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python实现全排列的打印
2018/08/18 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python能做什么
2020/06/02 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
2015年党员自评材料
2014/12/17 职场文书
义诊活动通知
2015/04/24 职场文书
五年级作文之成长
2019/09/16 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
nginx安装以及配置的详细过程记录
2021/09/15 Servers
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技