flask 可视化大屏 pycharm社区版

功能与dump_options类似，差异仅在于配置项中的JavaScript占位符处理方式（JsCode 生成的函数带引号，在前后端分离传输数据时使用）。将经过get_options方法处理过的echarts配置项序列化为JSON格式（JsCode 生成的函数不带引号）。导入echarts.min.js，因为我的图里面有词云图，而导入的echarts.min.js好像没有，所以导入echarts-

m0_59676390

470人浏览 · 2023-10-12 20:51:23

m0_59676390 · 2023-10-12 20:51:23 发布

1. pycharm社区版创建flask项目

参考Pycharm社区版创建Flask项目(配置项目文件)

创建项目
下载flask（python解释器）
在根目录下新建static（存放 css、JavaScript、image 等静态资源文件）和templates（存放 HTML文件）文件夹
在 templates 里面创建一个 index.html 文件，在根目录新建app.py文件

创建完成
将pyecharts模板文件复制到templates目录下
模板文件位置：E:\Python-x64\Lib\site-packages\pyecharts\render\templates
或者：E:\Anaconda\anaconda\Lib\site-packages\pyecharts\render\templates

2. 写大屏

使用chart.dump_options()方法给一个flask网页配置多个图表.
app.py:

chart.dump_options： 将经过get_options方法处理过的echarts配置项序列化为JSON格式（JsCode 生成的函数不带引号）。
chart.dump_options_with_quotes： 功能与dump_options类似，差异仅在于配置项中的JavaScript占位符处理方式（JsCode 生成的函数带引号，在前后端分离传输数据时使用）。
来自pyecharts源码解读（11）图表类包charts之包结构及base模块：图表类继承关系、图表基类Base
templates/index.html
导入echarts.min.js，因为我的图里面有词云图，而导入的echarts.min.js好像没有，
所以导入echarts-wordcloud.min.js

<script src="./static/JavaScript/echarts.min.js"></script>
<script src="./static/JavaScript/echarts-wordcloud.min.js"></script>

正文：

<div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:35%; height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。XX是前文的自定义名称
<!--        safe是Jinja2模板语法中的过滤器，用于将变量的值标记为安全的，以避免对HTML进行转义处理。-->
<!--        这样可以确保在渲染HTML模板时，option2变量中的HTML代码能够正确地显示在页面上，而不会被转义为纯文本。-->
        myChart.setOption({{ XX| safe }});

    </script>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main2" style="width:35%; height:500px;"></div>
    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('main2'));

            // 指定图表的配置项和数据，XX是前文的自定义名称
            var option2 = {{ XX| safe }};

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);

    </script>
    ……
    <div id="main10" style="width:35%; height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main10'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({{ XX| safe }});

    </script>
</div>

头部：
jquery.min.js不确定用上没有
布置格式

<head>
    <meta charset="UTF-8">
    <title>XX</title>
    <link rel="stylesheet" type="text/css" href="./static/css/index.css">
    <!--    <script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。-->
    <script src="./static/JavaScript/jquery.min.js"></script>
    <script src="./static/JavaScript/echarts.min.js"></script>
    <script src="./static/JavaScript/echarts-wordcloud.min.js"></script>
</head>

布局
static/css/index.css：

body
{
    background: rgba(137, 190, 138, 0.5)
}

h1
{
    text-align: center
}

#main, #main2, #main3
{
    float: left
}
#main4
{
    float: right
}
#main5, #main6, #main7
{
    float:left
}
#main8, #main9, #main10
{
    float: left
}