ECHARTS 折线图使用SERIES.CONNECTNULLS实现断点连接空数据

小半 • 2023年1月19日上午11:03 • 前端开发 • 阅读 369

一、series-line.connectNulls详解

是否连接空数据。

二、原效果图

三、实现的代码

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      // stack: 'Total',
      connectNulls:true,
      data: [120, 132, 101, 120, null, null, null],
      z:3
    },
    {
      name: 'Union Ads',
      type: 'line',
      // stack: 'Total',
      connectNulls:true,
      lineStyle: {
        type: 'dotted'
      },
      data: [null, null,null , 120, null, null, 130],
      z:2
    },
    {
      name: 'Video Ads',
      type: 'line',
      // stack: 'Total',//数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
      connectNulls:true,//是否断点连接
       lineStyle: {
        type: 'dotted'
      },
      data: [null, null,null , 120, null, null, 120],
       z:1
    },

  ]
};

四、最终效果