如何画基础折线图，可以参考之前文章：
https://blog.csdn.net/xy345382605/article/details/159460825?fromshare=blogdetail&sharetype=blogdetail&sharerId=159460825&sharerefer=PC&sharesource=xy345382605&sharefrom=from_link
技巧：鼠标悬停显示详情
核心需求：鼠标移入在某柱体时，该柱体显示「类 别 + 数量 」详情卡片，增强数据传递效率。
设置这一交互效果，能让用户在浏览折线图时，通过鼠标悬停获取更详细的数据信息，增强对数据的理解。首先，在画布上为每个圆点添加热区，在右侧交互面板中，点击 “新建交互”，选择 “鼠标悬停时” 事件 。在弹出的动作设置窗口中，添加 “显示 / 隐藏” 动作，目标是一个事先准备好的用于显示详细数据的元件，比如文本标签或动态面板。本篇介绍使用动态面板实现
若想学习文本标签的，可以参考本人写的另一篇文章：https://blog.csdn.net/xy345382605/article/details/159466876?fromshare=blogdetail&sharetype=blogdetail&sharerId=159466876&sharerefer=PC&sharesource=xy345382605&sharefrom=from_link
实战效果图
实现步骤
第一步：折线图组合
这一步的作用，防止折线图错位（个人习惯）
第二步：标签准备
（1）准备好文本标签
（2）调整详情卡位置。
第三步：新建动态面板
选中详情卡，右键转换为动态面板，并给动态面板命令，便于后续的维护。
第四步：设计面板内容
双击动态面板进入编辑状态，默认会有个state转态，点复制转态，就可以完成两个状态设置（命名为显示、隐藏；隐藏状态放前面）
其他几个详情卡也同样的方法设置，设置后效果图
第五步：添加交互
（1）为每一个圆点添加热区，控制好热区的高度和宽度，同时命名好每一个热区的名字，便于后续的区分。
（2）热区置顶，不置顶预览的时候可能不起效果。
注意点：先放大尺寸便于设置
（3）热区添加动作（鼠标移入时，显示面板；鼠标移出时，隐藏面板）。
添加「鼠标停放时」事件：「显示」详情卡片，设置「动画：淡入」「时长：300 毫秒」；
添加「鼠标离开时」事件：「隐藏」详情卡片，动画「淡出」「时长：300 毫秒」；
美化技巧：让折线图更具专业感
（一）色彩搭配：贴合场景与品牌
- 专业商务场景：主色用 #1890ff（蓝色）、辅助色 #722ed1（紫色），避免高饱和色；
- 数据对比场景：多组折线用「蓝色 #1890ff」「绿色 #52c41a」「橙色 #fa8c16」区分，且每组颜色与图例对应；
- 品牌适配场景：提取产品 LOGO 主色作为折线颜色，增强品牌一致性。
（二）细节优化：提升视觉体验
- 折线添加渐变填充：选中折线，在右侧「样式」面板勾选「填充」→「线性渐变」，从主色（#1890ff）到透明（#1890ff00），方向「从上到下」，营造层次感；
- 坐标轴刻度优化：纵轴数值可添加单位（如「万」「%」），横轴月份若过长可改为「1 月」「2 月」，避免文本重叠；
- 添加网格线：拖出「水平线」，复制 4 份（与纵轴刻度对应），颜色 #f5f5f5、粗细 1px，选中所有网格线，设置「置于底层」，帮助读者快速读取数据。
（三）添加图例：多组数据必备
若存在多组折线（如日 + 月+年），需添加图例：
- 拖出「矩形」（10×10px），颜色与对应折线一致，旁边添加「文本」元件（如「日活 (万)」），字体 12px、颜色 #666；
- 将图例组合后，放置在图表右上角，与标题间距 15px，多组图例水平排列，间距 20px。
