Python调用echarts5实现数据可视化-02-魅惑黑
发布时间：2021-12-03
公开文章
背景
本主在最初接触可视化的时候，也尝试着echarts，但是当时有人在开发pyecharts库，且其没有系统化的实施方案，尤其是导出图片功能。这几天，看到各大号在宣传Echarts5，看了看，还是有惊喜的地方。接下来尝试使用jinja2、bootstrap实现echarts官方示例的展示。对于有Django、Flask基础的道友，下面的代码可以拿来即用（简单修改）。
本期实现：
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
# <div class="col-md-6" style = "width:400px;float:left;overflow:hidden;">
all_div='''
<div class="row">
<div class="col-md-6" style = "width:50%;float:left;overflow:hidden;">
<div id="main1" style="height:600px;"></div>
</div>
<div class="col-md-6" style = "width:50%;float:right;overflow:hidden;">
<div id="main2" style="height:600px;"></div>
</div>
</div>
'''
# 构造all_js
all_js='''
<script type="text/javascript">
var chartDom = document.getElementById('main1');
var myChart1 = echarts.init(chartDom, 'dark');
var option;
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
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'}
]
}
]
};
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();
}
};
</script>
'''
# 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
# <div class="col-md-6" style = "width:400px;float:left;overflow:hidden;">
all_div='''
<div class="row">
<div class="col-md-6" style = "width:50%;float:left;overflow:hidden;">
<div id="main1" style="height:600px;"></div>
</div>
<div class="col-md-6" style = "width:50%;float:right;overflow:hidden;">
<div id="main2" style="height:600px;"></div>
</div>
</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='''
<script type="text/javascript">
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();
}
};
</script>
'''
# 万法皆对象
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)【注】仅仅对玫瑰图进行了重构，柱状图感兴趣的可以自行重构。
视图模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="-------------------------ECharts5学习 By 微信 civilpy----------------------------">
<meta name="description" content="-------------------------ECharts5学习 By 微信 civilpy----------------------------">
<title>ECharts5学习 By 微信 civilpy</title>
<link rel="stylesheet" type="text/css" href="../echarts5/dist/css/bootstrap.min.css">
</head>
<body style="background-color: #100C2A ;">
<section>
<div class="col-md-12 col-sm-6">
<h3 class="text-center" style="color:aliceblue">示例预览</h3>
<!-- 表格DIV-start -->
{{all_div|safe}}
<!-- 表格DIV-end -->
</div><!-- end of chart panel -->
</section>
<script src="../echarts5/dist/js/echarts.min.js"></script>
<script src="../echarts5/dist/js/bootstrap.min.js"></script>
<!-- 表格js-start -->
{{all_js|safe}}
<!-- 表格js-end -->
</body>
</html>【注】小杨，你距离Dashboard又进了一步~
结语
本主已经打包了base_flask_tmp.html以及bootstrap、echarts先关css\js文件，对于有基础的道友，从上面代码可以自行构造相关文件；对于小白用户，拿来及运行，可以小支持一下：