SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height">
	<title>零钱管家 APP 收支占比趋势分析</title>
	<style>
		::-webkit-scrollbar {
			display: none;
		}

		html,
		body {
			overflow: hidden;
			height: 100%;
			margin: 0;
		}
	</style>
        <script src="https://unpkg.com/localforage@1.7.3/dist/localforage.js"></script>
</head>

<body>
	<div id="mountNode"></div>
	<script>
		/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;
	</script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js">

	</script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js">

	</script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js">

	</script>
	<script>
		let data = [];
        for (let i=0; i< 100; i++) {
            data.push({
                time: i,
                time1: (i+100),
                name: 'x',
                value: Math.random(),
            });
            // data.push({
            //     time: i,
            //     time1: (i+200),
            //     name: 'y',
            //     value: Math.random(),
            // });
        }
        console.log(data);

        const ds = new DataSet();
        const dv = ds.createView().source(data);
        // dv.transform({
        //     type: 'map',
        //     callback(row) { // 加工数据后返回新的一行，默认返回行数据本身
        //         row.time = row.time1 - 100;
        //         return row;
        //     }
        // })

        const chart = new G2.Chart({
           container: 'mountNode',
            forceFit: true,
            height: 500, 
        });

        chart.on('tooltip:change', function(ev) {
            const items = ev.items; // tooltip显示的项
            const origin = items[0]; // 将一条数据改成多条数据
            const range = origin.point._origin.range;
            items[0].name = '当前钢卷号';
            items[1].name = '时间戳';
            items[2].name = '指标值';
            // items[3].name = '当前钢卷号';
            // items[4].name = '时间戳';
            // items[5].name = '指标值';
            // items.splice(0); // 清空
            // items.push(Object.assign({
            //     name: '开始值',
            //     marker: true,
            //     value: range[0]
            // }, origin));
            // items.push(Object.assign({
            //     name: '结束值',
            //     marker: true,
            //     value: range[1]
            // }, origin));
        });

        chart.source(dv);
        chart.line().position('time*value').color('name')
        .tooltip('name*time1*value');

// chart.interval().shape('textInterval').position('variety*value').color('type').opacity(1).adjust([{
//     type: 'dodge',
//     marginRatio: 1/32,
// }]);
        chart.render();
	</script>
</body>

</html>

            

                
本项目引用的自定义外部资源