版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第五章
条形图GOAL学习目标1了解条形图的概念、特点和应用场景2了解静态和动态图表的概念、特点和开发技术3掌握利用Web前端开发技术制作静态条形图的方法4掌握综合利用Web前后端开发技术制作动态条形图的方法5掌握使用浏览器开发者工具进行程序调试的方法目录Contents5.1条形图简介5.2静态条形图5.3动态条形图5.4浏览器开发者工具的应用5.1条形图简介
条形图是一种常用的统计图表，它用一系列长度不等的纵向或横向条纹来表现数据的分布情况。条形图的核心思想是对比，它利用人眼对高度差异敏感的特点，适合用来展示数据之间的差异。本课程拟使用条形图展示2018年1月1日若干监测站PM2.5浓度的日平均值，用于对比不同站点的PM2.5污染情况。5.1条形图简介5.2静态条形图
静态条形图属于纯前端的应用程序，开发技术仅涉及HTML、CSS、JavaScript和Echarts。静态条形图的数据存储在前端代码中，系统的体系结构比较简单，开发难度相对较低，但同时功能也比较薄弱，适用于实验环境中小规模数据集的可视化。静态条形图的开发过程包括准备工作、图表制作、图表展示三个阶段。5.2静态条形图（1）创建项目目录结构5.2.1准备工作创建项目根目录“AirPollution_Bar_Static”，以及“CSS”和“JS”目录<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>静态条形图</title></head><body></body></html>5.2.1准备工作（2）创建HTML文档新建“index.html”<scriptsrc="JS/echarts.js"></script>5.2.1准备工作（3）引入ECharts库文件在“index.html”的“<head>”标签中添加引用<divid="bar"></div>5.2.1准备工作（4）创建DOM容器在“index.html”的“<body>”标签中定义“<div>”标签body{background-color:black;/*将页面背景颜色设置为黑色*/}#bar{position:absolute;left:15%;/*容器上边框与页面上侧的距离为页面宽度的15%*/top:15%;/*容器左边框与页面左侧的距离为页面高度的15%*/width:70%;/*设置容器的宽度占页面宽度的70%*/height:70%;/*设置容器的宽度占页面宽度的70%*/}5.2.1准备工作（5）设置元素样式新建名为“main.css”的CSS文档<linkrel="stylesheet"href="CSS/main.css"/>5.2.1准备工作（5）设置元素样式在“index.html”的“<head>”标签中添加链接x轴组件的数据体：["HD01","XT01","HS01","SJZ01","CZ01","BD01","LF01","TS01","QHD01","ZJK01","CD01"]数据系列组件的数据体：[89.36,149.95,140.07,84.82,101.87,71.02,63.88,66.33,30.39,21.25,16.25]5.2.1准备工作（6）数据准备为x轴组件和数据系列组件准备数据<scriptsrc="JS/bar.js"></script>5.2.2图表制作（1）新建条形图JS脚本新建“bar.js”，并在“index.html”的“<body>”标签中添加引用
letcontainer=document.getElementById('bar');letmyBar=echarts.init(container,null,{renderer:"svg"});5.2.2图表制作（2）初始化条形图实例在“bar.js”中，使用“document.getElementById()”和“echarts.init()”方法title:{text:"PM2.5浓度对比条形图",textStyle:{color:"lightgray",fontSize:28,},5.2.2图表制作（3）设置条形图配置项标题组件subtext:"监测时间：2018年1月1日",subtextStyle:{color:"lightgray",fontSize:18,},left:"center",},tooltip:{axisPointer:{type:"shadow",label:{show:true,},},},5.2.2图表制作（3）设置条形图配置项提示框组件
toolbox:{
itemSize:24,
right:40,
feature:{
saveAsImage:{show:true},
restore:{show:true},
dataView:{readOnly:false,},
dataZoom:{show:true},
magicType:{
type:["line","bar"],
}
},
},5.2.2图表制作（3）设置条形图配置项工具栏组件
legend:{
right:40,
top:60,
textStyle:{
color:"lightgray",
fontSize:18,
},
},5.2.2图表制作（3）设置条形图配置项图例组件grid:{top:"20%",left:"center",width:"80%",height:"65%",containLable:true,},5.2.2图表制作（3）设置条形图配置项网格组件xAxis:{axisLabel:{interval:0,color:"lightgray",fontSize:18,},data:["HD01","XT01","HS01","SJZ01","CZ01","BD01","LF01","TS01","QHD01","ZJK01","CD01",],},5.2.2图表制作（3）设置条形图配置项x轴组件yAxis:{name:"单位：ug/m3",nameTextStyle:{color:"lightgray",fontSize:18,},axisLabel:{color:"lightgray",fontSize:18},},5.2.2图表制作（3）设置条形图配置项y轴组件dataZoom:[{start:60,end:100},{yAxisIndex:0,right:"5%",},],5.2.2图表制作（3）设置条形图配置项区域缩放组件series:[{name:"PM2.5浓度",type:"bar",data:[89.36,149.95,140.07,84.82,101.87,71.02,63.88,66.33,30.39, 21.25,16.25,],},],5.2.2图表制作（3）设置条形图配置项数据系列组件myBar.setOption(option)5.2.2图表制作（4）应用配置项使用“myBar.setOption()”方法window.onresize=function(){myBar.resize({animation:{duration:500,easing:'linear'}})}5.2.2图表制作（5）启用自适应缩放在“window.onresize”事件中调用Echarts实例的“resize()”方法
5.2.3图表展示使用浏览器打开“index.html”查看静态条形图显示效果
5.2.3图表展示项目资源列表相对路径说明/CSS/main.cssCSS文档/JS/bar.js条形图创建脚本/JS/echarts.jsEcharts库文件/index.htmlHTML文档5.3动态条形图
动态条形图是一种基于Web服务的、重量级的应用程序，需要综合使用前后端开发技术。在本例中，动态条形图的数据源来自MySQL数据库，数据可视化需要经过数据抽取、转换、加载和渲染过程，系统的体系结构比较复杂，开发难度相对较高，但同时功能也比较强大，适用于生产环境中大规模数据集的可视化。动态条形图的开发过程同样包括准备工作、图表制作、图表展示三个阶段。5.2
动态条形图（1）创建项目目录结构5.3.1准备工作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="{{url_for('static',filename='JS/echarts.js')}}"></script><scriptsrc="{{url_for('static',filename='JS/jquery.min.js')}}"></script><scriptsrc="{{url_for('static',filename='JS/utils.js')}}"></script><linkrel="stylesheet"href="{{url_for('static',filename='CSS/main.css')}}"><title>动态条形图</title></head><body><divid="bar"></div><scriptsrc="{{url_for('static',filename='JS/bar.js')}}"></script></body></html>5.3.1准备工作（2）配置静态资源加载路径fromflaskimportFlask,render_templateapp=Flask(__name__)@app.route("/")defindex():returnrender_template("index.html")if__name__=='__main__':app.run()5.3.1准备工作（3）配置模板文件加载路径新建“server.py”5.3.2图表制作importpymysqldefgetData(sql):conf={'host':'','port':3306,'db':'airpollution','user':'root','password':'root','charset':'utf8mb4'}conn=pymysql.connect(**conf)db=conn.cursor()5.3.2图表制作（1）数据抽取新建“model.py”db.execute(sql)data=db.fetchall()db.close()conn.close()returndataimportjsondefgetBarJSON(data):dct={}stations=[]values=[]foritemindata:stations.append(item[1])values.append(item[0])dct['name']=stationsdct['value']=valuesreturnjson.dumps(dct,ensure_ascii=False)5.3.2图表制作（2）数据转换组装JSON字符串：新建“preprocess.py”@app.route('/json_for_bar')defjson_for_bar():sql='''SELECTpm25,stationFROMairpollutionWHEREdateLIKE"2018-01-01%"AND(
station='HD01'ORstation='XT01'OR5.3.2图表制作（2）数据转换发布JSON数据接口：添加视图函数“json_for_bar()”station='HS01'ORstation='SZJ01'ORstation='CZ01'ORstation='BD01'ORstation='LF01'ORstation='TS01'ORstation='QHD01'ORstation='ZJK01'ORstation='CD01')'''returngetBarJSON(getData(sql))5.3.2图表制作（2）数据转换测试JSON数据接口：通过浏览器访问“:5000/json_for_bar”letcontainer=$("#bar")[0]letmyBar=echarts.init(container,null,{renderer:"svg"})letdata_bar={name:[],value:[]}$.ajax({url:'/json_for_bar',method:'GET',dataType:'json',success:function(data){5.3.2图表制作data_=data_bar.value=data.value......},error:function(msg){console.log(msg)}})......
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025北京八中高三（上）期中数学试题及答案
- 互联网背景下小学数学自主学习能力策略探究
- 2025北京延庆区高二(上)期中语文试题及答案
- 计算机行业市场前景及投资研究报告：算电协同中国AIDC电力解决方案
- 脑梗死护理考核试题及答案解析
- 2026北京平谷区初三一模语文试题含答案
- 2026高中必修上《琵琶行》教学课件
- 医院用药规范巡查制度
- 医院采购项目质控管理制度
- 协管员月考核制度
- 超星尔雅学习通《美术鉴赏（北京大学）》2025章节测试附答案
- FANUC机器人ARC Mate 120iD和M-20iD机械结构手册
- DB37T 2401-2022 危险化学品岗位安全生产操作规程编写导则
- 项管系统培训变更与修正
- 红色文化知识题【高中组共计967题】1 (1)附有答案
- HYT 271-2018 海洋多参数水质仪检测方法（正式版）
- 曲黎敏《黄帝内经》-全套讲义
- 万宁市病死畜禽无害化处理中心项目 环评报告
- 《引航》系列特刊2-《共建绿色丝绸之路进展、形势与展望》
- 全国优质课一等奖小学道德与法治六年级下册《地球-我们的家园》第1课时（完美版课件）
- GB/T 311.1-2012绝缘配合第1部分：定义、原则和规则
评论
0/150
提交评论