egg-development
Version:
development tool for egg
50 lines (43 loc) • 951 B
HTML
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="mountNode"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.9/g2.min.js"></script>
<script>
var data = {{placeholder}};
const chart = new G2.Chart({
container: 'mountNode', // 指定图表容器 ID
height: data.length * 22, // 指定图表高度
forceFit: true,
padding: 'auto',
});
// Step 2: 载入数据源
chart.source(data, {
range: {
type: 'time',
mask: 'HH:mm:ss',
nice: true,
},
});
chart
.coord()
.transpose()
.scale(1, -1);
chart.legend({ position: 'top' });
chart.tooltip({
showTitle: false,
itemTpl: '<li>{duration}ms: {name} </li>'
});
chart
.interval()
.position('title*range')
.color('type')
.tooltip('name*duration', (name, duration) => ({ name, duration }))
.size(5);
chart.render();
</script>
</body>
</html>