type
status
date
slug
summary
tags
category
icon
password
📝 前言
由所列图片所示，由于有大量的折线、柱状图、漏斗图在卡片中展示，并且卡片样式相同，图像样式功能相同。封装三种图像组件并在封装的卡片组件中根据类型引用是最好的办法。最后在不同组件中引用卡片组件并传类型与数据即可。
折线可以分组，一组是现在的数据另一组是以前数据；2.可以按组配置折线类型；3.可以按组配置折线颜色；4.提示框需要具体展示每条数据的日期，日期不重复；5.可以按图例来隐藏与展示图像，也可以通过按钮来以组展示；6.按钮颜色与组别颜色一致；7.不能关闭所有折线
步骤1：封装卡片
卡片分为2部分：头部与主体内容。
分析：头部主要有左侧标题与提示、标题下方数据总览展示(可选)、右侧“查看详情”(可选)；下方则是不同类型如表格、图像展示。理清结构封装不难。卡片头部注意接收所需数据即可。
步骤2：折线图封装
2.1 初步简单封装
需求：以上两图可知 1.折线可以分组，一组是现在的数据另一组是以前数据；2.可以按组配置折线类型；3.可以按组配置折线颜色；4.提示框需要具体处理日期展示；5.可以按图例来隐藏与展示图像，也可以通过按钮来以组展示
具体分析：1.先封装一个简单的折线图，再具体考虑需求。我们先需要从父组件传递X、Y轴所需数据，线段颜色、类型，在子组件中去接收。由于数据是多条且是按组展示，所以父组件传递数据时最好整理成二维数组[[{},{}],[{},{}]]的形态，如果直接[{},{},{},{}]后续子组件整理数据展示时无法判断组别，因为我们要按组来展示折线颜色。
1.父组件：
2.子组件：
标红部分为关键处理。1.由于接收的是二维数组，需要展开处理。折线颜色按组别展示，每组折线的颜色可以每条数据都传，也可以每组只传一次，所以颜色可以按item.color取，也可以取每组的一条颜色作为baseColor展示 2.需要整理y轴刻度，取最小和最大作为y轴的min和max属性。
2.2 进一步封装
2.2.1 提示框分组展示。
考虑过程：1.提示框日期是按X轴展示的，但X轴肯定不能有多条。2.X轴保持现在这样正常传递，数据传递时以data.value.map(item => ({x:item.date,y:item.counts}))形式传递，但折线图配置中series.data必须是数据，需要再把y取出来，其余处理也得修改，ts也要修改，提示框还是无法分辨。3.X轴保持现状传递，把每条折线数据中的日期数据单独整理出来进行传递，这样其余处理不用改，再提示框中只需要找对应日期就行。
父组件chartSeries部分：
子组件tooltip的处理
分析：
- 每个系列除了
data（只包含 Y 值）之外，额外保存一个dates数组用于保存日期。
- 在
tooltip中通过seriesIndex和dataIndex获取对应的日期：
使用
params.seriesIndex 获取当前的系列，使用 param.dataIndex 获取对应的数据点索引，然后从 dates 中取出该数据点的日期。这个方法有个很大的误区：遍历params时，
param.dataIndex对应的是系列项索引，如果再去用这个索引去找dates数组中对应的索引的话，那么tooltip展示的时候永远不可能有一样的时间。假如x轴是6，dates是[6,7],提示框在6展示的时候会展示6和7。解决办法：
- 使用一个
Set来追踪已经展示过的date，无论lineType是否一致，只要date相同，日期不会重复展示。
- 当
lineType一致且date一致时，也只展示一次日期。
displayedDates是一个Set：- 用来追踪已经展示过的
date，确保无论lineType是否一致，只要date相同，日期不会重复显示。
if (!displayedDates.has(date))：- 检查当前
date是否已经展示过。如果未展示过，就展示该日期，并将其添加到displayedDates集合中，避免后续重复展示。
- 每条线的数值展示：
- 即使日期只展示一次，
seriesName和对应的data仍然会为每条线显示。
2.2.2 隔离emphasis和tooltip
需求1：一旦鼠标进入坐标系，就同时触发了tooltip与emphasis。我们需要当鼠标移到折线上时才触发emphasis。
需求2：不能关闭所有折线。
遇到问题：chart.on无法绑定鼠标事件，将整个图都识别为了空白区。可能原因1.渲染问题，排除(渲染正常)；2.组件嵌套深，组件挂载问题。排除。3.echarts版本问题，用以前正常的4.2.1版本不行。4.多方查找，偶发性问题，很多人都在github上给echarts提过这个issue
解决办法：用getZr().on()绑定鼠标事件
2.2.3 通过按钮控制每组折线的展示
需求：1.图例精确到了每条线的显示，我们还需要按钮来控制一个组别线段的显示。按钮的边框颜色与组别的颜色相同，并且根据点击动作动态展示。2.不能同时选择所有按钮
解决思路：1.在处理接收到的seriesGroup对其进行展开变成series时，将传来的颜色与组别名字取出。2.根据当前按钮颜色与其它按钮颜色来判断是不是选中了所有按钮。3.根据按钮颜色来判断它的选中状态，切换按钮颜色，并调整图例的显示与隐藏
按钮点击切换显示隐藏关键思路：1.通过索引拿到组别，遍历拿到该组别中所有线的名字数组；2.通过遍历名字数组查看chart配置项的图例中selected对象有没有该名字，可知道这个组别中的线的显示状态，通过chart的dispatchAction方法进行事件legendUnSelect与legendSelect的传递