仙僧异童,杨蕊蕾,自我保护
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 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 必须把路径写全
可以按需引入的模块列表见
四、适应容器
上面说过，图表的容器必须固定宽高，这确实是一个比较反人类的设定
为了解决这个问题，需要给图表容器外面再加一个容器，而这个外容器的宽高可以适应页面。上面的 <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 的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论