用eChars作出波浪線效果

時間 2019-11-08

標籤 echars 作出波浪效果简体版

原文原文鏈接

最近項目作一個動畫首面，嘗試其中一個滾輪頁面添加了一個波浪線效果，是用eCharts實現的
這裏width設置了100%，高度是100px爲例，這裏根據須要自行設置，高度不一樣，出來的波浪線效果也不同
實質是一條折現圖，隨機數實現的javascript

代碼以下

<!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>

快來試試吧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。