图表的自适应chart.resize()
有时候会遇到屏幕宽度在变化,而echarts的图表保持原宽度不变的情况:
只需要在图表数据初始化函数之后,再resize()下就可以了。
代码示例:
<div class="chart_box">
<div id="twChart" class="twChart"></div>
</div>
<script>
$(function(){
option = {
title: {
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['反馈','已审核','已上报']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月','2月','3月','4月','5月']
},
yAxis: {
type: 'value'
},
series: [
{
name:'反馈',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90]
},
{
name:'已审核',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290]
},
{
name:'已上报',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190]
}
]
};
var twChart = echarts.init(document.getElementById('twChart'));
twChart.setOption(option);
setTimeout(function (){
window.onresize = function () {
twChart.resize();
}
},200)
})
</script>
图表就可以自适应了
谢谢c友们的纠正,多个图表的问题还在研究中……