处理在多个echarts图表下 resize()方法只生效一个

最新推荐文章于 2023-06-13 10:22:54 发布

小城听风雨

最新推荐文章于 2023-06-13 10:22:54 发布

阅读量4.2k

点赞数 9

分类专栏： Echarts图表文章标签：处理在多个echarts图表下 resize()方法只生效一个

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a5252145/article/details/96480032

版权

Echarts图表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

处理在多个echarts图表下 resize()方法只生效一个

在使用window.onresize监听窗口变化时，要使用DOM二级绑定方式：addEventListener方式。

之前代码：

// 折线
var brokenLine = echarts.init(document.getElementById('brokenLine'),'macarons');
option = {
    title: {
        text: '折线图'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['1']
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true  // true为曲线 false为直线
    }],
    grid: {
        x: 80,
        y: 60,
        x2:40,
        y2:40
    }
};
brokenLine.setOption(option);
//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可
window.onresize = function () {
    brokenLine.resize();
}

因为采用DOM一级绑定方式会只适应一个图表，所以最后三行代码要变成addEventListener方式监听：

// 折线
var brokenLine = echarts.init(document.getElementById('brokenLine'),'macarons');
 option = {
     title: {
         text: '折线图'
     },
     tooltip : {
         trigger: 'axis',
         axisPointer: {
             type: 'cross',
             label: {
                 backgroundColor: '#6a7985'
             }
         }
     },
     legend: {
         data:['1']
     },
     xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
         type: 'value'
     },
     series: [{
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line',
         smooth: true  // true为曲线 false为直线
     }],
     grid: {
         x: 80,
         y: 60,
         x2:40,
         y2:40
     }
 };
 brokenLine.setOption(option);
 //假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可
 // window.onresize = function () {
 //     brokenLine.resize();
 // }
 window.addEventListener("resize",()=>{
     brokenLine.resize();
 });