console
const chart = new G2.Chart({
container: 'container',
theme: 'classic',
autoFit: true,
});
const data = [{"time":"22:10","view":null,"num":1},{"time":"22:15","view":1,"num":778},{"time":"22:20","view":779,"num":655},{"time":"22:25","view":1434,"num":410},{"time":"22:30","view":1844,"num":340},{"time":"22:35","view":2184,"num":322},{"time":"22:40","view":2506,"num":271},{"time":"22:45","view":2777,"num":267},{"time":"22:50","view":3044,"num":290},{"time":"22:55","view":3334,"num":288},{"time":"23:00","view":3622,"num":254},{"time":"23:05","view":3876,"num":261},{"time":"23:10","view":4137,"num":286},{"time":"23:15","view":4423,"num":253},{"time":"23:20","view":4676,"num":239},{"time":"23:25","view":4915,"num":198},{"time":"23:30","view":5113,"num":186},{"time":"23:35","view":5299,"num":199},{"time":"23:40","view":5498,"num":179},{"time":"23:45","view":5677,"num":170},{"time":"23:50","view":5847,"num":125},{"time":"23:55","view":5972,"num":166},{"time":"00:00","view":6138,"num":185},{"time":"00:05","view":6323,"num":163},{"time":"00:10","view":6486,"num":161},{"time":"00:15","view":6647,"num":129},{"time":"00:20","view":6776,"num":152},{"time":"00:25","view":6928,"num":135},{"time":"00:30","view":7063,"num":117},{"time":"00:35","view":7180,"num":99},{"time":"00:40","view":7279,"num":117},{"time":"00:45","view":7396,"num":104},{"time":"00:50","view":7500,"num":95},{"time":"00:55","view":7595,"num":45},{"time":"01:00","view":7640,"num":21},{"time":"01:05","view":7661,"num":23},{"time":"01:10","view":7684,"num":71},{"time":"01:15","view":7755,"num":99},{"time":"01:20","view":7854,"num":85},{"time":"01:25","view":7939,"num":87},{"time":"01:30","view":8026,"num":71},{"time":"01:35","view":8097,"num":56},{"time":"01:40","view":8153,"num":53},{"time":"01:45","view":8206,"num":62},{"time":"01:50","view":8268,"num":57},{"time":"01:55","view":8325,"num":68},{"time":"02:00","view":8393,"num":49},{"time":"02:05","view":8442,"num":41},{"time":"02:10","view":8483,"num":46},{"time":"02:15","view":8529,"num":26},{"time":"02:20","view":8555,"num":44},{"time":"02:25","view":8599,"num":45},{"time":"02:30","view":8644,"num":57},{"time":"02:35","view":8701,"num":39},{"time":"02:40","view":8740,"num":60},{"time":"02:45","view":8800,"num":59},{"time":"02:50","view":8859,"num":27},{"time":"02:55","view":8886,"num":27},{"time":"03:00","view":8913,"num":42},{"time":"03:05","view":8955,"num":40},{"time":"03:10","view":8995,"num":36},{"time":"03:15","view":9031,"num":21},{"time":"03:20","view":9052,"num":28},{"time":"03:25","view":9080,"num":25},{"time":"03:30","view":9105,"num":33},{"time":"03:35","view":9138,"num":28},{"time":"03:40","view":9166,"num":34},{"time":"03:45","view":9200,"num":66},{"time":"03:50","view":9266,"num":52},{"time":"03:55","view":9318,"num":94},{"time":"04:00","view":9412,"num":75},{"time":"04:05","view":9487,"num":67},{"time":"04:10","view":9554,"num":52},{"time":"04:15","view":9606,"num":39},{"time":"04:20","view":9645,"num":46},{"time":"04:25","view":9691,"num":44},{"time":"04:30","view":9735,"num":37},{"time":"04:35","view":9772,"num":47},{"time":"04:40","view":9819,"num":40},{"time":"04:45","view":9859,"num":57},{"time":"04:50","view":9916,"num":33},{"time":"04:55","view":9949,"num":43},{"time":"05:00","view":9992,"num":34},{"time":"05:05","view":10026,"num":46},{"time":"05:10","view":10072,"num":43},{"time":"05:15","view":10115,"num":33},{"time":"05:20","view":10148,"num":73},{"time":"05:25","view":10221,"num":59},{"time":"05:30","view":10280,"num":43},{"time":"05:35","view":10323,"num":45},{"time":"05:40","view":10368,"num":50},{"time":"05:45","view":10418,"num":61},{"time":"05:50","view":10479,"num":39},{"time":"05:55","view":10518,"num":74},{"time":"06:00","view":10592,"num":99},{"time":"06:05","view":10691,"num":88},{"time":"06:10","view":10779,"num":124},{"time":"06:15","view":10903,"num":124},{"time":"06:20","view":11027,"num":155},{"time":"06:25","view":11182,"num":129},{"time":"06:30","view":11311,"num":158},{"time":"06:35","view":11469,"num":189},{"time":"06:40","view":11658,"num":221},{"time":"06:45","view":11879,"num":229},{"time":"06:50","view":12108,"num":190},{"time":"06:55","view":12298,"num":264},{"time":"07:00","view":12562,"num":271},{"time":"07:05","view":12833,"num":283},{"time":"07:10","view":13116,"num":330},{"time":"07:15","view":13446,"num":327},{"time":"07:20","view":13773,"num":312},{"time":"07:25","view":14085,"num":405},{"time":"07:30","view":14490,"num":403},{"time":"07:35","view":14893,"num":428},{"time":"07:40","view":15321,"num":430},{"time":"07:45","view":15751,"num":433},{"time":"07:50","view":16184,"num":468},{"time":"07:55","view":16652,"num":424},{"time":"08:00","view":17076,"num":439},{"time":"08:05","view":17515,"num":439},{"time":"08:10","view":17954,"num":460},{"time":"08:15","view":18414,"num":475},{"time":"08:20","view":18889,"num":456},{"time":"08:25","view":19345,"num":411},{"time":"08:30","view":19756,"num":405},{"time":"08:35","view":20161,"num":373},{"time":"08:40","view":20534,"num":291},{"time":"08:45","view":20825,"num":382},{"time":"08:50","view":21207,"num":421},{"time":"08:55","view":21628,"num":390},{"time":"09:00","view":22018,"num":325},{"time":"09:05","view":22343,"num":350},{"time":"09:10","view":22693,"num":409},{"time":"09:15","view":23102,"num":423},{"time":"09:20","view":23525,"num":402},{"time":"09:25","view":23927,"num":399},{"time":"09:30","view":24326,"num":415},{"time":"09:35","view":24741,"num":455},{"time":"09:40","view":25196,"num":402},{"time":"09:45","view":25598,"num":390},{"time":"09:50","view":25988,"num":423},{"time":"09:55","view":26411,"num":439},{"time":"10:00","view":26850,"num":410},{"time":"10:05","view":27260,"num":367},{"time":"10:10","view":27627,"num":406},{"time":"10:15","view":28033,"num":408},{"time":"10:20","view":28441,"num":340},{"time":"10:25","view":28781,"num":389},{"time":"10:30","view":29170,"num":386},{"time":"10:35","view":29556,"num":356},{"time":"10:40","view":29912,"num":283},{"time":"10:45","view":30195,"num":350},{"time":"10:50","view":30545,"num":345},{"time":"10:55","view":30890,"num":376},{"time":"11:00","view":31266,"num":358},{"time":"11:05","view":31624,"num":338},{"time":"11:10","view":31962,"num":337},{"time":"11:15","view":32299,"num":360},{"time":"11:20","view":32659,"num":341},{"time":"11:25","view":33000,"num":324},{"time":"11:30","view":33324,"num":309},{"time":"11:35","view":33633,"num":314},{"time":"11:40","view":33947,"num":296},{"time":"11:45","view":34243,"num":342},{"time":"11:50","view":34585,"num":357},{"time":"11:55","view":34942,"num":316},{"time":"12:00","view":35258,"num":313},{"time":"12:05","view":35571,"num":306},{"time":"12:10","view":35877,"num":365},{"time":"12:15","view":36242,"num":350},{"time":"12:20","view":36592,"num":363},{"time":"12:25","view":36955,"num":376},{"time":"12:30","view":37331,"num":354},{"time":"12:35","view":37685,"num":271},{"time":"12:40","view":37956,"num":344},{"time":"12:45","view":38300,"num":424},{"time":"12:50","view":38724,"num":425},{"time":"12:55","view":39149,"num":351},{"time":"13:00","view":39500,"num":375},{"time":"13:05","view":39875,"num":303},{"time":"13:10","view":40178,"num":302},{"time":"13:15","view":40480,"num":319},{"time":"13:20","view":40799,"num":318},{"time":"13:25","view":41117,"num":308},{"time":"13:30","view":41425,"num":270},{"time":"13:35","view":41695,"num":261},{"time":"13:40","view":41956,"num":319},{"time":"13:45","view":42275,"num":306},{"time":"13:50","view":42581,"num":271},{"time":"13:55","view":42852,"num":284},{"time":"14:00","view":43136,"num":330},{"time":"14:05","view":43466,"num":249},{"time":"14:10","view":43715,"num":282},{"time":"14:15","view":43997,"num":290},{"time":"14:20","view":null,"num":null},{"time":"14:25","view":null,"num":null},{"time":"14:30","view":44803,"num":270},{"time":"14:35","view":45073,"num":249},{"time":"14:40","view":45322,"num":253},{"time":"14:45","view":45575,"num":245}]
chart
.data({
type: 'inline',
value: data,
});
chart.legend('y', {});
chart
.interval()
.encode('x', 'time')
.encode('y', 'num')
.axis('y', {
position: 'right',
title: '增量',
style: {
titleFill: '#6295fa',
},
});
chart
.line()
.encode('x', 'time')
.encode('y', 'view')
.encode('shape', 'smooth')
.style('stroke', '#ff7e00')
.style('lineWidth', 2)
.scale('y', { independent: true })
.axis('y', { title: '播放量', style: { titleFill: '#ff7e00' } });
chart.render();
<div id="container" />
html,body,#container{
width: 100%;
height: 100%;
}