1.當發現調整窗口大小時，插入到頁面中的Echarts圖不會實時更新。如下：
原圖：
2.當縮小瀏覽器后現象為：（很顯然沒有實現自適應）
3.成功示例代碼：
var myChart4 = echarts.init(document.getElementById('view4'));
// 指定圖表的配置項和數據
var option4 = {
title: {
show:true,
text: '┃趨勢圖',
// subtext:'測試', //副標題
left:70,
// borderColor:'red', //邊框顏色
// borderWidth:1, //邊框的寬度
},
//工具箱組件
toolbox:{
show:true,
feature:{
dataView:{
show:true
},
restore:{
show:true
},
dataZoom:{ //核心代碼
show:true
},
saveAsImage:{
show:true
},
magicType:{
type:['line','bar']
}
}
},
tooltip: {
trigger:'axis' //彈窗組件
},
legend: {
data:['評論量(QTY)']
},
xAxis: {
data: ["00:00","03:00","06:00","09:00","12:00","15:00","18:00","21:00"]
},
yAxis: {
},
series: [{
name: '評論量(QTY)',
type: 'line',
data: [15, 20, 25, 18, 17, 21,12,18],
markPoint:{ //設置最大值和最小值顯示
data:[
{type:'max',name:'最大值',symbolSize:'35'},
{type:'min',name:'最小值',symbolSize:'35'}
]
},
itemStyle:{
normal:{
color:'#5CACEE'
}
},
markLine:{ //顯示平均水平線
data:[
{type:'average', name:'平均值'}
]
}
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart4.setOption(option4);
//全局設置Echrts - 根據窗口的大小變動圖表
window.onresize = function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
}
4.核心代碼：
//全局設置Echrts - 根據窗口的大小變動圖表
window.onresize = function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
}
注意：在html要把echart寬度變成百分數。