echarts实现图表响应式改变大小，随浏览器宽度变化

最新推荐文章于 2024-09-09 14:46:42 发布

holden丶

最新推荐文章于 2024-09-09 14:46:42 发布

阅读量5.8k

点赞数 11

分类专栏：前端文章标签： echarts javascript 前端 css 交互

本文链接：https://blog.csdn.net/dddhl_/article/details/122394075

版权

前端专栏收录该内容

22 篇文章 13 订阅

订阅专栏

echarts图表响应式

需求分析
一、效果展示
二、步骤
三、完整代码
四、可能遇到的问题

需求分析

两个echarts图表并排，当浏览器宽度发生变化时，图表动态变化，当宽度很小容纳不下两张表时，切换成上下排布

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

缩小后图能正常显示和使用
在这里插入图片描述

二、步骤

1.引入echarts库

这里引入的是本地文件

<script src="echarts.js"></script>

2.随便画两张图片

在echarst库中随便选了两张图。官网链接
在这里插入图片描述

3.布局

（1）一个父元素div，两个div子元素作图的容器

<div id="echarts">
	<div id="first">1</div>
	<div id="second">2</div>
</div>

（2）css（使用百分比宽度）

百分比能让容器随浏览器大小改变；使用媒体查询检测浏览器大小，957px是图最大的尺寸。
浏览器宽度小于957px时，把图片宽度改957px，这时图片一行放不下自动换行。变成上下布局

#echarts{
	display: flex;
	flex-wrap:wrap;
	width: 100%;
	justify-content:space-around;
}
#first{
	width: 48%;
	height: 600px;
	display: inline-block; 
	box-shadow: 1px 1px 10px #888888;
	border-radius: 30px;   
	margin-top: 20px;
}
#second{
	width: 48%;
	height: 600px;
	display: inline-block;  
	border-radius: 30px;   
	box-shadow: 1px 1px 10px #888888;  
	margin-top: 20px;
}
@media screen and (max-width:957px){
	#first{
		width: 957px;
	}
	#second{
		width: 957px;
	}
}

（3）js监测浏览器宽度，重新绘图

两个echarts图根据当前容器大小重新渲染图

//动态修改图大小
window.onresize = function() {
	myChart1.resize();
	myChart.resize();
};

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts响应式</title>
    <script src="echarts.js"></script>
    <style>
        #echarts{
            display: flex;
            flex-wrap:wrap;
            width: 100%;
            justify-content:space-around;
        }
        #first{
            width: 48%;
            height: 600px;
            display: inline-block; 
            box-shadow: 1px 1px 10px #888888;
            border-radius: 30px;   
            margin-top: 20px;
        }
        #second{
            width: 48%;
            height: 600px;
            display: inline-block;  
            border-radius: 30px;   
            box-shadow: 1px 1px 10px #888888;  
            margin-top: 20px;
        }
        @media screen and (max-width:957px){
            #first{
                width: 957px;
            }
            #second{
                width: 957px;
            }
        }
    </style>
</head>
<body>
    <div id="echarts">
        <div id="first">1</div>
        <div id="second">2</div>
    </div>

    <script>
        //动态修改图大小
        window.onresize = function() {
            myChart1.resize();
            myChart.resize();
        };
        var chartDom = document.getElementById('first');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
            }
        ]
        };
        option && myChart.setOption(option);

        var chartDom = document.getElementById('second');
        var myChart1 = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
            }
        ]
        };

        option && myChart1.setOption(option);

    </script>
</body>
</html>