# 练习专用3 **Repository Path**: q720533/exercise-specific-3 ## Basic Information - **Project Name**: 练习专用3 - **Description**: 3班的项目托管 - **Primary Language**: Python - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 12 - **Created**: 2022-11-14 - **Last Updated**: 2022-11-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 数据可视化 > 前导课：html结构、css动画、JavaScirpt+Jquery（看懂代码）、Vue、WebSocket ##### 1.什么叫数据可视化？ 数据可视化是数据应用一种形式，是满足用户需求一种手段。数据图形图表化，直观视觉呈现，达到发现、分析、预测、监控、决策的目的！ ##### 2.数据可视化用在哪里？（公司） - [x] 通用报表 - [x] 移动端图表 - [x] 大屏可视化 - [x] 图编辑&图分析 - [x] 地理可视化 ##### 3.如何使用数据可视化？ Echarts是一个使用JavaScript实现的开源可视化库，由百度团队开发，涵盖行业广泛：趋势图、饼状图、柱形图、折线图、热点图、3D图！ Echarts遵循Apache-2.0开源协议，免费使用，兼容绝大部分浏览器。 官方地址：百度搜Echarts或者https://echarts.apache.org/zh/index.html ``` 练习；3D魔方页面效果（难度系数：1星半） ``` ##### 4.快速学习Echarts使用流程<五部曲> ``` 第一步：下载并且引入echarts.js文件-----图表依赖 echarts.js文件 第二步：准备一个可以设置高宽的DOM容器-----创建空间存放图表 补充知识：JavaScript=ECMAScript5.0(核心语法)+DOM（修改页面效果）+BOM（浏览器页面效果） 第三步：初始化echarts实例对象----实例化图表对象 第四步：指定配置项和数据-----根据需求实现图表上数据的效果 第五步：将配置项设置给echarts实例对象----完成一个图表数据展现 ``` ##### 5.公司常用图表 - [x] 折线图 - [ ] 柱状图 - [ ] 散点图 - [ ] 饼图 - [ ] 地理图 - [ ] 仪表图 ##### 6.详解折线图—学习配置项 > 案例：计算张三丰同学每个月的开销（折线图） ``` 1.构建Echars骨架 引入echarts、DOM容器、初始化对象、设置配置项与数据、设置配置项至图表（5分钟） 2. 设置配置项与数据 分析：月份+花钱---明确的数据----数组的方式表示 X轴--月份数据： xDataArr=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] Y轴--花钱数据： yDataArr=[1255,2556,5161,2649,1254,4425,3546,4545,4565,1666,5445,1214] ``` > 需求1：获取XX童鞋最高开销最低开销（markPoint标注节点），平均值（markLine标注节点） ``` 语法：针对标注数据处理，出现在《系列series》,markPoint 注意：出现在《系列series》中 第一步： ,markPoint:{ //标注 data: [{},{}] //获取最大最小值，数组保存两个对象 } 第二步： ,markPoint:{ //标注 data: [ { type:"max" //获取图表最大值 ,name:"最大值" //name特点：后台传输数据（前端 input表单空间中name属性一样效果） },{ type:"min" //获取图表最小值 ,name:"最小值" //name特点：后台传输数据（前端 input表单空间中name属性一样效果） } ] //获取最大最小值，数组保存两个对象 } ------------------------------------------------ 语法：针对标注数据做中轴线处理，出现在《系列series》,markLine ,markLine:{ data:[{ type:"average" //平均值 ,name:"平均值" }] } ``` > 需求2：获取张三丰同学2到5月份的数据展示、6到7月份的数据展示、9到11月份数据展示（区间数据展示） ``` 语法：针对标注数据做区间块处理，出现在《系列series》，markArea ，markArea：{ data: [[{},{}],[{},{}],[{},{}]] //data数据节点：建议使用数组方式接收数据 } ``` > 需求3：优化线条效果—结束位置 ``` 语法：针对数据线条处理：出现在《系列series》smooth：false默认/true smooth：true 线条平滑效果 语法:针对数据线条处理：出现在《系列series》 lineStyle:{ color:"#ff0" ,type:"solid/dotted/dashed" } 语法：针对数据背景填充处理，出现在《系列series》 ,areaStyle:{ color: "16进制色值" } 语法：出现在XAxis中，boundragGap:false 功能：X轴紧贴Y轴，第一个值数据紧贴Y轴（数据对比明显） ``` > 需求4：如果每个月开销差距并不大，怎么处理？ ``` Y轴数据相近，语法：出现在Y轴上，添加scale:true----缩放：脱离0值比例 ``` > 需求5：我想展示两位同学的开销，怎么办？ ``` 增加一位同学数据，怎么添加到系列：series：建议跟数组[] ``` > 需求6：如果出现两条数据---堆叠图，出现什么效果(杂乱)？怎么解决？ ``` 解决方案：1，series系列中的两个对象中，name,type,lineStyle....平级 2，语法：stack:"all"（两条或者以上线不会交错显示） ``` ``` 配置项 title:标题组件 tooltip： 提示框组件 lengend：图例组件 toolbox:工具栏 ----------------------以上通用配置项（任意图表上都可以使用），出现在option xAxis：X轴 yAxis: Y轴 series：系列：设置数据 grid:直角坐标系网格 ``` ##### 7.通用配置项说明 ``` 通用配置案例：每个名人的年纪！ var xDataArr=["孙悟空","猪八戒","阎王","玉皇大帝","太上老君"] var yDataArr=[500,300,100,665,688] echarts基本架构：引入echarts、创建DOM、创建echarts对象、设置配置项和数据、设置图表 ``` ``` 通用配置案例： 通用配置
``` ``` 1.通用配置title----使用：option中设置 文字样式：textStyle 控制标题的样式:color、fontStyle、fontSize 标题边框: borderWidth、borderColor、borderRadius 标题位置:left、top、right、buttom ``` ``` 2.通用配置tooltip tooltip:提示框组件，用于配置鼠标悬停时显示框效果 触发类型：trigger item必须移动到坐标点上才可以显示,axis只要鼠标在坐标轴就显示 触发时机:triggerOn mouseover（默认悬停有效果）,click(鼠标点击上去才有效果) 格式化:formatter 字符串模板、回调函数 ``` ``` 3.通用配置toolbox toolbox:Echarts提供的工具栏:内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具 ``` ``` 4.通用配置legend legend：图例组件 用于筛选系列，需要和series配合使用！ 语法使用： ①.legend中的data是一个数组 ②.legend中data的值需要和series数组中某组数据的name值一致才可以使用 ``` ``` 案例：制作一个柱状图（使用真实图表）图标名称：叫做教学支持数据，文字加粗：20像素、颜色：#4393c 显示每位老师9月份跟10月份的授课课时数，标注下最大值、最小值与平均值，如果数值差距不大，脱离0值，悬停到柱状图上需要显示XXX老师9月课时：XXX 使用互推送GIT提交 ``` ##### 8.详解饼图使用--学习配置项 饼图可以直观的看出数据的占比情况，项目使用较多！ ``` 饼图的实现步骤： 1.引入echarts、创建DOM、创建echarts对象、设置配置项和数据、设置图表 2.饼图数据:{name:"旅游",value:1600} ,{name:"交通费",value:1400} ,{name:"网购",value:3411} ,{name:"外卖",value:2645} ,{name:"谈对象",value:8517} 3.图表系列类型 series下设置 type: "pie" ``` 饼图的综合案例： ```
``` 配置项显示数值 label 饼图文字显示 show: true；默认显示 ---可以不写 格式化:formatter： 字符串模板、回调函数，在series中编写：
radius 饼图的圆环设置 ``` 语法：radius:数值/数值%/[数值%,数值%] ``` radius 饼图的南丁格尔玫瑰图（半径不同的饼图），在series对象中设置 ``` 语法：roseType: "radius" ``` selectedMode选中图表数据的效果，在series对象中设置 ``` 语法：selectedMode:"single/multiple" ``` selectedOffset:偏移距离 ##### 9.详解地理图--配置项 1.地理图表有两种使用方式 - 百度地图API（学习暂不推荐，注册开通比较繁琐） ​ 需要申请百度地图AK：https://lbsyun.baidu.com/ 注册成为开发者 注册参考步骤：https://blog.csdn.net/qq_51026638/article/details/120906104 - 矢量地图 需要准备矢量地图数据 2.使用矢量图的步骤 ``` 2.1 引入js文件、DOM容器、初始化对象、设置初始化对象 引入JQuery.js对象 2.2准备中国的矢量图地图json文件，放到项目的map/目录下 china.json 2.3使用Ajax获取china.json $.get(‘map/china.json’,funtion(china){}) 在回调函数中向echarts全局对象注册地图的json数据 echarts.registerMap(‘chinaMap’,china); 在option对象中添加geo并设置 type:’map’ map:’chinaMap’ ```