阿里的G2图表

1、官方地址：https://antv.alipay.com/g2/doc/

2、引入js:

<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.8/index.js">script>

3、折线表格：

<div style="width: 100%;float: left;margin-top: 20px;">
    <div style="width:100%;height: 400px!important;float: left;border: 1px solid #ddd;margin-right: 1%;">
        <div class="drawboxtit">平台盈余月度走势图div>
        <div id="c1">div>
        <script>
            var data = ${platformSurplusMaps};
            var chart = new G2.Chart({
                id: 'c1',
                forceFit: true,
                height: 350
            });
            chart.source(data, {
                month: {
                    alias: '日期<以月为单位统计平台盈余额>',
                    range: [0, 1]
                },
                platformSurplus: {
                    alias: '平台盈余额<元>'
                }
            });
            chart.line().position('month*platformSurplus').size(2);
            chart.point().position('month*platformSurplus').size(4).shape('circle').style({
                stroke: '#fff',
                lineWidth: 1
            });
            chart.render();

            // 设置默认选中
            var geom = chart.getGeoms()[0]; // 获取所有的图形
            var items = geom.getData(); // 获取图形对应的数据
            geom.setSelected(items[1]); // 设置选中

            // 弹出提示框
            function showOpen(text) {
                parent.layer.open({
                    type: 1,
                    content: '
' + text + '
',
                    btn: 'OK',
                    btnAlign: 'c', //按钮居中
                    yes: function (index, layero) {
                        parent.layer.close(index);
                        history.go(0);
                    }
                });
            }
        script>
    div>
div>

3、platformSurplusMaps要是JSon 数据，封装成List>:

List> platformSurplusMaps = productOrderService.getPSByMonth(0);
JSONArray jsonObject = JSONArray.fromObject(platformSurplusMaps);
String jsonString = jsonObject.toString();
model.addAttribute("platformSurplusMaps", jsonString);