当前位置: 首页>前端>正文

pycharm里用gensim LDA可视化结果渲染到网页 pycharm数据可视化展示

1. pycharm社区版创建flask项目

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

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

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

2. 写大屏

  1. 使用chart.dump_options()方法给一个flask网页配置多个图表.
    app.py:
  2. pycharm里用gensim LDA可视化结果渲染到网页 pycharm数据可视化展示,pycharm里用gensim LDA可视化结果渲染到网页 pycharm数据可视化展示_flask,第1张

  3. chart.dump_options: 将经过get_options方法处理过的echarts配置项序列化为JSON格式(JsCode 生成的函数不带引号)。
    chart.dump_options_with_quotes: 功能与dump_options类似,差异仅在于配置项中的JavaScript占位符处理方式(JsCode 生成的函数带引号,在前后端分离传输数据时使用)。
    来自pyecharts源码解读(11)图表类包charts之包结构及base模块:图表类继承关系、图表基类Base
  4. 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
}
  1. 最后结果,运行app.py,会出现网页链接,点击链接,跳转到浏览器

    浏览器网页缩放后的,列表的列没有完全显示:

    参考:
    如何在Flask中使用Pyecharts实现在单个页面展示多个图表



https://www.xamrdz.com/web/2rz1964424.html

相关文章: