echarts图表超出了容器大小，具体该怎么操作

我这个echarts的图太大了，超过了容器的大小，你们可否看看如何具体的修改，本人菜j，十分感谢

<!DOCTYPE html>
<html>
<head>
    <title>全国疫情实时追踪</title>
    <style>
        body {
            background-color: #000000;
            color: #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h1 {
            margin-bottom: 20px;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            width: 50%;
            margin-bottom: 20px;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 10px;
            width: 100%;
            height: 80vh;
        }
        .item {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item:nth-child(2) {
            grid-row: span 2;
        }
        iframe {
            width: 100%;
            height: 100%;
        }
        .time {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #ccc;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <h1>全国疫情实时追踪</h1>
    <div class="stats">
        <p>确诊人数: {{ confirmed }}</p>
        <p>死亡人数: {{ deaths }}</p>
        <p>治愈人数: {{ recovered }}</p>
    </div>
    <div class="container">
        <div class="item">
            <iframe src="{{ url_for('static', filename=charts[0]) }}" frameborder="0"></iframe>
        </div>
        <div class="item">
            <iframe src="{{ url_for('static', filename=charts[1]) }}" frameborder="0"></iframe>
        </div>
        <div class="item">
            <iframe src="{{ url_for('static', filename=charts[2]) }}" frameborder="0"></iframe>
        </div>
        <div class="item">
            <iframe src="{{ url_for('static', filename=charts[3]) }}" frameborder="0"></iframe>
        </div>
        <div class="item">
            <iframe src="{{ url_for('static', filename=charts[4]) }}" frameborder="0"></iframe>
        </div>
    </div>
    <div class="time" id="time"></div>
    <script>
        function updateTime() {
            const now = new Date();
            const timeElement = document.getElementById('time');
            timeElement.textContent = now.toLocaleTimeString();
        }
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>




```python
from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def home():
    # 使用数据
    confirmed = 9506895
    deaths = 31509
    recovered = 468612
    time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    charts = ["chart1.html", "chart2.html", "chart3.html", "chart4.html", "chart5.html"]
    return render_template('index.html', confirmed=confirmed, deaths=deaths, recovered=recovered, time=time, charts=charts)

if __name__ == '__main__':
    app.run(debug=True)

这是五张图的其中一张

```python
import pandas as pd
from pyecharts import options as opts
from pyecharts.charts import Line
from pyecharts.globals import ThemeType

# Load the data
data = pd.read_csv(r'C:\Users\86188\AppData\Local\Programs\Common\chinaDayList.csv')

# Create the line chart
line = (
    Line(init_opts=opts.InitOpts(theme=ThemeType.DARK))
    .add_xaxis(data['date'].tolist())
    .add_yaxis("Confirmed", data['confirm'].tolist(), linestyle_opts=opts.LineStyleOpts(color="#ff0000"))
    .add_yaxis("Deaths", data['dead'].tolist(), linestyle_opts=opts.LineStyleOpts(color="#00ff00"))
    .add_yaxis("Recoveries", data['heal'].tolist(), linestyle_opts=opts.LineStyleOpts(color="#0000ff"))
    .set_global_opts(title_opts=opts.TitleOpts(title="Epidemic Trend Chart", top=20, left="center", textstyle_opts=opts.TextStyleOpts(color="#ccc")),
                     tooltip_opts=opts.TooltipOpts(trigger="axis"),
                     legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="#ccc")),
                     xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False, axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="#ccc"))),
                     yaxis_opts=opts.AxisOpts(type_="value", axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="#ccc"))))
)

# Render the chart to an HTML file
line.render('chart.html')

print("HTML file has been generated.")

``````

指定宽度width为100%，要不默认900px，iframe宽度不够就会出现滚动条了

# Create the line chart
line = (
    Line(init_opts=opts.InitOpts(theme=ThemeType.DARK,width="100%"))

不过高度不好定，因为iframe高度不定，不同电脑分辨率不同会导致高度不一样，没法指定height。一定要自适应高度，可以改chart1.html~chart5.html，增加下面的样式即可自适应高度宽度

    <style>
        html,body{margin:0;height:100%;width:100%}
        body>div{height:100%!important;width:100%!important}
    </style>

给echarts 图标容器设置一个宽度即可

这是最终的表现形式

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7628781
  • 这篇博客你也可以参考下：echarts如何画一个空心的饼图
  • 除此之外, 这篇博客: 大数据可视化项目Echarts图表中的 然后就可以通过 echarts.init 方法初始化一个 echarts 实例 并通过 setOption 方法生成一个简单的柱状图，下面是完整代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <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);
    </script>
</body>
</html>
  • 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
  • 以下回答来自chatgpt:

    如果echarts图表超出了容器的大小，可以按照以下步骤来进行调整：

    1. 首先，确保已经引入了echarts的js库。如果没有的话，可以在echarts官网上下载并引入对应版本的js文件。

    2. 确定静态文件目录，即static目录。在settings.py文件中添加以下配置：

    STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
    1. 创建echarts图表的容器，并在页面中引入对应的js文件。在index.html文件中添加以下代码：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts图表调整</title>
    <script type="text/javascript" src="/static/js/echarts.js"></script>
</head>
<body>
    <div id="chartContainer" style="width: 600px; height: 400px;"></div>
</body>
</html>

    在上面的代码中，我们创建了一个宽度为600px，高度为400px的容器，并引入了echarts.js文件。

    1. 编写JavaScript代码，设置echarts图表的配置项和数据，并将图表渲染到容器中。可以在script标签中添加以下代码：
    <script>
    var myChart = echarts.init(document.getElementById('chartContainer'));

    var option = {
        // 设置图表配置项
        // ...
        // 设置图表数据
        // ...
    }

    myChart.setOption(option);
</script>

    在上面的代码中，我们使用echarts.init方法将图表渲染到id为"chartContainer"的容器中，并设置了对应的配置项和数据。

    1. 根据实际需求进行配置项和数据的设置。具体的配置项和数据设置可以参考参考资料中的示例代码，根据自己的需求进行修改和调整。

    通过以上步骤，我们可以将echarts图表调整到容器的大小，实现可视化展示。如果在具体的配置和数据设置中遇到问题，可以参考官方文档或向其他开发者寻求帮助。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^