asp.net 调用echarts显示图表控件随浏览器自适应解决方案

1、问题来源
        我们在asp.net开发中常使用到frameset的框架结构，比如上左中右方式，在中间部分是一个可以控制左侧部分显示隐藏的功能，这时右边内容区域如果有使用echarts进行图表显示时，就会出现不能随浏览器自适应，我们该如何做呢？

2、解决方法
        需要在生成图表的js方法中增加一个定时器，当浏览器窗口发生大小改变时，触发chart图表控件同时改变大小，核心代码如下：
       setTimeout(function () {
                 window.onresize = function () {
                           myChart.resize();
               }
       }, 200);

全部代码类似如下：（这里myChart是定义图表的名称，我们要使用到）
<script type="text/javascript">

function ShowMonthChart() {
var myChart = echarts.init(document.getElementById('monthChart'));
try {
myChart.setOption({
title: {
text: '当年总用电走势图',
x: 'center',
textStyle: { fontWeight: 'normal' }
},
tooltip: {
trigger: 'axis',
formatter: function (a, b, c) {
var result = "";
result += a[0].name + '月: </br>';
for (var i = 0; i < a.length; i++) {
result += a[i].seriesName + ": " + a[i].value + '<%=EngeryUnit%>' + '</br>';
}
return result;
},
textStyle: {
fontSize: 12
}
},
legend: {
data: ['去年总用电', '今年总用电'],
y: 'bottom'
},
dataZoom: {
show: false
},
grid: {
x: 100,
y: 30,
x2: 30,
y2: 60
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: false },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [<%=xCategory%>],
axisLabel: {
formatter: '{value}月'
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
name: '单位：<%=EngeryUnit%>',
nameLocation: 'end',
nameTextStyle: {
color: '#000000000'
}
}
],
series: [
{
name: '去年总用电',
type: 'line',
smooth: true,
data: [<%=lastDataSeries%>]
},
{
name: '今年总用电',
type: 'line',
smooth: true,
data: [<%=curDataSeries%>]
}
]
});
}
catch (e) {
}

//解决echarts图表不随浏览器缩放而自适应改变大小
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200);
}
</script>

3、实际效果图




===========================================================================如果觉得对您有帮助，微信扫一扫支持一下：