vue-cli项目中使用echarts图表实例


Posted in Javascript onOctober 22, 2018

我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网

现在的前端一般需要完成将大量的数据,实现可视化。现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势。而ECharts和d3.js则是可视化的成熟框架。对于制作的图表可以说是满足你的创造力。

两者相比,D3 它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。

而ECharts图表更加的适合应用,具备华丽的外衣,但很实用。

vue-cli项目中使用echarts图表实例

安装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-cli项目中使用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 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
详解vue中组件参数
2018/07/09 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Openlayers绘制聚合标注
2020/09/28 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
对python中Json与object转化的方法详解
2018/12/31 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
技术总监管理职责范本
2014/03/06 职场文书
论文指导教师评语
2014/04/28 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
施工安全责任书范本
2014/07/24 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
公证委托书标准格式
2014/09/11 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
vue实力踩坑之push当前页无效
2022/04/10 Vue.js