1. 效果展示
2. 需求说明
Echarts绘制完图表之后,需要隐藏左边的内容,并且使右边的Echarts图表全屏显示
3. 项目代码
<template>
<div>
<v-row>
<v-col :cols="coks" v-if="showBtn">
1234
</v-col>
<v-col :cols="12 - coks">
<div id="chart" style="width: 100%; height: 400px"></div>
</v-col>
</v-row>
<v-btn @click="showBtnMethod">隐藏</v-btn>
</div>
</template>
<script>
import * as echarts from "echarts";
var chartDom, myChart, option = null
export default {
data() {
return {
coks: 6,
showBtn: true
}
},
mounted() {
let _this = this;
window.onresize = function () { // 核心代码
myChart.resize();
};
this.huizhi()
},
methods: {
showBtnMethod() {
this.showBtn = !this.showBtn
if (this.showBtn) {
this.coks = 6
} else {
this.coks = 0
}
this.$nextTick(() => {
myChart.resize();
})
},
huizhi() {
chartDom = document.getElementById('chart');
myChart = echarts.init(chartDom);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
],
toolbox: {
show: true, //show为显示工具栏
feature: { //feature里面放的是工具栏元素
dataZoom: { // 控制图表的区域放大 需要鼠标拖拽
yAxisIndex: "none" // yAxisIndex 代表横向放大
//xAxisIndex: "none" // xAxisIndex 代表纵向放大
},
dataView: { // dataView
readOnly: false // readOnly为是否为不可编辑只读状态 true为只读 false为可编辑
},
magicType: { //magicType 为动态类型切换
type: ["line", "bar"] //type为需要切换的类型集合
},
restore: {}, // restore为还原按钮
saveAsImage: {} // saveAsImage下载图片
}
},
};
myChart.setOption(option);
}
}
}
</script>