echarts數據自我定製（五）--各類各樣的餅圖

時間 2020-10-06
標籤 javascript php html java jquery ajax 數組 echarts dom ide 欄目 JavaScript 简体版
原文原文鏈接
上圖javascript
源代碼：php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pie--靜態和動態，包括原始餅圖，環形餅圖，鐘錶餅圖</title>
<script  src="../js/esl.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
            
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});
var option1 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['qq','msn','pps','ie','360']
    },
      
    calculable : true,
    series : [
        {
            name:'訪問來源',
            type:'pie',
            radius : [80, 120],//半徑，默認爲Min(width, height) / 2 - 50, 傳數組實現環形圖，[內半徑，外半徑]
            itemStyle :　{
                normal : {//默認樣式
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {//強調樣式（懸浮時樣式
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:335, name:'qq'},
                {value:310, name:'msn'},
                {value:234, name:'pps'},
                {value:135, name:'ie'},
                {value:1548, name:'360'}
            ]
        }
    ]
};
var option2 = {
    title : {
        text: '動態數據',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        data:['隨機數據1','隨機數據2','隨機數據3','隨機數據4','隨機數據5']
    },
       
    calculable : false,
    series : [
        {
            name:'pie',
            type:'pie',
            radius : [0, 110],
            center: [250, 225],
            data: (function(){
                var res = [];
                var len = 0;
                while (len++ < 5) {
                    res.push({
                        name: '隨機數據' + len,
                        value: Math.round(Math.random()*10)
                    });
                }
                return res;
            })()
        }
    ]
};
                                      
var myChart1;
var myChart2;
require(
[
'echarts',
'echarts/chart/pie'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
var timeTicket2;
//var lastIndex = 5;
clearInterval(timeTicket2);
timeTicket2 = setInterval(function(){
    //ajax請求一個數據。插入數組後面。每時間間隔請求一個
    RandPie(ec);
        
    }, 2000);
}
)
//全局定義
var lastIndex = 5;
function RandPie(ec){
        
     $.ajax({
                url:"../control/AjaxService.php?method=RandANum",
                dataType:"text",
                success:function(data)
                {
                        
                     Rdata=eval(data);
                    // alert(Rdata);
                      lastIndex += 1;
                    // 動態數據接口 addData
                    myChart2.addData([
                        [
                            0,        // 系列索引
                            {         // 新增數據
                                name: '隨機數據' + lastIndex,
                                value: Rdata
                            },
                            false,     // 新增數據是否從隊列頭部插入
                            false,     // 是否增長隊列長度，false則自定刪除原有數據，隊頭插入刪隊尾，隊尾插入刪隊頭
                            '隨機數據' + lastIndex
                        ]
                    
                     ]);
                }          
            });
        
        
    }
        
</script>
</head>
<body>
<div id="main1" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main2" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main3" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:9px;position:absolute;"></div>
<div id="main4" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:380px;position:absolute;"></div>
</body>
</html>