python集成Echarts框架实现数据分析

安装pyecharts
pip3 install pyecharts

条形图：定义图形生成函数

# 定义条形图:参数两个列表-堆叠
def bar_base_title_h_diejia(count_list, name_list, pos_left, title) -> Bar:
    c = (
        Bar(init_opts=opts.InitOpts())
            .add_xaxis(name_list)
            #组成bar的颜色和数
            .add_yaxis('', count_list[0], bar_max_width=25, color='#9a6b8e', stack="stack",
                       label_opts=opts.LabelOpts(position="right", is_show=False)).reversal_axis()
            .add_yaxis('', count_list[1], bar_max_width=25, color='#ECC777', stack="stack",
                       label_opts=opts.LabelOpts(position="right", is_show=False)).reversal_axis()
            .add_yaxis('', count_list[2], bar_max_width=25, color='#D86D6A', stack="stack",
                       label_opts=opts.LabelOpts(position="right", is_show=False))
            .add_yaxis('', count_list[3], bar_max_width=25, color='#A7C292', stack="stack",
                       label_opts=opts.LabelOpts(position="right", is_show=False))
            .add_yaxis('', count_list[4], bar_max_width=25, color='#7899B1', stack="stack",
                       label_opts=opts.LabelOpts(position="right",
                       
      #利用js实现求和，将总和显示在bar的最右侧                                           formatter=JsCode(
                                                     "function(x){var total =0;for(var i=0,l=fenseCahrt_option['series'].length;i<l;i++){total += fenseCahrt_option['series'][i]['data'][x.dataIndex];}return total;}"))).reversal_axis()
            .set_global_opts(xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=0),
                                                      splitline_opts=opts.SplitLineOpts(is_show=True),
                                                      axisline_opts=opts.AxisLineOpts(is_show=False),
                                                      splitarea_opts=opts.SplitAreaOpts(is_show=True,
                                                                                        areastyle_opts={"opacity": 0.8,
                                                                                                        "color": '#F3F1EC'})),
                             yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(font_size=12)),
                             title_opts=opts.TitleOpts(title=title, subtitle="", pos_bottom='bottom', pos_left='center',
                                                       padding=[30, 30],
                                                       title_textstyle_opts=opts.TextStyleOpts(color='#696969')))
        # .set_global_opts(title_opts=opts.TitleOpts(title="", subtitle=""))
    )
    grid = Grid(init_opts=opts.InitOpts()).add(c, grid_opts=opts.GridOpts(
        pos_left=pos_left, pos_bottom='15%'))
    return grid

flask渲染

需要将数据格式化后进行模版渲染，利用dump_options()函数格式化图标数据

@fens_bp.route('/bar', methods=['GET', 'POST'])
def studio_week_report():
    [('中国队', (204091, 827, 0, 0, 0), 204918), ('美国队', (119507, 0, 0, 0, 0), 119507), ('韩国队', (114624, 21, 53, 0, 0), 114698), ...]
    c = bar_base_title_h_diejia([f_count_list, t_count_list,        y_count_list, v_count_list, ins_count_list], diejia_name_list, "15%",
                                '粉丝排行')
    echart_fens_count = c.dump_options()
    return render_template('custom/week_report.html', title='网红数据报表', index=11, endpoint='bar',                                                  echart_fens_count=echart_fens_count)

模版渲染

注意需要导入js脚本，echarts.min.js

{% extends 'custom/basetable.html' %}
{% import 'macro' as macro %}


{% block content %}
    
  <script src={{ url_for('static', filename="echarts/echarts.min.js") }}></script>
  
    <section id="customizing-headings-default">
        <div class="row match-height">

            <div class="col-md-12 col-lg-12">

                <div class="card">
                    <div class="card-header">
                        <div class="card-title-wrap bar-success">
                            <h2 class="card-title">数据排名--粉丝数</h2>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="card-block">
                            <div class="col-md-12 col-lg-12 match-height" id="fens_count" style="height:700px;"></div>
                            <div class="col-md-6 col-lg-12 match-height" id="fens_pie_count"
                                 style="height:320px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block page_level_js %}
    <script>
        {% block EchartsJS %}
            var fensCahrt = echarts.init(document.getElementById('fens_count'), 'westeros', {renderer: 'canvas'});
            {#        // 指定图表的配置项和数据#}
            var fenseCahrt_option = {{ echart_fens_count | safe }};
            {#        // 使用刚指定的配置项和数据显示图表。#}
            fensCahrt.setOption(fenseCahrt_option);

            
            window.addEventListener("resize", function () {
                fensCahrt.resize();   //myChart指自己定义的echartsDom对象
                            });
        {% endblock %}
    </script>
{% endblock %}

效果展示如下

未经允许不得转载：学编程 » pyhton集成echarts实现数据分析