程序员开发实例大全宝库

网站首页 > 编程文章 正文

数据可视化终极方案:python + jinja2 + echarts

zazugpt 2024-08-13 13:08:31 编程文章 26 ℃ 0 评论

echarts是世界上最强大、最美观、最整洁、最好用的图表库,官网上的示例可谓包罗万象,拿来即用,至少能满足99%的用户99%的需求,对有本地绘图需求的小伙伴,强烈推荐python + jinja2 + echarts的组合。

先看一下我最近画的两张图,

  1. 地理分布图
  1. 随时间变化趋势图

虽然不懂配色,这两幅图整体看起来也还是挺整洁美观的,审美好的同学可以调出更好的颜色效果。

介绍一下我通常画图的步骤,以第二张趋势图为例:

  1. 前往echarts的示例页面,找到需要的图表类型,下载示例文件,通常是一个单独的html文件;
  2. 将示例的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>
    
  1. 使用python对原始数据进行整理分析(至于具体怎么分析要看业务需求),得到最终需要展示的数据time_series和data_series;
  2. 使用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 )
  1. 打开trend.html,可以看到右上角有个小的下载按钮,点击即可下载图片,通过调整浏览器窗口大小,可以自动生成任何尺寸的图片,甚至可以F12直接在浏览器里面调试显示效果,非常方便;

通过python + jinja2 + echarts的方式,生成我们需要的html图表文件,可以在任何一台电脑直接用浏览器直接打开观看,不用安装任何依赖,这也是一个非常重要的优势。

有echarts的python封装库pyecharts,但几乎没有价值,多此一举,就不解释了。

如果经常有绘图的需求,赶紧试一试我推荐的方案吧。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表