ECharts.js學習（二）動態數據綁定

時間 2020-06-29

標籤 echarts.js echarts 學習動態數據綁定欄目 JavaScript 简体版

原文原文鏈接

Echarts 數據綁定

簡單的統計表已經能夠生成，不過以前圖標數據都是直接寫在參數裏面的，而實際使用中，咱們的數據通常都是異步讀取的。EChart.js對於數據異步讀取這塊提供了異步加載的方法。javascript

綁定多組數據

不少時候須要展現的數據不僅僅是一組數據，不少時候會進行一個數據對比。這個時候只須要在series中增長一組數據，legend中添加一下這個數據組的namehtml

<!DOCTYPE html>
<html>
<head>
    <title>ECharts.js 數據綁定</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="chartmain" style="width:600px; height: 400px;"></div>
    <script type="text/javascript">
        //指定圖標的配置和數據
        var option = {
            title:{
                text:'ECharts 數據統計'
            },
            legend:{
                data:['訪問量','用戶量']
            },
            xAxis:{
                data:["Android","IOS","PC","Other"]
            },
            yAxis:{},
            series:[
            {
                name:'訪問量',
                type:'bar',
                data:[180,420,333,83]
            },
            {
                name:'用戶量',
                type:'bar',
                data:[125,330,230,60]
            }
            ]
        };
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('chartmain'));

        //使用制定的配置項和數據顯示圖表
        myChart.setOption(option);
    </script>
</body>
</html>

效果展現

數據異步加載

EChart中實現異步數據的更新很是簡單，在圖表初始化後無論任什麼時候候只要經過 jQuery 等工具異步獲取數據後經過 setOption 填入數據和配置項就行。java

綁定數據的方式有兩種，一種是寫寫好一些圖表參數，而後數據留空，而後在異步讀取數據的時候，綁定數據。還有一種就是直接異步讀取數據的時候同時設置圖表參數和數據綁定。json

首先咱們準備一份須要加載的數據文件data.json，數據內容：echarts

{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}

第一種異步加載的時候設置圖表參數和綁定數據dom

    <script type="text/javascript">        
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('chartmain'));        
        //異步加載的配置項和數據顯示圖表
        $.get('data.json').done(function (data) {
            data = eval('('+data+')');            
            myChart.setOption({
                title:{
                    text:'ECharts 異步加載數據'
                },
                tooltip:{},
                legend:{
                    data:['訪問量']
                },
                xAxis:{
                    data:data.name
                },
                yAxis:{},
                series:[
                    {
                        name:'訪問量',
                        type:'bar',
                        data:data.data
                    }
                ]
            })
        })


    </script>

第二種先設置圖表參數，後綁定數據異步

<script type="text/javascript">        
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('chartmain'));        
        //設置圖標配置項
        myChart.setOption({
            title:{
                text:'ECharts 異步加載數據'
            },
            tooltip:{},
            legend:{
                data:['訪問量']
            },
            xAxis:{
                data:[]
            },
            yAxis:{},
            series:[
                {
                    name:'訪問量',
                    type:'bar',
                    data:[]
                }
            ]
        })
        //異步加載數據
        $.get('data.json').done(function (data) {
            data = eval('('+data+')');            
            myChart.setOption({                
                xAxis:{
                    data:data.name
                },                
                series:[
                    {    
                        //根據名字對應到相應的系列
                        name:"訪問量",
                        data:data.data
                    }
                ]
            })
        })
    </script>

效果展現

由於是異步加載，因此有時候數據加載會慢，或者延遲。在數據沒有加載前，圖表這樣的。面對這樣的圖表，確定會以爲這是沒有數據嗎，仍是圖表有問題.對於這塊ECharts增長了一個加載動畫。ide

Loading動畫加載

        //打開loading動畫
        myChart.showLoading();
        //加載數據函數
        function bindData(){
            //爲了效果明顯，咱們作了延遲讀取數據
            setTimeout(function(){                
                //異步加載數據
                $.get('data.json').done(function (data) {                    
                    //獲取數據後，隱藏loading動畫
                    myChart.hideLoading();
                    data = eval('('+data+')');            
                    myChart.setOption({
                        xAxis:{
                            data:data.name
                        },
                        series:[
                            {
                                //根據名字對應到相應的系列
                                name:"訪問量",
                                data:data.data
                            }
                        ]
                    })
                })
            },2000)
        }
        
        bindData();

效果展現

數據動態實時更新

<script type="text/javascript">        
    //初始化echarts實例
    var myChart = echarts.init(document.getElementById('chartmain'));
    var base = + new Date(2017,3,8);
    var oneDay = 24*3600*1000;
    var date = [];
    var data = [Math.random()*150];
    var now = new Date(base);
    var day = 30;
    function addData(shift){
        now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');        
        date.push(now);        
        data.push((Math.random()-0.5)*10+data[data.length-1]);
        if (shift) {
            console.log(data);
            date.shift();
            data.shift();
        }
        now = new Date(+new Date(now)+oneDay);        
    }

    for (var i = 0; i < day; i++) {
        addData();
    }
    //設置圖標配置項
    myChart.setOption({
        title:{
            text:'ECharts 30天內數據實時更新'
        },
        xAxis:{
            type:"category",
            boundaryGap:false,
            data:date
        },
        yAxis:{
            boundaryGap:[0,'100%'],
            type:'value'
        },
        series:[{
            name:'成交',
            type:'line',
            smooth:true, //數據光滑過分
            symbol:'none', //下一個數據點
            stack:'a',
            areaStyle:{
                normal:{
                    color:'red'
                }
            },
            data:data
        }]
    })
    setInterval(function(){
        addData(true);
        myChart.setOption({
            xAxis:{
                data:date
            },
            series:[{
                name:'成交',
                data:data
            }]
        });
    },1000)
</script>