在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 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Javascript的一种模块模式
Sep 08 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
Vue.use源码分析
Apr 22 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
javascript中的数据类型检测方法详解
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时间戳与日期的转换
2013/06/06 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP的全局错误处理详解
2016/04/25 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python实现rsa加密实例详解
2017/07/19 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python:接口间数据传递与调用方法
2018/12/17 Python
使用python绘制二维图形示例
2019/11/22 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
化学教师教学反思
2014/01/17 职场文书
校园安全检查制度
2014/02/03 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
就业意向书
2014/07/29 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书