用eChars做出波浪线效果

最近项目做一个动画首面，尝试其中一个滚轮页面添加了一个波浪线效果，是用eCharts实现的
这里width设置了100%，高度是100px为例，这里根据需要自行设置，高度不同，出来的波浪线效果也不一样
实质是一条折现图，随机数实现的

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .polyLine-animate {
            position: absolute;
            width: 100%;
            height: 100px;
            top: 0;
            left: 0;
        }
        .polyLine-animate div {
            position: relative;
            background: #373d41;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="chartLine" class="polyLine-animate"></div>
    </div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
    function drawLIne(){
        var tempdata = [];
        var myChart = echarts.init(document.getElementById("chartLine"));
        function randomData(){
            now = new Date(+now + oneDay);
            value = value +Math.random()*21-10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth()+1,now.getDate()].join('/'),
                    Math.round(value)
                ]
            }
        }
        var now = + new Date(1997,9,3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random()*500;
        for(var i=0;i<500;i++){
            tempdata.push(randomData())
        }
        let option = {
            color: ["#adcae9"],
            grid: {
                left: 0,
                top:0,
                bottom: 0,
                right: 0
            },
            xAxis: {
                show: false,
                type: 'time',
                boundaryGap: false
            },
            yAxis: {
                show: false,
                type: 'value',
                boundaryGap: false
            },
            series: [{
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: tempdata
            }]
        };
        setInterval(function(){
            for(var i=0;i<5;i++){
                tempdata.shift();
                tempdata.push(randomData())
            }
            myChart.setOption(option)
        },500)
    }
    drawLIne();
</script>
</body>
</html>

用eChars做出波浪线效果

代码如下

快来试试吧

Qin菇凉

引用和评论

记平时工作中的一代码规范(Vue项目，纯记录)

全面解析ECharts、Luckysheet、DataX、Doris如何构建高效能数仓式中台

echarts map 黑龙江补全大兴安岭地图地理测绘数据type为MultiPolygon