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>

　　

posted @ 2022-06-23 23:10  CrossPython  阅读(77)  评论(0)    收藏  举报