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

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

030102目录CONTENTS标题组件简介常见属性设置标题组件的注意事项

讨论主题讨论：1.标题在图表中的作用是什么？2.你认为一个好的图表标题应该具备哪些特点？3.在你之前的图表制作中，有没有遇到过需要调整标题样式或位置的情况？你是如何处理的？

案例导入

标题组件简介标题组件（title），顾名思义，就是图表的标题，它是ECharts中的一个比较简单的组件。在ECharts2.x中，单个ECharts实例最多只能拥有一个标题组件（title），每个标题组件可以配置主标题、副标题。而在ECharts3.x或ECharts4.x中，可以配置任意多个标题组件，这在需要对标题进行排版时，或单个实例中的多个图表都需要标题时会比较有用。

标题组件示例

标题组件简介

标题组件示例

标题组件属性介绍标题组件属性示意图如图所示。

标题组件的属性参数默认值描述{boolean}showtrue是否显示标题组件，可选为：true（显示）和false（隐藏）{number}zlevel0同网格组件参数属性表{number}z2同网格组件参数属性表{string}text主标题文本，\n指定换行{string}link主标题文本超链接

标题组件的属性参数默认值描述{string}targetblank指定窗口打开主标题超链接，支持self及blank，不指定等同于指定为blank（新窗口）{string}subtext副标题文本，\n指定换行{string}subtargetblank指定窗口打开副标题超链接，支持self及blank，不指定等同于指定为blank（新窗口）{string|number}xleft水平安放位置，单位px，可选为center、left、right、{number}{string|number}ytop垂直安放位置，单位px，可选为top、bottom、center、{number}{string}textAlignauto水平对齐方式，可选为auto、left、right、center

标题组件的属性参数默认值描述{color}backgroundColortransparent标题背景颜色{string}borderColor#ccc标题边框颜色{number}borderWidth0标题边框线宽，单位为px{number}padding或{Array}padding5标题内边距，单位为px，见标题组件属性示意图{number}itemGap10主副标题纵向间隔，单位为px{Object}textStyle{color:#333,fontWeight:normal,fontSize:18,}主标题文本样式{Object}subtextStyle{color:#aaafontWeight:normal,fontSize:12,}副标题文本样式

绘制标题的注意事项（1）标题文本（text）：确保标题文本简洁且清晰地表达了图表的主题。（2）标题位置（left）：根据图表布局选择合适的位置，避免标题遮挡数据标签或影响图表的可读性。（3）标题样式（textStyle）：可以设置标题的字体、大小、颜色等样式，以确保它与图表风格一致。（4）标题显示（show）：根据需要设置是否显示标题，有些情况下可能需要隐藏标题。

上机练习根据本节课所学内容，结合之前的知识，完成下列练习题。设计一个简单的ECharts图表，并为其添加一个包含主标题和副标题的title组件。要求调整标题的颜色、字体大小和对齐方式，使其符合设计规范。

拓展任务图书馆实时数据大屏设计：完善智慧校园图书馆大屏展示，设计标题组件，完成以下任务：1.标题语言切换：根据用户选择的语言自动切换标题语言；2.标题样式风格统一；

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