前言
继前文Python在PyQt5中使用ECharts绘制图表中在Python程序中添加网页展示ECharts图表,和Python使用QWebEngineView时报错Uncaught ReferenceError的解决中解决页面加载过慢的问题之后,又遇到了新的问题,那就是QWebEngineView加载的页面右键会有一个reload功能,即重新加载页面,重新加载后问题就出现了,它加载的是原网页,需要通过runJavaScript重新修改option里的内容,这不够理想。于是采取新的策略,将原来写的HTML当做模板,获取数据后根据模板并将数据写入生成新的HTML文件,再加载到QWebEngineView里,这样随便怎么刷新都不会没有数据,顶多是先前的视角缩放什么的会重置,但无伤大雅。
简介
Jinja是Python下一个广泛应用的、快速、富有表现力、可扩展的模板引擎,设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能。
使用
- 新建一个临时文件夹存放生成的生成的HTML
import os
if not os.path.exists("temp"):
os.mkdir("temp")
Python有专门生成临时文件夹或文件的库,叫tempfile ,但由于HTML里导入文件的路径问题放弃使用了,如:
import tempfile
temp_folder = tempfile.mkdtemp()
file_name = "file_name.html"
with open(os.path.join(temp_folder, file_name), "w") as file_out:
pass
- 修改HTML文件为模板
仍然以最初文章中雷达图为例,将需要替换的内容用{{ }}标识出: 这里就摘出关键部分
<script type="text/javascript">
let option = {
radar: {
shape: 'circle',
indicator: [
{ name: 'A', max: 100},
{ name: 'B', max: 100},
{ name: 'C', max: 100},
{ name: 'D', max: 100}
]
},
series: [{
type: 'radar',
data: [
{
value: {{ temp_value }}
areaColor: "rgba(151,181,215,0.6)",
areaStyle: "color",
label: {
show: true,
formatter: function (params) {
return params.value
}
}
}
]
}]
};
</script>
除此之外还有个很重要的地方,就是HTML导入echarts.js的路径也要注意,因为上面临时文件夹是新创建的空文件夹,里面没有也不应该有别的文件,所以echarts.js不会和生成的HTML文件在一起,也就是这里导入的路径需要修改为echarts.js的实际路径,仍然是通过模板来替换。
<script src="{{ temp_echarts }}"></script>
- 载入模板
import Environment, FileSystemLoader
temp_path = os,path.join(os.path.dirname(os.path.abspath(__file__)), "templates") // 获取根目录并拼接,更可靠
env = Environment(loader=FileSystemLoader("templates")
template = env.get_template("template_echarts_radar.html")
- 获取数据,略
- 写入数据,生成文件并载入
file_path = "temp/radar.html"
with open(file_path, "w", encoding="utf-8") as file_out:
html_content = template.render(
temp_echarts = "../***/echarts.js",
temp_value = [1, 2, 3, 4]
)
file_out.write(html_content)
radar_view.load(QUrl("file:///" + file_path)
——终——
|