G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>带虚线部分的折线图</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script>
12
      var second = 1000;
13
      var minute = 1000 * 60;
14
      var hour = 60 * minute;
15
      var day = 24 * hour;
16
      function toInterge(number, fix = 1) {
17
        if (Math.round(number) === number) {
18
          return `${number}`;
19
        }
20
        return `${Number(number).toFixed(fix)}`;
21
      }
22
      function humanizeDuration(duration, fix = 1) {
23
        if (duration === 0) {
24
          return 0;
25
        }
26
        if (duration < minute) {
27
          return `${toInterge(duration / second, fix)} 秒`;
28
        }
29
        if (duration < hour) {
30
          return `${toInterge(duration / minute, fix)} 分`;
31
        }
32
        if (duration < day) {
33
          return `${toInterge(duration / hour, fix)} 小时`;
34
        }
35
        return `${toInterge(duration / hour / 24, fix)} 天`;
36
      }
37
      var data = [
38
        {"date":1489593600000, "pv":17, "successRate":0.23529411764705882, "time":12351000, "count":4},
39
        {"date":1489680000000, "pv":10, "successRate":0.6, "time":18000, "count":6},
40
        {"date":1489766400000, "pv":3, "successRate":0, "time":0, "count":0},
41
        {"date":1489852800000, "pv":3, "successRate":0, "time":0, "count":0},
42
        {"date":1489939200000, "pv":18, "successRate":0.2222222222222222, "time":21157000, "count":4},
43
        {"date":1490025600000, "pv":32, "successRate":0.25, "time":3543000, "count":8},
44
        {"date":1490112000000, "pv":25, "successRate":0.56, "time":10000, "count":14},
45
        {"date":1490198400000, "pv":23, "successRate":0.43478260869565216, "time":24000, "count":10},
46
        {"date":1490284800000, "pv":7, "successRate":0.2857142857142857, "time":0, "count":2}
47
      ];
48
      var dash = [
49
        {"count":4, "date":1489593600000, "time":null},
50
        {"count":6, "date":1489680000000, "time":18000},
51
        {"count":0, "date":1489766400000, "time":0},
52
        {"count":0, "date":1489852800000, "time":0},
53
        {"count":4, "date":1489939200000, "time":21157000},
54
        {"count":8, "date":1490025600000, "time":null},
55
        {"count":14, "date":1490112000000, "time":null},
56
        {"count":10, "date":1490198400000, "time":24000},
57
        {"count":2, "date":1490284800000, "time":0}
58
      ];
59
      function pick(data, field) {
60
        return data.map(item => {
61
          var result = {};
62
          for (var key in item) {
63
            if (item.hasOwnProperty(key) && field.indexOf(key) !== -1) {
64
              result[key] = item[key];
65
            }
66
          }
67
          return result;
68
        });
69
      }
70
      var chart = new G2.Chart({
71
        id: 'c1',
72
        forceFit: true,
73
        height: 320,
74
        plotCfg: {
75
          margin: [ 40, 80, 80, 80 ],
76
        },
77
      });
78
      chart.legend({
79
        mode: false,
80
        position: 'bottom',
81
        dy: 5,
82
      });
83
      chart.axis('date', {
84
        title: false,
85
      });
86
      var scale = {
87
        date: {
88
          alias: '日期',
89
          type: 'time',
90
          mask: 'mm-dd',
91
        },
92
        pv: {
93
          alias: '进入次数',
94
          min: 0,
95
        },
96
        time: {
97
          alias: '平均时长',
98
          formatter: value => humanizeDuration(value, 0),
99
        },
100
        count: {
101
          alias: '次数',
102
        },
103
      };
104
      var view1 = chart.createView();
105
      view1.source(pick(data, [ 'pv', 'time', 'date' ]), scale);
106
      view1.line().position('date*pv*count').color('#4FAAEB').size(2);
107
      view1.line().position('date*time').color('#9AD681').size(2);
108
      var view2 = chart.createView();
109
      view2.source(pick(dash, [ 'pv', 'time', 'date' ]), scale);
110
      view2.col('time', {
111
        alias: ' '
112
      });
113
      view2.axis('time', false);
114
      view2.tooltip(false);
115
      view2.line().position('date*time').color('white').size(3).style({
116
        lineDash: [ 4, 4 ]
117
      });
118
      chart.render();
119
    </script>
120
  </body>
121
</html>
122
​

带虚线部分的折线图

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