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

数据分析与可视化技术在AWS上进行开发 深圳信息职业技术学院 软件学院 薛国伟 2020年9月 大纲 numpy基础 1 将考试成绩用散点图进行可视化 # 其他已有的代码保持不变，没有显示 from . import showScatter flaEcharts.register_blueprint(showScatter.bp) # 其他已有的代码保持不变，没有显示 编辑“__init__.py” 修改工厂函数和视图函数 将考试成绩用散点图进行可视化 import functools from flask import ( Blueprint, g, redirect, render_template, request, session, url_for ) bp = Blueprint(showScatter, __name__) @bp.route(/scatter) def showScatter(): return render_template(showScatter.html) 在“flaEchartsDesign”文件夹中新建“showScatter.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”文件夹中创建“showScatter.html” 创建散点图页面模板 将考试成绩用散点图进行可视化 设计散点图样式 设置散点图中点符号的颜色和样式 series: { name: 人数, type: scatter, coordinatesystem: cartesian2d, symbol: circle, symbolSize: function(value){ return Math.sqrt(value) * 10 }, data:[ 2, 8, 16, 22, 4 ], 将考试成绩用散点图进行可视化 itemStyle: { shadowBlur: 10, shadowColor: rgba(120, 36, 50, 0.5), shadowOffsetY: 8, color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: red }, { offset: 0.7, color: black }] }}} 将考试成绩用饼图进行可视化 设计饼图样式 xAxis: { type: category, name: 分数段, nameTextStyle:{ fontSize: 14 }, data: [ 0-60, 60-70, 70-80, 80-80, 90-100 ] } 设置x轴的样式