echarts三个月份数据对比图 实现思路

legend展示数据与tooltips数据不一致
先看结果:展示出来的legend
在这里插入图片描述
鼠标滑过当前日期展示的tooltips数据
echarts三个月份数据对比图 实现思路_第1张图片
这里的难点就是前两个月份的数据如何渲染上去到tooltips中,前两个月份的数据不在echarts的展示列。不能常规的series渲染。
后端给的数据(前两个月份的数据),都是放在series中的,和当月成功量,失败量并排。现在的实现思路是:

  1. 新增一个Y轴,给这个Y轴隐藏掉,看不见
  2. 将5,4,3月份的数据拼接成 如下格式()"800|800|800"push到series数组中,隐藏掉
  3. 将要展示的在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 += `
                      
                        ${titItem.split("/")[0]}${titItem.split("/")[1]}
                      `;
                } else {
                  title += `
                      
                      
                      `;
                }
              }
              let curString = `
                  
${title}
`
; 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 += `
${ curVal.seriesName } ${ curValArr[0] }${curValArr[0] && i == 3 ? "%" : ""} ${ curValArr[1] }${curValArr[1] && i == 3 ? "%" : ""} ${ curValArr[2] }${curValArr[2] && i == 3 ? "%" : ""}
`
; } return curString; }, };

你可能感兴趣的:(echarts,前端,javascript)