ECharts + Flask · 精讲 2026-08-31

ECharts 极速上手 · 三步走

核心流程：下载引入准备容器写 JS 配置

CDN 引入：<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
容器：<div id="myChart" style="width:600px;height:400px;"></div>
初始化：var chart = echarts.init(document.getElementById('myChart'))
配置 option，执行 chart.setOption(option)

示例：柱状图 · 复制代码到html可以直接运行

 <!DOCTYPE html>
<html>
<head>
  <!-- 1. 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 2. 准备容器 -->
  <div id="myChart" style="width: 600px; height: 400px;"></div>
  <script>
    // 3. 初始化
    var chart = echarts.init(document.getElementById('myChart'));
    // 4. 配置 (重点)
    var option = {
      title: { text: '销量统计' },
      xAxis: { data: ['苹果', '香蕉', '橘子'] },
      yAxis: {},
      series: [{ name: '销量', type: 'bar', data: [50, 80, 30] }]
    };
    // 5. 显示图表
    chart.setOption(option);
  </script>
</body>
</html>

改 type: 'line' → 折线图
删 xAxis/yAxis，改 type: 'pie' + 新 data 格式 → 饼图

饼图 · 替换 option

 var option = {
    title: { text: '销量占比' },
    tooltip: {},
    series: [{
        name: '销量',
        type: 'pie',
        radius: '50%',
        data: [
            { value: 50, name: '苹果' },
            { value: 80, name: '香蕉' },
            { value: 30, name: '橘子' }
        ]
    }]
};

Flask · pyecharts 联动

后端生成图表配置，前端用 ECharts 渲染。

后端核心代码

 from flask import Flask, render_template
from pyecharts.charts import Bar
from pyecharts import options as opts

@app.route("/show_pyecharts")
def show_pyecharts():
    bar = (Bar()  # 第3行：创建图表对象    实例化柱状图 这里可以变折线，饼图
           .add_xaxis(["苹果", "香蕉", "橘子"])  # 第5行：设置横轴
           .add_yaxis("销量", [50, 80, 30])  # 第6行：设置y轴
           .set_global_opts(title_opts=opts.TitleOpts(title="水果销量"))
    )
    return render_template("show_pyecharts.html",
                           bar_options=bar.dump_options_with_quotes())

     bar.dump_options_with_quotes() 把图表的“配方”打包成 JSON 字符串，传给模板。
  

     流程可视化 

    后端 Python: bar.dump_options_with_quotes() 
     JSON 字符串 
     模板 {{ bar_options|safe }} 
     ECharts 接收 chart.setOption(option) 
     画出图表！
  

     
    一句话总结

    bar_options = bar.dump_options_with_quotes() 就是把图表的“配方”打包好，通过 render_template() 递交给 HTML 模板，让模板里的 JavaScript 按这个配方把图画出来。

前端模板 (show_pyecharts.html)

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>pyecharts 图表</title>
</head>
<body>
  <div id="chart" style="width:700px;height:400px;"></div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script>
    var chart = echarts.init(document.getElementById('chart'));
    var option = {{ bar_options|safe }};   // 后端传来的 JSON
    chart.setOption(option);
  </script>
</body>
</html>

Flask + MySQL · 动态图表

从数据库查询数据，生成饼图 + 柱状图。

后端：查询 + 生成图表

 def get_pie() -> Pie:
    sql = "select sex,count(1) as cnt from user group by sex"
    datas = db.query_data(sql)
    c = (Pie()
         .add("", [(data['sex'], data['cnt']) for data in datas])
         .set_global_opts(title_opts=opts.TitleOpts(title="Pie-基本示例"))
         .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}")))
    return c

def get_bar() -> Bar:
    sql = "select sex,count(1) as cnt from user group by sex"
    datas = db.query_data(sql)
    c = (Bar()
         .add_xaxis([data['sex'] for data in datas])
         .add_yaxis("数量", [data['cnt'] for data in datas])
         .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题")))
    return c

@app.route("/show_myecharts")
def show_myecharts():
    pie = get_pie()
    bar = get_bar()
    return render_template("show_myecharts.html",
                           pie_options=pie.dump_options_with_quotes(),
                           bar_options=bar.dump_options_with_quotes())

前端：双图显示

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pyecharts 图表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <h1>饼图</h1>
    <div id="pie" style="width:600px;height:400px;"></div>
    <h1>柱状图</h1>
    <div id="bar" style="width:600px;height:400px;"></div>
    <script>
        var pieChart = echarts.init(document.getElementById('pie'));
        var barChart = echarts.init(document.getElementById('bar'));
        pieChart.setOption({{ pie_options | safe }});
        barChart.setOption({{ bar_options | safe }});
    </script>
</body>
</html>