這是我寄幾寫來記錄的，有需要的可以參考，如果有不對的地方歡迎指正 QAQ
我們的需求是，一進入頁面為了保證加載快一點，先給定一個值，然后每三秒鐘根據后臺傳來的json文件刷新數據，話不多說，上圖。這是初始情況下的echart。

start

                <li>
                    <div id="pie_1" class="piechart"
                        data-percent="0">
                        <span class="percent"></span>
                    </div> <span class="title">連網狀態 </span>
                </li>
                <li>
                    <div id="pie_2" class="piechart"
                        data-percent="0"> 
                        <span class="percent"></span>
                    </div> <span class="title">云服務</span>
                </li>
                <li>
                    <div id="pie_3" class="piechart"
                        data-percent="18"> 
                        <span class="percent"></span>
                    </div> <span class="title">遠程運維</span>
                </li>
                <li>
                    <div id="pie_4" class="piechart" data-percent="85">
                        <span class="percent"></span>
                    </div> <span class="title">版本升級</span>
                </li>

以上是初始情況下的HTML。
下面上js。

var chart1;
var chart2;
var chart3;
var handleProfileSkillPie = function () {
    //Pie 1
    $('#pie_1').easyPieChart({
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent)+"%");
        },
        lineWidth: 6,
        barColor: '#F0AD4E'
    });
     chart1 = window.chart = $('#pie_1').data('easyPieChart');
    //Pie 2
    $('#pie_2').easyPieChart({
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent)+"%");
        },
        lineWidth: 6,
        barColor: '#D9534F'
    });
    chart2 = window.chart = $('#pie_2').data('easyPieChart'); 
    //Pie 3
    $('#pie_3').easyPieChart({
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent)+"%");
        },
        lineWidth: 6,
        barColor: '#70AFC4'
    });
    chart3 = window.chart = $('#pie_3').data('easyPieChart'); 
}
     handleProfileSkillPie();

接下來是AJAX。

     function loadnumber(){
         var all;
         var num;
         var cloud;
         var control;
         $.ajax({
            url:'數據來源json文件的url',
            type:'get',
            dataTpye:'json',
            cache:false,
            async:true,
            success:function(data){
                    all=data.allCount;
                    var number=data.statusCount;
                    num=number.networkStatus;
                    cloud=number.cloudStatus;
                    control=number.controlStatus;                           
                    $('#pie_1').attr('data-percent',Math.round(num/all));
                    $('#pie_2').attr('data-percent',Math.round(cloud/all));
                    $('#pie_3').attr('data-percent',Math.round(control/all));           
                    $('#pie_1 .percent').text(Math.round(num/all)+"%");
                    $('#pie_2 .percent').text(Math.round(cloud/all)+"%");
                    $('#pie_3 .percent').text(Math.round(control/all)+"%");
                

         `//這里重畫easypiechart `
                    
                    chart1.update(Math.round(num/all));
                    chart2.update(Math.round(cloud/all));
                    chart3.update(Math.round(control/all));
                    
                }   
         })
         }

         $(document).ready(function(){
              window.setInterval(loadnumber,3000);
            })

done

大功告成咯，真好玩，這是動態的局部刷新，我不會搞動圖進來，so,就醬~