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);
}
}