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宽度变成百分数。