echarts
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-race
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
function sleep(n) { //n表示的毫秒数
var start = new Date().getTime();
while (true) if (new Date().getTime() - start > n) break;
}
var x=[];
var y=[];
// var app = {};
var datalist = [1,23,3,14,15,6,7];
var xlist = ['a','b','c','d','e','f','g']
var option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
show: true,
borderColor: 'red',
backgroundColor: 'green',
opacity: 0.5,
borderWidth: 3,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
splitLine:{
show: true,
},
axisLabel:{
show: false
},
data: xlist,
}
],
yAxis: [
{
type: 'value',
splitLine:{
show: true,
},
axisLabel: {
show: false,
}
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: y,
},
]
};
$(function(){
let i = 0;
console.log('start');
x.push(xlist);
y.push(datalist[0]);
myChart.setOption(option);
console.log(option);
window.addEventListener('resize', myChart.resize);
setInterval(adddata, 1000);
});
let i = 1;
function adddata(){
// sleep(1000);
if(i<7){
// x.push(xlist[i]);
y.push(datalist[i]);
myChart.setOption(option);
i = i + 1
}else{
// x = [];
y = [];
// option.xAxis.data = x;
option.series[0].data = y;
console.log(option);
myChart.setOption(option);
i = 1
}
}
</script>
</body>
</html>
