echarts多线条拼接，提示处理展示方案

echarts多线条拼接数据集展示方案

1.数据存储规范

<!--处理前-->
data1:[1,2,3,null,null,2,3,6]
data2:[null,null,null,5,4,null,null,null]
<!--处理过程-->
data1与data2交点处,选同一源的数据点。例：data1[3],data1[4]或data2[2],data2[5].可根据展示情况修改，将一类的锚点延长。
<!--处理后-->
data1:[1,2,3,null,null,2,3,6]
data2:[null,null,3,5,4,2,null,null]
此处不能在data1添加，否则data1形成完整的线图，无法排除该情况可通过分点不同源实现：
data1:[1,2,3,5,null,2,3,6]
data2:[null,null,null,5,4,2,null,null]
在data1和data2分别添加点

2.关于tooltip在交点提示的问题

使用加点方式可以连贯线路，但在交接点处tooltip会有两个线路的提示，应当通过

formatter属性过滤人为添加的点的信息，如果在同一数据源添加了点位，可以直接判断该位置的params对象内容进行筛选，如果在不同数据源添加，就需要提供数据组辅助判断显示的对象。以下是同一数据源的处理方式：

formatter: function(params) {
  console.log(params) // 这里是两个数组，
  if (params[0].data != '-') {
    return toolTipFormatter(params[0])
  } else {
    return toolTipFormatter(params[1])
  }
}

3.整体结构

{
  color: [
    '#007D8C',
    '#34DAA3',
    '#4DD0E1',
    '#1BB1C4',
    '#9DEEF8',
    '#1197A7'
  ],
  grid: {
    x: 101,
    y: 56,
    x2: 64,
    y2: 60,
    borderWidth: 1
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params) {
      console.log(params) // 这里是两个数组，
      if (params[0].data != '-') {
        return toolTipFormatter(params[0])
      } else {
        return toolTipFormatter(params[1])
      }
    }
  },
  legend: {
    top: '5%',
    right: 'middle',
    // 图例标记的图形宽度
    itemWidth: 24,
    // 图例标记的图形高度
    itemHeight: 4,
      textStyle: {
      color: '#8C8C8C',
      fontSize: 14,
      fontWeight: 400
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: res['xAxis'],
    nameTextStyle: {
      fontSize: 12,
        fontWeight: 400,
          color: '#8C8C8C'
    },
    axisTick: {
      show: false
    },
    // 轴线颜色
    axisLine: {
      show: false,
        lineStyle: {
        color: '#8C8C8C'
      }
    }
  },
  yAxis: {
    name: '单位：万元',
    type: 'value',
    nameLocation: 'end',
    nameTextStyle: {
      fontSize: 14,
      fontWeight: 400,
      color: '#585858'
    }
  },
  series: [
    {
      name: '实际值',
      color: '#0FACC0',
      type: 'line',
      smooth: true,
      data: data1,
      zlevel: 1
    },
    {
      name: '预测值',
      color: '#FE9619',
      type: 'line',
      lineStyle: {
        type: 'dotted' //虚线类型
      },
      smooth: true,
      data: data2
    }
  ]
}