使用Flask加ECharts实现不定项多维数组柱状图展示

ljyfree

已于 2023-06-01 10:30:00 修改

阅读量251

点赞数 1

文章标签： flask echarts python

于 2023-06-01 10:18:33 首次发布

本文链接：https://blog.csdn.net/ljyfree/article/details/130982684

版权

昨天写了《使用Flask加ECharts实现多维数组柱状图展示》，存在一个限制，就是数据的长度是已知的(12个月)，那么如果根据数据展示相关月份，就需要动态获取长度和相关信息

具体代码

相关内容参照上一篇
主要区别就是数据改为字典组成的列表，还有就是index.html的变化

admin@ubuntu18-mypc:~/flask$ cat run.py 
from flask import Flask, render_template, request
import json

app = Flask(__name__,static_folder='static')

@app.route('/')
def index():
    data = [{'mon':'Jan','income':2000,'expense':1000},
            {'mon':'Feb','income':2500,'expense':1500},
            {'mon':'Mar','income':3000,'expense':2000},
            {'mon':'Apr','income':2800,'expense':1800},
            {'mon':'May','income':2000,'expense':1200}]
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True)
admin@ubuntu18-mypc:~/flask$ 
admin@ubuntu18-mypc:~/flask$ cat templates/index.html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask + ECharts绘制每月支出和收入柱形图</title>
    <!-- 引入echarts.min.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        var data = {{ data|tojson }};

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        
        // 动态生成 x 轴标签和数据
        var xAxisData = [];
                var seriesExpense = [];
                var seriesIncome = [];
        for (var i = 0; i < data.length; i++) {
            xAxisData.push(data[i].mon);
            seriesExpense.push(data[i].expense)
            seriesIncome.push(data[i].income)
        }

        // 配置图表参数
        var option = {
            tooltip: {},
            legend: {
                data: ['支出', '收入']
            },
           xAxis: {
                type: 'category',
                data: xAxisData
            },
            yAxis: {},
            series: [
                {
                    name: '支出',
                    type: 'bar',
                    data: seriesExpense,
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                {
                    name: '收入',
                    type: 'bar',
                    data: seriesIncome,
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
admin@ubuntu18-mypc:~/flask$

html解释

从传入数据的长度，可以获取到x轴需要多少项

for (var i = 0; i < data.length; i++)

通过循环获取每组数据，就是一个字典，通过"."来获取key对应的value
x轴的坐标，收入，支出都是列表，使用push来将数据压入
配置option的时候，将之前得到的三个列表设置进去

最后的效果

data提供了五个月的数据，那么就展示五个月

堆叠的实现

如果series加入stack属性，可以实现柱状图的堆叠，注意要堆叠在一起的数据，stack要设置成一样

            series: [
                {
                    name: '支出',
                    type: 'bar',
                    data: seriesExpense,
                    stack: 'stack1',
                    label: {
                        show: true,
                        position: 'top'
                    }
                },
                {
                    name: '收入',
                    type: 'bar',
                    data: seriesIncome,
                    stack: 'stack1',
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ]

在这里插入图片描述