console
const chart = new G2.Chart({
container: 'container',
theme: 'classic',
autoFit: true,
});
const data = [{"time":"06:00","fans":220638,"num":0},{"time":"06:10","fans":220637,"num":-1},{"time":"06:20","fans":220636,"num":-1},{"time":"06:30","fans":220636,"num":0},{"time":"06:40","fans":220636,"num":0},{"time":"06:50","fans":220636,"num":0},{"time":"07:00","fans":220635,"num":-1},{"time":"07:10","fans":220636,"num":1},{"time":"07:20","fans":220641,"num":5},{"time":"07:30","fans":220643,"num":2},{"time":"07:40","fans":220647,"num":4},{"time":"07:50","fans":220650,"num":3},{"time":"08:00","fans":220654,"num":4},{"time":"08:10","fans":220658,"num":4},{"time":"08:20","fans":220664,"num":6},{"time":"08:30","fans":220668,"num":4},{"time":"08:40","fans":220677,"num":9},{"time":"08:50","fans":220680,"num":3},{"time":"09:00","fans":220683,"num":3},{"time":"09:10","fans":220687,"num":4},{"time":"09:20","fans":220691,"num":4},{"time":"09:30","fans":220698,"num":7},{"time":"09:40","fans":220704,"num":6},{"time":"09:50","fans":220711,"num":7},{"time":"10:00","fans":220715,"num":4},{"time":"10:10","fans":220718,"num":3},{"time":"10:20","fans":220725,"num":7},{"time":"10:30","fans":220734,"num":9},{"time":"10:40","fans":220741,"num":7},{"time":"10:50","fans":220749,"num":8},{"time":"11:00","fans":220757,"num":8},{"time":"11:10","fans":220767,"num":10},{"time":"11:20","fans":220773,"num":6},{"time":"11:30","fans":220783,"num":10},{"time":"11:40","fans":220792,"num":9},{"time":"11:50","fans":220806,"num":14},{"time":"12:00","fans":220811,"num":5},{"time":"12:10","fans":220822,"num":11},{"time":"12:20","fans":220834,"num":12},{"time":"12:30","fans":220836,"num":2},{"time":"12:40","fans":220871,"num":35},{"time":"12:50","fans":220931,"num":60},{"time":"13:00","fans":221004,"num":73},{"time":"13:10","fans":221082,"num":78},{"time":"13:20","fans":221122,"num":40},{"time":"13:30","fans":221166,"num":44},{"time":"13:40","fans":221207,"num":41},{"time":"13:50","fans":221245,"num":38},{"time":"14:00","fans":221270,"num":25},{"time":"14:10","fans":221302,"num":32},{"time":"14:20","fans":221333,"num":31},{"time":"14:30","fans":221365,"num":32},{"time":"14:40","fans":221416,"num":51},{"time":"14:50","fans":221492,"num":76},{"time":"15:00","fans":221568,"num":76},{"time":"15:10","fans":221628,"num":60},{"time":"15:20","fans":221695,"num":67},{"time":"15:30","fans":221705,"num":10},{"time":"15:40","fans":221708,"num":3},{"time":"15:50","fans":221714,"num":6},{"time":"16:00","fans":221721,"num":7},{"time":"16:10","fans":221725,"num":4},{"time":"16:20","fans":221726,"num":1},{"time":"16:30","fans":221733,"num":7},{"time":"16:40","fans":221735,"num":2},{"time":"16:50","fans":221736,"num":1},{"time":"17:00","fans":221741,"num":5},{"time":"17:10","fans":221746,"num":5},{"time":"17:20","fans":221751,"num":5},{"time":"17:30","fans":221752,"num":1},{"time":"17:40","fans":221758,"num":6},{"time":"17:50","fans":221765,"num":7}]
chart
.data({
type: 'inline',
value: data,
});
chart
.line()
.encode('x', 'time')
.encode('y', 'fans')
.encode('shape', 'smooth')
.style('stroke', '#fdae6b')
.style('lineWidth', 2)
.scale('y', { independent: true })
.axis('y', { title: '粉丝数', style: { titleFill: '#5B8FF9' } });
chart
.interval()
.encode('x', 'time')
.encode('y', 'num')
.axis('y', {
position: 'right',
title: '增量',
style: {
titleFill: '#fdae6b',
},
});
chart.render();
<div id="container" />
html,body,#container{
width: 100%;
height: 100%;
}