echarts 图标自适应 resize问题

YJ_0518

已于 2024-01-16 10:34:50 修改

阅读量521

点赞数

分类专栏： js echarts 文章标签： js vue echarts

于 2021-07-13 10:06:01 首次发布

本文链接：https://blog.csdn.net/weixin_45606890/article/details/118692945

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

原生js使用echarts自适应问题

1.页面中只有一个echarts图标自适应

// echarts图表渲染
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};
var myChart= echarts.init(document.getElementById("chart"));
myChart.setOption(option);
setTimeout(function() {
	window.onresize = function() {
 		myChart.resize()
	}
}, 200)

2.页面中有多个echarts图标需要根据页面自适应

//定义echarts数组
var chartList = [];

// echarts图表渲染
var option1 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};
var echartInstance = echarts.init(document.getElementById("chart"));
echartInstance.setOption(option1);

//往数组中push echarts实例
chartList.push(echartInstance);
//调用chartResize函数，可实现页面自适应
chartResize();

function chartResize() {
    window.onresize = function () {
        for (var i = 0; i < chartList.length; i++) {
            chartList[i].resize();
        }
    };
}