SOURCE

console 命令行工具 X clear

                    
>
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%;
}

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