echarts中的資料更新

阿新 • • 發佈：2020-07-22

echarts中的資料更新例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts的資料更新</title>
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>

    </head>
    <body>
        <div  
class="container">
            <div class="row">
                <div class="col-md-6 ">
                    <div class="barChart1" style="height: 600px;background-color: aquamarine; ">

                    </div>
                    <div style="text-align:center ; margin-top: 15px;margin-bottom: 15px;" 
>
                        <button class="btn btn-danger" id="btn1">更新資料圖一</button>
                    </div>
                </div>
                <div class="col-md-6 ">
                    <div id="barChart2" style="height: 600px;background-color: aquamarine; "> 


                    </div>
                </div>
            </div>
            
        </div>
        
        
        
        
    <script type="text/javascript" src="js/jquery1.10.2.min.js"></script>    
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>    
    <script type="text/javascript" src='js/echarts-min.js'></script>    
    
    
    <script type="text/javascript">
    //例項化物件
//        var myChart= echarts.init(document.getElementById("echarts_bar"));
        var myChart= echarts.init(document.querySelector(".barChart1"));
        var myChart2=echarts.init(document.getElementById("barChart2"));
        //圖二用來對比變化前後的圖形
        var xAxisData = [];
        var data1 = [];
        
        var data2 = [];
        for (var i = 0; i < 100; i++) {
            xAxisData.push('類目' + i);
            data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
            data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
        }
        
        option = {
            title: {
                text: '柱狀圖動畫延遲'
            },
            legend: {
                data: ['bar', 'bar2']
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['stack', 'tiled']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
            },
            series: [{
                name: 'bar',
                type: 'bar',
                data: data1,
                animationDelay: function (idx) {
                    return idx * 10;
                }
            }, {
                name: 'bar2',
                type: 'bar',
                data: data2,
                animationDelay: function (idx) {
                    return idx * 10 + 100;
                }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };
        
        myChart.setOption(option);
        myChart2.setOption(option);
            // 圖示自適應
        window.addEventListener('resize',function(){
            myChart.resize();
        })
        window.addEventListener('resize',function(){
            myChart2.resize();
        })

        $("#btn1").click(function(){
            var xAxisData = [];
        data1 = [];
        data2 = [];
        for (var i = 0; i < 50; i++) {
            xAxisData.push('類目' + i);
            data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 100);
            data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 100);
        }
        option.xAxis.data=xAxisData;
        option.series[0].data=data1;
        option.series[1].data=data2;
        myChart.setOption(option);
        });



    </script>

    </body>
</html>