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

主讲教师：王晓项目三：电商数据可视化项目交互式设计任务4：设置图例组件数据可视化技术与应用

讨论主题讨论：1.同学们在以往的学习或项目中，遇到过哪些因图例组件设置不合理而导致的数据可视化问题？2.在实际数据可视化项目中，同学们认为图例组件应具备哪些功能以提升用户体验？

030102目录CONTENTS图例组件简介图例组件的属性图例组件示例

1.培养同学们的数据可视化思维和审美能力，提高同学们对数据可视化的整体把握和设计能力。2.培养同学们的实践能力和问题解决能力，鼓励同学们在实际项目中积极探索和创新，不断提升数据可视化技术水平。1.掌握ECharts图例组件的基本概念和作用，理解图例组件在数据可视化中的重要性。2.熟悉ECharts图例组件的常用属性设置方法，包括图例的显示隐藏、布局、样式等。1.能够根据实际数据可视化需求，灵活设置图例组件的属性，实现多系列图表的图例配置。2.能够对图例组件进行优化，提升数据可视化的交互性和可读性，满足不同应用场景和用户需求。教学目标素质目标知识目标能力目标

如何根据数据的具体特点，合理选择和设计图例，以达到最佳的视觉传达效果。02难点01重点图例组件的配置项（如位置、样式、触发交互等）及其对数据可视化效果的影响 解决办法通过实例演示与讲解相结合的方式，展示不同配置下的图例效果，引导学生动手实践，对比分析效果差异。重点与难点

案例分析

图例组件简介图例（legend）组件是ECharts中较为常用的组件，它用于以不同的颜色区别系列标记的名字，表述了数据与图形的关联。用户在操作时，可以通过单击图例控制哪些数据系列显示或不显示。在ECharts3.x/ECharts4.x中，单个ECharts实例可以存在多个图例组件，方便多个图例的布局。当图例数量过多时，可以使用滚动翻页。

图例组件的属性参数默认值描述{boolean}showtrue是否显示图例，可选为：true（显示）和false（隐藏）{string}typeplain图例的类型，可选为：plain（普通）和scroll（可滚动翻页）{number}zlevel0同网格组件参数属性表{number}z2同网格组件参数属性表{string}orienthorizontal布局方式，可选为：horizontal和vertical{string}x或{number}xcenter水平安放位置，单位为px，可选为：center、left、right、{number}{string}y或{number}ytop垂直安放位置，单位为px，可选为：top、bottom、center、{number}

图例组件的属性参数默认值描述{color}backgroundColortransparent图例背景颜色{string}borderColor#ccc图例边框颜色{number}borderWidth0图例边框线宽，单位为px{number}padding或{Array}padding5图例内边距，单位为px，见图例组件属性示意图{number}itemGap10各个item之间的间隔，单位为px，横向布局时为水平间隔，纵向布局时为纵向间隔，见图例组件属性示意图{number}itemWidth25图例标记的图形宽度{number}itemHeight14图例标记的图形高度{Object}textStyle{color:#333}图例的公用文本样式，可设color为auto

图例组件的属性参数默认值描述{string}formatter或{Function}formatternull用于格式化图例文本，支持字符串模板和回调函数两种形式{boolean}selectedMode或{string}selectedModetrue选择模式，可选为single和multiple{Object}selectednull图例默认选中状态表，可配合LEGEND.SELECTED事件做动态数据载入{Array}data[]图例的数据数组，数组项通常为字符串，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串可实现手动分行（列）使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。如需个性化图例文字样式，可将数组项改为{Object}，指定文本样式和个性化图例icon，格式为：{name:{string},textStyle:{Object},icon:{string}}

图例组件示例图例组件属性示意图如图所示。

图例组件示例利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制折柱