G2 - 带虚线部分的折线图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>带虚线部分的折线图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
var second = 1000;
var minute = 1000 * 60;
var hour = 60 * minute;
var day = 24 * hour;

function toInterge(number, fix = 1) {
  if (Math.round(number) === number) {
    return `${number}`;
  }
  return `${Number(number).toFixed(fix)}`;
}

function humanizeDuration(duration, fix = 1) {
  if (duration === 0) {
    return 0;
  }

  if (duration < minute) {
    return `${toInterge(duration / second, fix)} 秒`;
  }

  if (duration < hour) {
    return `${toInterge(duration / minute, fix)} 分`;
  }

  if (duration < day) {
    return `${toInterge(duration / hour, fix)} 小时`;
  }

  return `${toInterge(duration / hour / 24, fix)} 天`;
}

var data = [
  {"date":1489593600000, "pv":17, "successRate":0.23529411764705882, "time":12351000, "count":4},
  {"date":1489680000000, "pv":10, "successRate":0.6, "time":18000, "count":6},
  {"date":1489766400000, "pv":3, "successRate":0, "time":0, "count":0},
  {"date":1489852800000, "pv":3, "successRate":0, "time":0, "count":0},
  {"date":1489939200000, "pv":18, "successRate":0.2222222222222222, "time":21157000, "count":4},
  {"date":1490025600000, "pv":32, "successRate":0.25, "time":3543000, "count":8},
  {"date":1490112000000, "pv":25, "successRate":0.56, "time":10000, "count":14},
  {"date":1490198400000, "pv":23, "successRate":0.43478260869565216, "time":24000, "count":10},
  {"date":1490284800000, "pv":7, "successRate":0.2857142857142857, "time":0, "count":2}
];
var dash = [
  {"count":4, "date":1489593600000, "time":null},
  {"count":6, "date":1489680000000, "time":18000},
  {"count":0, "date":1489766400000, "time":0},
  {"count":0, "date":1489852800000, "time":0},
  {"count":4, "date":1489939200000, "time":21157000},
  {"count":8, "date":1490025600000, "time":null},
  {"count":14, "date":1490112000000, "time":null},
  {"count":10, "date":1490198400000, "time":24000},
  {"count":2, "date":1490284800000, "time":0}
];

function pick(data, field) {
  return data.map(item => {
    var result = {};
    for (var key in item) {
      if (item.hasOwnProperty(key) && field.indexOf(key) !== -1) {
        result[key] = item[key];
      }
    }
    return result;
  });
}

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 320,
  plotCfg: {
    margin: [ 40, 80, 80, 80 ],
  },
});

chart.legend({
  mode: false,
  position: 'bottom',
  dy: 5,
});

chart.axis('date', {
  title: false,
});

var scale = {
  date: {
    alias: '日期',
    type: 'time',
    mask: 'mm-dd',
  },
  pv: {
    alias: '进入次数',
    min: 0,
  },
  time: {
    alias: '平均时长',
    formatter: value => humanizeDuration(value, 0),
  },
  count: {
    alias: '次数',
  },
};

var view1 = chart.createView();
view1.source(pick(data, [ 'pv', 'time', 'date' ]), scale);
view1.line().position('date*pv*count').color('#4FAAEB').size(2);
view1.line().position('date*time').color('#9AD681').size(2);

var view2 = chart.createView();
view2.source(pick(dash, [ 'pv', 'time', 'date' ]), scale);
view2.col('time', {
  alias: ' '
});
view2.axis('time', false);
view2.tooltip(false);
view2.line().position('date*time').color('white').size(3).style({
  lineDash: [ 4, 4 ]
});
chart.render();
</script>


      </body>
    </html>
          
        
带虚线部分的折线图
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。了解更多