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