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
}
- 最后结果,运行app.py,会出现网页链接,点击链接,跳转到浏览器
浏览器网页缩放后的,列表的列没有完全显示:
参考:
如何在Flask中使用Pyecharts实现在单个页面展示多个图表