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

主讲教师：王晓项目三：电商数据可视化项目交互式设计任务7：标记点和标记线数据可视化技术与应用

030102目录CONTENTS标记点和标记线简介使用场景标记点和标记线实现04使用场景

讨论主题讨论：在分析某电商平台全年销售额折线图时，如何快速让决策者一眼识别出销售额的峰值、低谷以及异常波动点？有没有高效的可视化方式能突出这些关键数据？

标记点与标记线简介ECharts中，为了表现图表中的数值情况，引入了特殊的标记符号——标记点（MarkPoint）和标记线（MarkLine）。

请展开思考，标记点和标记线的应用场景？标记点和标记线的应用场景标记点（MarkPoint）：用于在图表中突出显示特定的数据点。标记线（MarkLine）：用于在图表中标注两条数据点之间的连线，强调数据间的关系。应用场景：数据比较、趋势强调、异常点标注等。

参数解读关于ECharts标记点的定义和配置选项的详细介绍：在ECharts中，标记点（markPoint）常用于表示最高值和最低值等数据。标记点有最大值、最小值、平均值的标记点，也可以是任意位置上的标记点，它需要在series字段下进行配置。标记点的各种属性如表所示。

参数解读关于ECharts标记线的定义和配置选项的详细介绍：标记线（markLine）常用于展示平均值等。为了更好地观察数据中的最高值、最低值和平均值等数据，需要在图表中配置和使用标记点与标记线。标记线是一条平行于x轴的水平线，有最大值、最小值、平均值等数据的标记线，它也是在series字段下进行配置的。标记线的各种属性如表所示。

标记点/标记线-代码实现创建标记点/标记线，方式非常相似，只是修改其类型是,markpoint还是markline，标记线需要指定起始坐标。示例代码如下：创建标记点创建标记线

标记点/标记线-代码实现重点内容标记点和标记线与数据进行关联通过数据字段将标记点/标记线与图表数据项关联，当数据更新时，标记点位置自动同步变化。

标记点和标记线-效果展示以Echarts实例为基准，展示了一周内某电商公司子网站的访问量，其中，对“搜索引擎”使用情况进行标记点和标记线的效果展示。在周五（Friday）为访问量最高，访问量为862，与周一（Monday）相连，用标记线进行展示。

使用场景使用标记点和标记线需要注意：（1）数据准确性：确保标记点和标记线所关联的数据是准确无误的。错误的数据会导致误导性的展示。（2）位置精确性：在图表中，标记点和标记线的位置需要精确对应到相应的数据点。如果位置不准确，可能会影响数据的解读。（3）样式一致性：在同一个图表中使用多个标记点或标记线时，保持它们的样式一致性，比如颜色、大小或线宽，有助于维护图表的整洁和可读性。（4）避免过度标记：在图表中过度使用标记点和标记线可能会使图表变得杂乱无章，影响用户对数据的快速理解。合理使用标记，突出关键数据点即可。

提示框-上机练习某电商平台需要制作数据可视化大屏，展示某季度各月份的销售额。任务要求：?使用ECharts绘制折线图，展示该季度每月的销售额数据。在折线图中，用标记点突出显示销售额最高和最低的月份，并自定义标记点样式（如不同颜色和形状）。?

知识拓展思考：标记点和标记线，都可以应用于哪些图例？

总结本节课介绍标记点与标记线的使用场景和意义。讲解标记点与标记线的配置选项，包括样式、位置、数据绑定等。

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