项目五_Web应用程序的数据可视化（4 在Flask中使用ECharts进行数据可视化3）.pptxVIP

数据分析与可视化技术在AWS上进行开发 深圳信息职业技术学院 软件学院 薛国伟 2020年9月 大纲 numpy基础 1 将考试成绩用饼图进行可视化 饼图（pie chart）以二维或三维格式显示每一数值相对于总数值的大小。 使用饼图进行分数段可视化，能够直观的看到每个分数段的人数在总人数中的比重。本节中，我们将分数段数据用饼图进行可视化呈现。 将考试成绩用饼图进行可视化 # 其他已有的代码保持不变，没有显示 from . import showPie flaEcharts.register_blueprint(showPie.bp) # 其他已有的代码保持不变，没有显示 编辑“__init__.py” 修改工厂函数和视图函数 将考试成绩用饼图进行可视化 import functools from flask import ( Blueprint, g, redirect, render_template, request, session, url_for ) bp = Blueprint(showPie, __name__) @bp.route(/pie) def showPie (): return render_template(showPie.html) 在“flaEchartsDesign”文件夹中新建“showPie.py” 修改工厂函数和视图函数 将考试成绩用饼图进行可视化 # 其他已有的代码保持不变，没有显示 {% block title %} 成绩分布饼状图 {% endblock %} {% block content %} div id=main style=width: 600px;height:400px;/div script type=text/javascript var myChart = echarts.init(document.getElementById(main)); var option = { }; myChart.setOption(option); /script {% endblock %} 在“templates”文件夹中创建“showPie.html” 创建饼图页面模板 将考试成绩用饼图进行可视化 # 其他已有的代码保持不变，没有显示 {% block content %} div id=main style=width: 600px;height:400px;/div script type=text/javascript var myChart = echarts.init( document.getElementById(main)); var option = { }; myChart.setOption(option); /script {% endblock %} 创建并生成ECharts实例 将考试成绩用饼图进行可视化 设计饼图样式 subtextStyle:{ fontFamily: Microsoft YaHei, fontWeight: bold, fontSize: 20, align: right } } 设置主标题和副标题的样式 title:{ show: true, text: 成绩分布饼状图, subtext: 按照成绩段, textAlign: center, itemGap: 3, left: 55%, textStyle:{ fontFamily: Microsoft YaHei, fontWeight: bold, fontSize: 30, align: center }, 将考试成绩用饼图进行可视化 设计饼图样式 data:[ {value:2, name:0~60}, {value:8, name:60~70}, {value:16, name:70~80}, {value:22, name:80~90}, {value:4, name:90~100} ] } 设置图表的系列项 series:{ name: 人数