《数据库与信息系统》数据展示与分析.pptxVIP

数据可视化分析8目 录8.1数据图表概述8.2“e学习”网站的图表分析8.1 数据图表概述ECharts数据图表基础认识数据报表和数据图表数据报表和数据图表是将信息汇总输出或打印的一种表现形式。 数据图表不仅可以集中、分类显示数据， 还可以帮助用户进一步分析信息。 常见的表现形式为：报表、折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图等。绘图工具：Excel、ECharts（百度提供）等。百度EChartsECharts（Enterprise Charts)商业级数据图表，是百度公司采用JavaScript语言实现的一个开源可视化库，支持个性化定制数据图表。/Javascript什么是 Javascript ？JavaScript是一种用于Web应用开发的脚本语言，通过嵌入在HTML中来实现自身功能，常用来为网页添加动态功能，为用户提供更流畅美观的浏览效果。JavaScript在线实例：/try/try.php?filename=tryjs_events/try/try.php?filename=tryjs_eventsJavaScript与HTML、CSS的关系：HTML 定义了网页的内容。CSS 描述了网页的布局和样式。JavaScript 网页的行为。它们是JavaScript web 开发人员必须学习的 3 门语言Javascript312【例8.1】在HTML中嵌入JavaScript脚本，实现动态交互嵌入JavaScript脚本。嵌入方式嵌入自定义函数。把JavaScript脚本保存到外部文件。JSON数据格式JSON全称是JavaScript?Object?Notation(JavaScript 对象表示法)。JSON 是存储和交换文本信息的语法，独立于编程语言和平台。数据通常表示成键值对。在ECharts中，数据图表的属性设置采用JSON格式，一些数据内容也可采用JSON格式。在JavaScript中定义JSON类型变量：THANK YOU!实现静态数据图表ECharts数据图表实现方法【例8.2】用柱状图显示各课程平均成绩，点击某项显示平均分提示。课程平均成绩柱状图 操作步骤① 新建网站W82_Bar，添加Echarts资源包。添加Echarts资源包的方式：将下载的ECharts包解压，复制“build\dist”目录及其下所有内容在解决方案资源管理器中右击本网站项目选“粘帖”，后修改dist文件夹名称为echarts。② 添加Web窗体，命名为Bar.aspx文件。设计页面。在设计窗口通过工具箱的HTML组拖放一个Div区域块控件并调整到合适大小，设置属性ID值为“main”或直接在body部分用div/div采用下面语句定义一个定高宽的区域块，div id=main style=height:400px; width: 600px;/div将在此绘制ECharts数据图表③ 在body部分用script标签引入echarts-all.js 外部文件，然后标识新脚本块开始 script src=echarts/dist/echarts-all.js/script script type=text/javascript④ 初始化图表var myChart = echarts.init(document.getElementById(main));⑤ 设置option配置项设置图表的属性，包括图表元素属性和数据内容属性。⑥ 为ECharts对象加载数据，并说明脚本块结束 myChart.setOption(option); /script代码JavaScript脚本块 图表的浏览和导出 在数据图表上可以添加工具箱，工具箱内置的工具有：数据区域缩放、数据视图、重置、动态类型切换、导出图片，方便用户以不同形态查看图表或导出和保存图表。【例8.3】例8.2绘制的图表增加工具箱，并使用“导出图片”工具保存图表。操作步骤复制例8.2的网站命名为W83_BarSave，在设置option配置项时添加如下toolbox图表元素说明。toolbox: { show: true, feature: { mark: {show: true }, //辅助线标志 dataZoom: {show: true }, //数据框选区域缩放 dataView: {show: true, readOnly: false }, //数据视图 restore: {show: true }, //恢复初始图表 magicType: { //动态类型切换 show: true, type: [bar, line]