解决vue iview UI 侧边导航折叠时,echarts图表组件不会自适应页面宽度的问题
iview UI 侧边栏折叠,echarts图表动态适应页面宽度
只能算是基本实现了,希望能帮助到有需要的人,网上搜了,也没有特别好的解决方法,也许是我太菜吧,还有就是不知道会不会导致内存问题,用在生产环境中时,请一定多多测试,若有更好的方法 ,希望能一起交流…上代码;
//main.vue
<span @click="collapsedSider"
class=" inv-admin-layout-header-trigger inv-admin-layout-header-min">
<Icon style="vertical-align: -0.145em;"
:style="{transform: 'rotateZ(' + (isCollapsede ? '-90' : '0') + 'deg)'}" type="md-menu" size="18" />
</span>
```javascript
<script>
export default {
data() {
return {
isCollapsede: false, //折叠
}
},
methods: {
//折叠
collapsedSider() {
this.isCollapsede = !this.isCollapsede;
this.$store.commit('setCollapsede',this.isCollapsede);
},
}
}
</script>
//vuex
const app = {
state: {
isCollapsed: false,
},
mutations: {
setCollapsede (state, value) {
state.isCollapsed = value;
}
}
};
export default app;
// 下面是图表组件 ,–可直接复制拿来用.
.只要折叠按钮触发,图表就会重绘.
<template>
<div ref="myChart" :style="style"></div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
myChart: null,
option: {
}
}
},
props: {
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "100%"
},
xAxis: {
type: Array,
},
totalNum: {
type: Array,
},
intactRate: {
type: Array,
},
chartTitle: {
type: String
},
legendArray: {
type: Array
}
},
computed: {
style() {
return {
height: this.height,
width: this.width
};
},
isCollapsede() {
return this.$store.state.app.isCollapsed;
},
},
watch: {
totalNum(val) {
this.initChart();
},
isCollapsede() {
setTimeout(() => {
this.myChart.resize();
}, 400)
}
},
methods: {
initChart() {
this.myChart = echarts.getInstanceByDom(this.$refs.myChart)
if (!this.myChart) {
this.myChart = echarts.init(this.$refs.myChart)
}
this.option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}
{a1}: {c1}%',
},
legend: {
data: this.legendArray,
x: "center",
textStyle: {
fontStyle: 'normal',
fontSize: 12,
}
},
grid: {
left: '3%',
right: '1%',
top: '45',
bottom: '3%',
containLabel: true,
},
xAxis: [{
type: 'category',
axisPointer: {
type: "shadow"
},
axisLine: {
lineStyle: {
color: '#009688',//x轴线宽与颜色
width: '2'
},
},
axisLabel: {
textStyle: {
color: '#333' //x轴字体
}
},
data: this.xAxis
}],
yAxis: [
{
type: 'value',
name: "数量",
axisLine: {
lineStyle: {
color: '#009688',//y轴左侧线宽与颜色
width: '2'
},
},
axisLabel: {
textStyle: {
color: '#333' //y轴左侧字体
},
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
color: '#f5f5f5',//背景横线
}
},
},
{
type: 'value',
name: "百分比",
min: '0',
max: '100',
axisLine: {
lineStyle: {
color: '#009688',//y轴右侧线宽与颜色
width: '2'
},
},
axisLabel: {
textStyle: {
color: '#333' //y轴右侧字体
},
formatter: '{value} %'
},
splitLine: {
show: false,
lineStyle: {
color: '#f5f5f5',//背景横线
}
},
},
],
series: [
{
name: this.legendArray[0].name,
type: "bar",
barWidth: 37,
showAllSymbol: true,
smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
barBorderRadius: [2, 2, 0, 0],
color: '#009688',
label: {
show: true,
position: "top",
}
}
},
data: this.totalNum
},
{
name: this.legendArray[1].name,
type: 'line',
showAllSymbol: true,
smooth: true,
symbol: 'circle',
symbolSize: 10,
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#d87a80',
label: {
show: true,
position: "top",
}
}
},
data: this.intactRate
}
]
};
this.myChart.setOption(this.option, true);
window.addEventListener("resize", this.myChart.resize);
this.myChart.resize();
},
},
mounted() {
this.$nextTick(function () {
this.initChart();
});
}
}
</script>