背景
本主在最初接触可视化的时候,也尝试着echarts,但是当时有人在开发pyecharts库,且其没有系统化的实施方案,尤其是导出图片功能。这几天,看到各大号在宣传Echarts5,看了看,还是有惊喜的地方。接下来尝试使用jinja2、bootstrap实现echarts官方示例的展示。对于有Django、Flask基础的道友,下面的代码可以拿来即用(简单修改)。
yeayee:蹭一蹭Echarts5的热度,用Python jinja2实现渲染zhuanlan.zhihu.com
本期实现:
1.采用黑色背景;
2.使用jinja2的Template函数渲染JS;
Talk is cheap...
代码01-实现魅惑黑背景
import os
import jinja2
from jinja2 import Template
import webbrowser
# 加载基础模板
path = os.getcwd().replace("\\", "/")
base_temp_path = '/templates/base_flask_tmp.html'
base_temp_fullpath = path+base_temp_path
env = jinja2.Environment(loader=jinja2.FileSystemLoader(path))
base_temp = env.get_template(base_temp_path)
# 图像数据组
# 构造all_div
#
all_div='''
# 构造all_js
all_js=''''''
# jinja2 渲染模板
temp_out = base_temp.render(all_div=all_div,all_js=all_js)
# 保存
temp_out_name = '/templates/ex_006_line03.html'
with open(path+temp_out_name, 'w', encoding='utf-8') as f:
f.writelines(temp_out)
f.close()
# 系统浏览器打开html文件
webbrowser.open(path+temp_out_name)
代码02-Template()渲染JS
import os
import jinja2
from jinja2 import Template
import webbrowser
# 加载基础模板
path = os.getcwd().replace("\\", "/")
base_temp_path = '/templates/base_flask_tmp.html'
base_temp_fullpath = path+base_temp_path
env = jinja2.Environment(loader=jinja2.FileSystemLoader(path))
base_temp = env.get_template(base_temp_path)
# 图像数据组
# 构造all_div
#
all_div='''
'''
pie_data={ 'name': '面积模式',
'borderRadius': 8,
'data': [
{'value': 40, 'name': 'rose 1'},
{'value': 38, 'name': 'rose 2'},
{'value': 32, 'name': 'rose 3'},
{'value': 30, 'name': 'rose 4'},
{'value': 28, 'name': 'rose 5'},
{'value': 26, 'name': 'rose 6'},
{'value': 22, 'name': 'rose 7'},
{'value': 18, 'name': 'rose 8'}
],
}
# 构造all_js
all_js='''
var chartDom = document.getElementById('main1');
var myChart1 = echarts.init(chartDom, 'dark');
var option;
var pie_data = {{pie_data}}
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: pie_data.name,
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: pie_data.borderRadius
},
data: pie_data.data
}
]
};
option && myChart1.setOption(option);
var chartDom = document.getElementById('main2');
var myChart2 = echarts.init(chartDom, 'dark');
var option;
option = {
title: {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸发量', '降水量']
},
toolbox: {
show: true,
feature: {
magicType: {show: true, type: ['line', 'bar']},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
option && myChart2.setOption(option);
var charts = [myChart1,myChart2];
window.onresize = function(){
for(var i = 0; i < charts.length; i++){
charts[i].resize();
}
};
'''
# 万法皆对象
all_js_render = Template(all_js).render(pie_data=pie_data)
# jinja2 渲染模板
temp_out = base_temp.render(all_div=all_div,all_js=all_js_render)
# 保存
temp_out_name = '/templates/ex_007_line03.html'
with open(path+temp_out_name, 'w', encoding='utf-8') as f:
f.writelines(temp_out)
f.close()
# 系统浏览器打开html文件
webbrowser.open(path+temp_out_name)
【注】仅仅对玫瑰图进行了重构,柱状图感兴趣的可以自行重构。
视图模板
ECharts5学习 By 微信 civilpy示例预览
{{all_div|safe}}
{{all_js|safe}}
【注】小杨,你距离Dashboard又进了一步~
结语
本主已经打包了base_flask_tmp.html以及bootstrap、echarts先关css\js文件,对于有基础的道友,从上面代码可以自行构造相关文件;对于小白用户,拿来及运行,可以小支持一下:
易一网络科技 - 付费文章www.intumu.com