echarts多条折线图对应的x轴数据不同且使连线连续

参考文章：x轴数据不同
数据连续

前两天要画一个echarts图，用两条曲线来分别展示修改前和修改后的高度和体积的对应关系，形成对比。
H作为x轴，V作为y轴。H和V都是可变的。
封装数据：series中的data项[[H,V],[H,v]···]，按参考文章1中的一样，将数据封装成如下格式：

第一列为H，第二列为V
具体的封装办法。。。自己搞吧。。。
由于我这里要画两条曲线以作对比，x轴的H值可能是完全不一样的，比如我的第二条x轴的数据是以10开头的：

然后series里是这样的：

坑来了：第一个的x点是20，第二个的是10，图画的时候是以第一个data的数据先画，后画第二个data中的，也就是说，按第一个data的H值画好了x轴点，若是第二个data中存在第一个data中没有的H值，那么这个值会补到第一组x点的最后面，曲线是乱画的。所以要设置xAxis中的data数组：
将两条曲线的x轴的数据拿出来进行 拼接、去重、排序操作


至此，已经完成了绝大部分，最后处理第一条曲线在a点有值，但第二条曲线在a点没值的情况，不让其中断，使用connectNulls：true来连接空数据，option如下：

    var option = {
        title: {
          text: '对比'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.lengedData
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: 50,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          name: 'H',
          type: 'category',
          boundaryGap: false,
          data: this.drawXAxisData
        },
        yAxis: {
          name: 'V',
          type: 'value'
        },
        series: [
          {
            name: this.fileVer,
            type: 'line',
            data: this.realBeforeData,
            // 这是让h刻度缺失的点，数据正常连接不断开
            connectNulls: true
          },
          {
            name: this.currVer,
            type: 'line',
            data: this.realAfterData,
            connectNulls: true
          }
        ]
      }

最后，有一个小知识点： 如果echarts图画在tab页，图的宽度就会只有100px,解决方法： 重新给echarts图设置宽度。
如下：
ref写在画图的div的外层，

<div ref="echart">
  <div id="drawchart" style="width: 100%;height: 400px;"/>
</div>

结束。