legend展示数据与tooltips数据不一致
先看结果：展示出来的legend
鼠标滑过当前日期展示的tooltips数据
这里的难点就是前两个月份的数据如何渲染上去到tooltips中，前两个月份的数据不在echarts的展示列。不能常规的series渲染。
后端给的数据（前两个月份的数据），都是放在series中的，和当月成功量，失败量并排。现在的实现思路是：
- 新增一个Y轴，给这个Y轴隐藏掉，看不见
- 将5，4，3月份的数据拼接成 如下格式（）
"800|800|800"，push到series数组中，隐藏掉 - 将要展示的在tooltip中的数据添加到series中，然后在tooltips里面自定义将字符串split解析展示
{
name:"总业务量(笔)",
type:'line',
data:["800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800","800|800|800",],
"yAxisIndex":"3",
},
option.tooltip = {
trigger: "axis",
formatter: (params) => {
let title = "";
let titleArr = params[11].value.split("|");
for (let k = 0; k < titleArr.length; k++) {
let titItem = titleArr[k];
if (titItem.split("/")[0] && titItem.split("/")[1]) {
title += `
<span style="display:inline-block;width:20%;min-width:70px;text-align: center;">
${titItem.split("/")[0]}月${titItem.split("/")[1]}日
</span>
`;
} else {
title += `
<span style="display:inline-block;width:20%;min-width:70px;text-align: center;">
</span>
`;
}
}
let curString = `
<div style="text-align:right;min-width:240px;">
<span style="display:inline-block;width:110px;text-align:left;"></span>
${title}
</div>
`;
let tableData = [
params[5],
params[6],
params[7],
params[8],
params[9],
params[10],
];
for (let i = 0; i < tableData.length; i++) {
let curVal = tableData[i];
let curValArr = curVal.value.split("|");
curString += `
<div class="tooptop-table" style="display: flex;width: 100%;justify-content: space-between;margin: .0833rem 0;">
<span style="display:inline-block;width:110px;text-align:left;">${
curVal.seriesName
}</span>
<span style="display:inline-block;width:20%;text-align:left;">${
curValArr[0]
}${curValArr[0] && i == 3 ? "%" : ""}</span>
<span style="display:inline-block;width:20%;text-align:left;">${
curValArr[1]
}${curValArr[1] && i == 3 ? "%" : ""}</span>
<span style="display:inline-block;width:20%;text-align:left;">${
curValArr[2]
}${curValArr[2] && i == 3 ? "%" : ""}</span>
</div>
`;
}
return curString;
},
};
