pythonidechart_Python调用echarts5实现数据可视化-02-魅惑黑
背景
本主在最初接触可视化的时候,也尝试着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
pythonidechart_Python调用echarts5实现数据可视化-02-魅惑黑相关推荐
- R 数据可视化 02 | 火山图
R 数据可视化 02 | 火山图 文章目录 R 数据可视化 02 | 火山图 一. 示例数据准备 二. 环境需求 三. 绘制火山图 1. 火山图 2. 标记基因的火山图 四. 保存为图片 五. 详细参 ...
- 笔记——数据可视化02
Matplotlib绘图 plt.gcf()与plt.gca() 当前的图表与子图可以使用plt,gcf()与plt.gca()获得,分别表示Get Current Figure和Get Curren ...
- python做动态折线图_Python数据可视化 pyecharts实现各种统计图表过程详解
1.pyecharts介绍 Echarts是一款由百度公司开发的开源数据可视化JS库,pyecharts是一款使用python调用echarts生成数据可视化的类库,可实现柱状图,折线图,饼状图,地图 ...
- python数据可视化的特点_Python数据可视化 pyecharts实现各种统计图表过程详解
1.pyecharts介绍 Echarts是一款由百度公司开发的开源数据可视化JS库,pyecharts是一款使用python调用echarts生成数据可视化的类库,可实现柱状图,折线图,饼状图,地图 ...
- python动态图表变化_Python数据可视化 pyecharts实现各种统计图表过程详解
Python数据可视化 pyecharts实现各种统计图表过程详解 发布时间:2020-09-10 04:53:26 来源:脚本之家 阅读:78 1.pyecharts介绍 Echarts是一款由百度 ...
- python pyecharts 折线图_Python数据可视化之pyecharts实现各种图表
之前的一篇文章介绍了使用Matplotlib实现各种统计图表,Python数据可视化之Matplotlib实现各种图表.这篇文章就介绍使用pyecharts实现各种统计图表. 1.pyecharts介 ...
- 蛛网时代:敲黑板!数据可视化是黑科技却不是神器!
双11的热度已经慢慢过去,现在坐在办公室里我最期待的是快递小哥哥的身影.双11俨然成为了国人必过的一个节日,也许多年之后这个节日会成为法定假日也不一定呢!最近,小编接到了一个客户的需求,却让小编有点哭 ...
- 数据可视化之汽车销量,截止到2022年目前中国汽车保有量是3.02亿辆
汽车在我们日常生活中是必不可少的代步工具,随着中国的经济发展,截止到2022年目前中国汽车保有量是3.02亿辆,2021年全国新注册登记机动车就已达3674万辆.现在居民的生活越来越好,小编通过数据可 ...
- 《BI工程师必读》数据可视化篇 #02
写在前面 对于大数据团队来说,我们把计算好的数据,以一种简洁美观的方式展现给产品经理或leader也是十分重要的,其实也就是数据可视化. 一种方式就是公司自研一个可视化平台,比如用SpringBoot ...
最新文章
- bzero, memset ,setmem 区别
- python server酱_面向回家编程!GitHub标星两万的quot;Python抢票神器”快用起来!...
- 【短语学习】盈余量分析(earned value analysis)
- 「协方差」与「相关系数」的概念
- linux下c 编译脚本,Linux下编译C语言与makefile脚本语言
- python输入程序_python程序的输入输出(acm的几个小程序)
- 软件测试工程师-缺陷报告
- 在.NET2.0中上传文件操作(解决了上传文件大小和多文件限制)--转
- 24. jQuery 细节
- Java笔记第五篇 文本编辑器初见面
- 好用的Windows屏幕取色器 ColorWanted
- 4G标准LTE成争执焦点 中兴华为或以和解收场
- 服务器电脑cpu性能排行,服务器cpu性能排行,小编教你服务器cpu性能排行
- 人类杏仁核特异性连接与心理健康维度的关系
- 当生命科学遇上AI,会产生怎样1+1>2效果?
- 【寒江雪】Go实现状态模式
- [Android编译(二)] 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
- C#根据WORD模板生成WORD文档 C#网页打印
- java中 CVS_CVS命令 - java_rookie - 博客园
- 学计算机二级的感想,学习计算机二级的心得体会.docx