有人遇到這樣的情況嗎？echarts 全屏的時候會自適應大小，但是當退出全屏的時候就不會自適應大小了
第一張圖片是剛重繪之后，第二張是退出全屏，最后一張是全屏，代碼在最后
<template>
<div style="height: 100%;width: 100%">
<div id="Histogram" style="height: 100%;width: 100%"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "public",
data() {
return {}
},
mounted(){this.Histogram()},
methods: {
Histogram(){
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['優質臺區', '健康臺區', '待挖潛臺區', '待優化臺區'],
axisTick: {
alignWithLabel: true
},
//設定坐標軸字體顏色和寬度
axisLine: { //這是x軸文字顏色
lineStyle: {
color: '#fff',
}
}
}
],
yAxis: [
{
type: 'value',
min: 0,
interval: 50,
//splitArea : {show : false}, //去除網格區域
//去除網格線
splitLine:{
lineStyle: {
//灰色
color:'gray',
type: 'dashed'
}
},
//設定坐標軸字體顏色和寬度
axisLine: {//這是y軸文字顏色
lineStyle: {
color: '#fff',
}
}
}
],
series: [
{
name: '數量',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#80FFFF','#8080FF','#70B603','#63F3AE'
];
return colorList[params.dataIndex]
},
label: {
show: true, //開啟顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'white',
fontSize: 16
}
}
}
},
}
]
};
const loadChart = echarts.init(document.getElementById('Histogram'));
loadChart.setOption(option);
window.onresize = loadChart.resize;
/* $(window).resize(function() {//這是能夠讓圖表自適應的代碼
loadChart.resize();
});*/
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10645.html
標籤：JavaScript