echarts实现图表响应式改变大小，随浏览器宽度变化
两个echarts图表并排，当浏览器宽度发生变化时，图表动态变化，当宽度很小容纳不下两张表时，切换成上下排布
·
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>
四、可能遇到的问题
如果页面有切换器，点击切换图时，需要使用myChart.resize();重新绘制一下图
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)