项目三电商数据可视化项目交互式设计数据可视化技术与应用87.pptxVIP

主讲教师：王晓项目三：电商数据可视化项目交互式设计任务1：设置直角坐标系下的网格数据可视化技术与应用

030102目录CONTENTS网格的简介网格的属性网格示例

课堂导入思考：使用ECharts绘制图表时，可能会发现图表真正的绘图区域和图表容器之间有一些间隔，有时看上去不太协调。如何控制绘图区域与容器之间的间距？

1.培养工匠精神：通过精确到像素级的网格布局实践，培养精益求精的职业态度，树立数据可视化严谨性的专业意识。2.激发创新与协作能力：引导学生遵守数据可视化相关法律法规与版权规范，鼓励运用网格参数创新设计图表界面。1.掌握网格组件在直角坐标系中的功能。2.熟练应用网格属性参数。1.能根据业务需求精准控制图表绘制区域。2.能分析网格布局对数据传达的影响并迭代优化方案。教学目标素质目标知识目标能力目标

网格的简介ECharts中的网格是直角坐标系下定义网格布局和大小及其颜色的组件，用于定义直角坐标系整体布局。

网格的属性参数默认值描述{number}zlevel0一级层叠控制，每一个不同的zlevel将产生一个独立的Canvas，相同zlevel组件或图标将在同一个Canvas上渲染。zlevel越高，越靠顶层。Canvas对象增多会消耗更多内存和性能，且不建议设置过多zlevel，大部分情况可以通过二级层叠控制z实现层叠控制{number}z2二级层叠控制，同一个Canvas（相同zlevel）上，z越高，越靠顶层{number}或{string}x80直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比（字符串），如50%（显示区域横向中心）

网格的属性参数默认值描述{number}y或{string}y60直角坐标系内绘图网格左上角纵坐标，数值单位px，支持百分比（字符串），如50%（显示区域纵向中心）{number}x2或{string}x280直角坐标系内绘图网格右下角横坐标，数值单位px，支持百分比（字符串），如50%（显示区域横向中心）{number}y2或{string}y20直角坐标系内绘图网格右下角纵坐标，数值单位px，支持百分比（字符串），如50%（显示区域纵向中心）{number}width适应直角坐标系内绘图网格（不含坐标轴）宽度，数值单位px，指定width后将忽略x2，见图3?6。支持百分比（字符串），如50%（显示区域一半的宽度）{number}height适应直角坐标系内绘图网格（不含坐标轴）高度，数值单位px，指定height后将忽略y2，见图3?6，支持百分比（字符串），如50%（显示区域一半的高度）{color}backgroundColortransparent背景颜色{number}borderWidth1网格的边框线宽{color}borderColor#ccc网格的边框颜色

网格的属性定义网格布局和大小的6个参数如图所示。由ECharts网格组件参数表和下图可知，共有6个主要参数定义网格布局和大小。其中，x与y用于定义网格的左上角的位置；x2与y2用于定义网格的右下角的位置；width与height用于定义网格的宽度和高度；指定width后将忽略x2，指定height后将忽略y2。

网格的示例利用某一时间未来一周气温变化数据绘制折线图，并为图表配置网格组件，如图所示。从图可以看出，本例中的网格边界线为4条边上的宽度为5px的粗线条。

谢谢观看！数据可视化技术与应用