echarts是世界上最强大、最美观、最整洁、最好用的图表库,官网上的示例可谓包罗万象,拿来即用,至少能满足99%的用户99%的需求,对有本地绘图需求的小伙伴,强烈推荐python + jinja2 + echarts的组合。
先看一下我最近画的两张图,
- 地理分布图
- 随时间变化趋势图
虽然不懂配色,这两幅图整体看起来也还是挺整洁美观的,审美好的同学可以调出更好的颜色效果。
介绍一下我通常画图的步骤,以第二张趋势图为例:
- 前往echarts的示例页面,找到需要的图表类型,下载示例文件,通常是一个单独的html文件;
- 将示例的html文件中数据部分掏空,标题和图例等文字按需修改即可,用jinja2的标签占位需要填充的数据部分,如下面的{{time_series}}和{{no2_series}},保存为模板文件template.html;
<!DOCTYPE html>
<html style="height: 100%">
<head>
<title>XXX</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="60">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<a id="download" style="display:none"></a>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
backgroundColor: 'white',
xAxis: {
type: 'category',
data: [{{time_series}}]
},
yAxis: {
type: 'value'
},
title: {
padding: 15,
text: 'XXXX',
subtext: '2020.1 ~ 2020.12',
x: 'center',
textStyle: {
color: 'black'
}
},
legend: {
orient: 'vertical',
bottom: 100,
right: 200,
data: ["XXX concentration (μg/m3)"],
textStyle: {
color: 'black'
},
show: true,
},
series: [
{
data: [{{no2_series}}],
type: 'line',
name: 'XXX concentration (μg/m3)',
itemStyle : {
normal : {
lineStyle:{
color:'green'
}
}
},
},
],
dataZoom:[{
type:"inside"
}],
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2
}
}
}
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
- 使用python对原始数据进行整理分析(至于具体怎么分析要看业务需求),得到最终需要展示的数据time_series和data_series;
- 使用time_series和data_series通过jinja2对template.html进行渲染,得到渲染后的html文件trend.html;
html_template = env.get_template('template.html')
html = html_template .render({"data_series": ",".join(data_series), "time_series": ",".join(data_series)})
with open("trend.html", "w", encoding="utf-8") as f:
f.write(html )
- 打开trend.html,可以看到右上角有个小的下载按钮,点击即可下载图片,通过调整浏览器窗口大小,可以自动生成任何尺寸的图片,甚至可以F12直接在浏览器里面调试显示效果,非常方便;
通过python + jinja2 + echarts的方式,生成我们需要的html图表文件,可以在任何一台电脑直接用浏览器直接打开观看,不用安装任何依赖,这也是一个非常重要的优势。
有echarts的python封装库pyecharts,但几乎没有价值,多此一举,就不解释了。
如果经常有绘图的需求,赶紧试一试我推荐的方案吧。
本文暂时没有评论,来添加一个吧(●'◡'●)