yii2框架切換tab頁時,tab頁中的echart變形問題解決方案
在兩個tab頁中,分別展現了兩個echart圖表,同樣的格式與寫法,但只有在默認選中的tab頁中的圖表顯示的是正常的,
但進入另一個tab頁中時,圖表則產生了變形的問題,如下圖所示:
html代碼
<div id="chart2" style="width: 100%; height:400px;"></div>
<input type="hidden" id="flow_title" value="奇葩天地網">
js代碼
//切換tab頁時調用此方法
function initTable(csrf) {
var temp = new initchart();
temp.resize();
}
//切換tab頁時,方法內調用的方法 用於設置echarts頁面的內容
function initchart() {
var flow_title = $('#flow_title').val();
var chart2 = echarts.init(document.getElementById('chart2'));
var chart2_option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: [flow_title],
selected: {
flow_title: true,
}
},
toolbox: {
show: true,
feature: {
mark: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['2020-04-06','2020-04-07','2020-04-08']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: flow_title,
type: 'line',
stack: '總量',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: ['1','10','100']
}
]
};
//將內容賦值給指定的ID
chart2.setOption(chart2_option, true);
//重新設置指定id的寬高
$(function () {
window.onresize = function () {
chart2.resize();
}
})
this.resize = function size() {
var chart2div = document.getElementById('chart2');
width = 1100;
height = 400;
chart2div.style.width = width + 'px';
chart2div.style.height = height + 'px';
chart2.resize(width, height);
}
}