[Vue五]：vue和echarts结合，echarts图表自适应问题
[Vue五]：vue和echarts结合，echarts图表自适应问题
一、echarts了解
作为一个前端开发人员，对于echarts应该是十分熟悉的，在日常开发中，大多数关于数据的展示是通过图表实现的，而rcharts则是图表展示的首选js库。
二、实现思路
在本例中实现一个页面中按照4x3的布局排列12个echarts折线图，并且每个折线图是通过父组件传值给子组件通过for循环实现的。
二、Vue项目中echarts的实现
1.导入echarts并注册
在当前文件夹下输入命令：
npm i echarts -S
在main.js中导入模块并注册：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.在在components目录新建subcomponents目录存放子组件，并在其下新建SubEcharts.vue组件作为子组件实现echarts绘图和接受父组件的参数：
<template>
<div :id="echartsId" class="echarts"></div>
</template>
<script>
export default {
/**父组件传值 */
props:{
idCode: {
type: Number,
required: true
}
},
/**数据 */
data(){
return{
xAxisData: [1,2,3,4,5,6,7,8,9,10,11,12],
dataTest:[5,9,3,7,8,12,45,25,11,6,9,20],
}
},
/**计算属性 */
computed:{
echartsId(){
return 'echarts' + this.idCode
}
},
/**挂在函数 */
mounted(){
this.drowLine()
},
methods:{
/**绘制折线图 */
drowLine(){
let echarts = this.$echarts.init(document.getElementById(this.echartsId));
let echartsid = document.getElementById(this.echartsId)
echarts.setOption({
backgroundColor:'#000',
title: {
text: 'vue项目中echarts的使用',
textStyle: {
color:'#fff',
fontSize:18,
fontWeight:'bold',
},
subtext:'作者:微信-迟亦早(chiyizao)，csdn-goodlovingz',
subtextStyle: {
color:'#ddd',
},
},
legend:{
bottom:'5%',
textStyle: {
color: '#fff',
fontSize: 12,
},
data: ['测试数据'],
},
tooltip:{
show:true,
trigger: 'axis',
axisPointer: {
type:'cross',
crossStyle:{
color:'#ddd',
},
},
},
grid:{
left:20,
right:20,
top:80,
bottom:20,
containLabel:true,
},
xAxis: {
show:true,
axisLabel:{
interval:1,
rotate:-20,
margin: 30,
textStyle:{
color:'#ddd',
align: 'center'
},
},
axisTick:{
alignWithLabel:true,
lineStyle:{
color:'#ddd',
},
},
data: this.xAxisData,
},
yAxis: [
{
type:'value',
name:'(人/次)',
nameTextStyle:{
color:'#ddd',
},
axisLabel:{
textStyle:{
color:'#ddd',
},
},
axisTick:{
alignWithLabel:true,
lineStyle:{
color:'#ddd',
},
},
splitLine:{
show:false,
},
},
],
series: [
{
type: 'line',
name:'测试',
stack:'人数',
data: this.dataTest,
label: {
normal: {
show:true,
position: 'insideTop',
offset:[0,20],
textStyle:{
color:'#000',
},
},
emphasis: {
textStyle:{
color:'#fff',
},
},
},
},
]
});
}
}
</script>
<style>
.echarts{
width: 100%;
height: 35vh;
background-color: #fff;
margin: 5
}
</style>
在子组件中要注意：子组件中的div映射到父组件中作为一个单独的div，所以要求div的id不能重复，否则所有的echarts图形会绘制在第一个绘图区重叠和覆盖。因此，在子组件中我们对div的id绑定计算属性<div :id="echartsId" class="echarts"></div>，并且将父组件中传进来的数据进行组合形成唯一的id防止重复
/**计算属性 */
computed:{
echartsId(){
return 'echarts' + this.idCode
}
},
子组件中用于绘图的数据都写死了，所以在自己运用时可以通过axios获取数据并整理成绘图的格式传入xAxis:的data和series相应处即可。
3.在components目录下新建EchartsRoot.vue的echarts布局组件，也就是父组件，并在父组件中导入绘图子组件：
<template>
<div class="echartsStyle">
<el-row>
<el-col span="6" v-for="i in 12" :key="i">
<subEcharts
:idCode='i'>
</subEcharts>
</el-col>
</el-row>
</div>
</template>
<script>
import subEcharts from '@/components/subcomponents/SubEcharts'
export default {
components:{
subEcharts
}
}
</script>
<style>
.body{
width: 100%;
height: 100vh;
}
.echartsStyle{
background-color:#000;
width: 100%;
height: 100px;
margin: 10px
}
</style>
运用element-ui的layout布局使用v-for循环将绘图子组件subEcharts包裹起来实现4x3的页面布局,并且传入父组件的数据 i 供子组件的props的 idCode 接收：
<el-col span="6" v-for="i in 12" :key="i">
<subEcharts
:idCode='i'>
</subEcharts>
</el-col>
4.在Home.vue中添加跳转的按钮，跳转到echarts的展示组件EchartsRoot.vue
1）在路由router.js中实现home到echarts展示页面的路由的配置：
import Echarts from '@/components/EchartsRoot.vue'
{
path: '/echarts',
component: Echarts
}
2）在home的template中添加html元素，并在methods中实现跳转的方法：
<el-button type="primary" @click="toEcharts">echarts图表</el-button>
/**跳转到echarts界面 */
toEcharts(){
this.$router.push('/echarts')
}
四、初步效果及问题
到这里已经基本实现了想要的效果，但是当拖动屏幕大小的时候，4x3的布局的每一个echarts图大小不会随着屏幕自动的改变大小对屏幕进行适应，极大的降低了用户的体验。
五、echarts图表对屏幕大小自适应
1、如果一个界面只有一个或者每个echarts图都是单独写方法绘制的，那么进行自适应很简单，只需要调用echarts对象的**resize()**函数即可：
//1.通过id获取html元素，调用echarts的init（）方法进行初始化
let echarts = this.$echarts.init(document.getElementById('html元素id');
//2.在绘图的option完成后或者之前调用window.onresize函数并在其中实现echarts.resize()即可
window.onresize = function () {
echarts.resize()
}
2、对于上例通过v-for循环和父子组建结合，通过复用子组件的方式实现单页面多echarts图的方式这种方法明显行不通。因为在子组件中1方法只局限于当前循环，每个循环结束后子组件就会覆盖resize（）方法，所以当图都加载完以后只有最后一个图能够自适应，其他图的resize（）方法都在循环中一层一层的被覆盖了。
当然也可以按照其他思路实现所有图的自适应：在每一次for循环绘图结束时将此循环中的echarts对象传递到父组件一个数组或者列表中进行存放，当所有图都加载完以后在父组件中分别取出存放的每一个echarts对象调用resize（）函数实现所有echarts图的自适应。（思路是这样的没问题，具体过程没有做！）
本例中采用另外的一种方法实现参考该博客：vue中使用echarts图表自适应的几种基本解决方案：在div上实现类似window的onresize 监听，这样既能实现图表的自适应，也不会因为页面跳转之后无法继续执行页面的onresize 方法！
1）在醒目的assets目录下新建esresize.js文件：
var EleResize = {
_handleResize: function (e) {
var ele = e.target || e.srcElement
var trigger = ele.__resizeTrigger__
if (trigger) {
var handlers = trigger.__z_resizeListeners
if (handlers) {
var size = handlers.length
for (var i = 0; i < size; i++) {
var h = handlers[i]
var handler = h.handler
var context = h.context
handler.apply(context, [e])
}
}
}
},
_removeHandler: function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
var size = handlers.length
for (var i = 0; i < size; i++) {
var h = handlers[i]
if (h.handler === handler && h.context === context) {
handlers.splice(i, 1)
return
}
}
}
},
_createResizeTrigger: function (ele) {
var obj = document.createElement('object')
obj.setAttribute('style',
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
obj.onload = EleResize._handleObjectLoad
obj.type = 'text/html'
ele.appendChild(obj)
obj.data = 'about:blank'
return obj
},
_handleObjectLoad: function (evt) {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
}
}
if (document.attachEvent) { // ie9-10
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (!handlers) {
handlers = []
ele.__z_resizeListeners = handlers
ele.__resizeTrigger__ = ele
ele.attachEvent('onresize', EleResize._handleResize)
}
handlers.push({
handler: handler,
context: context
})
}
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
EleResize._removeHandler(ele, handler, context)
if (handlers.length === 0) {
ele.detachEvent('onresize', EleResize._handleResize)
delete ele.__z_resizeListeners
}
}
}
} else {
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (!handlers) {
handlers = []
ele.__z_resizeListeners = handlers
if (getComputedStyle(ele, null).position === 'static') {
ele.style.position = 'relative'
}
var obj = EleResize._createResizeTrigger(ele)
ele.__resizeTrigger__ = obj
obj.__resizeElement__ = ele
}
handlers.push({
handler: handler,
context: context
})
}
EleResize.off = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (handlers) {
EleResize._removeHandler(ele, handler, context)
if (handlers.length === 0) {
var trigger = ele.__resizeTrigger__
if (trigger) {
trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
ele.removeChild(trigger)
delete ele.__resizeTrigger__
}
delete ele.__z_resizeListeners
}
}
}
}
export {EleResize}
2）在SubEcharts.vue中导入esresize.js
import {EleResize} from '../../assets/esresize.js'
3）在SubEcharts.vue的绘图方法中，首先获取html的div元素，然后调用esresize.js的.on()方法：
/**绘制折线图 */
drowLine(){
let echarts = this.$echarts.init(document.getElementById(this.echartsId));
let echartsid = document.getElementById(this.echartsId)
echarts.setOption({
代码省略·····
});
let listener = function(){
echarts.resize()
}
EleResize.on(echartsid,listener)
},
至此，实现了多个方法不会覆盖的echarts图的自适应功能，效果图如下：
欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程
前往低代码交流专区
更多推荐
21
0- 0
已为社区贡献2条内容
所有评论(0)