yii2框架切換tab頁時,tab頁中的echart變形問題解決方案

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

    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章