Vue2 使用 Echarts 创建图表实例代码


Posted in Javascript onMay 18, 2017

在后台管理系统中,图表是一个很普遍的元素。目前常用的图标插件有 charts,  Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。

一、安装插件

使用 cnpm 安装 Echarts

cnpm install echarts -S

和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用

通常是在需要使用图表的 .vue 文件中直接引入

import echarts from 'echarts'

也可以在 main.js 中引入,然后修改原型链

Vue.prototype.$echarts = echarts

然后就可以全局使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

二、创建图表

首先需要在 HTML 中创建图表的容器

需要注意的是,图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px

这样确实不够灵活,不过我们可以用 js 来改变 width 和 height,使图表容器能够自适应,具体的实现请往后看

然后在 mounted 中创建图表,具体的配置参考官方文档,这里不再赘述

 三、按需引入

上面引入的 echarts 包含了所有图表,但有时候我们只需要一两个基本图表,这时候完整的 echarts 就显得累赘

假如只需要创建一个饼图,那么可以这么做:

// 引入基本模板
 let echarts = require('echarts/lib/echarts')
 // 引入饼图组件
 require('echarts/lib/chart/pie')
 // 引入提示框和图例组件
 require('echarts/lib/component/tooltip')
 require('echarts/lib/component/legend')

之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全

可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

 四、适应容器

上面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定

为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的 <div class="charts"> 就是这样的外容器

let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')

// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
 myChart.style.width = chartBox.style.width + 'px'
 myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()
   
let mainChart = echarts.init(myChart)
mainChart.setOption(options)

当页面加载的时候,将外容器的宽高,赋给图表容器

但这只是解决了页面加载时的自适应问题

如果在页面加载之后,仍需要图表自适应宽高,就需要用到 echarts 的媒体查询

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
easyUI下拉列表点击事件使用方法
May 18 #Javascript
AngularJS自定义指令之复制指令实现方法
May 18 #Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 #Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 #Javascript
JS验证全角与半角及相互转化的介绍
May 18 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
学生顶撞老师的检讨书
2014/09/17 职场文书