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 相关文章推荐
js跑马灯代码(自写)
Apr 17 Javascript
jsonp原理及使用
Oct 28 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
js表单验证实例讲解
Mar 31 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php接口与接口引用的深入解析
2013/08/09 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
javascript知识点收藏
2007/02/22 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
简单使用Python自动生成文章
2014/12/25 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
python解析基于xml格式的日志文件
2017/02/25 Python
保险公司年会主持词
2014/03/22 职场文书
合作协议书怎么写
2014/04/18 职场文书
厂区绿化方案
2014/05/08 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
房屋产权证明书
2014/10/15 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
python简单验证码识别的实现过程
2021/06/20 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle