echarts图表自适应resize用法

最新推荐文章于 2024-06-01 10:47:21 发布

茹LYR

最新推荐文章于 2024-06-01 10:47:21 发布

阅读量1.2w

点赞数 6

分类专栏： Echarts JS 文章标签： echarts 自适应 resize 图表

本文链接：https://blog.csdn.net/qq_43155489/article/details/100073012

版权

JS 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

Echarts

1 篇文章 1 订阅

订阅专栏

单个图表

  window.onresize = myChart.resize;

可以完成自适应，就是把window的onresize事件赋值为echart的resize事件。
2. 多个图表（也可用于单个图表）

 window.onresize = function () {
        myChart.resize();
        myChart1.resize();
    }
    window.addEventListener("resize", () => {
        this.myChart.resize();
        this.myChart1.resize();
    });

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<div id="main1" style="width: 100%;height:400px;"></div>
</body>
<script src="../frames/ECharts/echarts.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById('main1'));
    var option1 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    
   //window.onresize = myChart.resize; //单个图表
   // 下面两种可用于多个图表和单个图表
    window.onresize = function () {
        myChart.resize();
        myChart1.resize();
    }
    //window.addEventListener("resize", () => {
        //this.myChart.resize();
       //this.myChart1.resize();
    //});
</script>
</html>

茹LYR

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
echarts图表自适应resize用法

单个图表 window.onresize = myChart.resize;可以完成自适应，就是把window的onresize事件赋值为echart的resize事件。2. 多个图表（也可用于单个图表） window.onresize = function () { myChart.resize(); myChart1.resize(); ...
复制链接

扫一扫