echarts數據自我定製（四）--各類各樣的柱狀圖

時間 2020-10-06
標籤 javascript php html java jquery ajax 數據庫數組併發 echarts 欄目 JavaScript 简体版
原文原文鏈接
需求：javascript
靜態的，動態的，累積疊加的，橫向的，豎向的php
上圖：html
源代碼來啦java
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bar--實驗 bar圖展現，橫向和豎向的，靜態和動態的，混合色和單色的</title>
<script  src="../js/esl.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
         
    /**
    實驗 bar圖展現，橫向和豎向的，靜態和動態的，混合色和單色的
    */
         
         
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});
//橫向柱狀圖
var option1 = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
        }
    },
    legend: {
        data:['***檢測', '惡意軟件']
    },
        
    calculable : true,
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : fetchXname()//此處是從數據庫中取出的值
        }
    ],
    series : [
        {
            name:'***檢測',
            type:'bar',
            stack: '總量',//組合名稱，多組數據的堆積圖時使用
            itemStyle : { normal: {label : {show: true, position: 'inside'}}},
            data:[320, 302, 301, 334, 390, 330, 320]
        },
        {
            name:'惡意軟件',
            type:'bar',
            stack: '總量',
            itemStyle : { normal: {label : {show: true, position: 'inside'}}},
            data:[120, 132, 101, 134, 90, 230, 210]
        }
            
    ]
};
                         
      
 //豎向柱狀圖                  
var option2 = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
        }
    },
    legend: {
        data:['test','併發鏈接','新建鏈接']
    },
        
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['qq','pps','ie','360','msn']
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'test',
            type:'bar',
            barWidth : 10,
            data:[320, 332, 301, 334, 390]
        },
        {
            name:'併發鏈接',
            type:'bar',
            barWidth : 15,
            stack: '廣告',
            data:[120, 132, 101, 134, 90]
        },
        {
            name:'新建鏈接',
            type:'bar',
            barWidth : 15,
            stack: '廣告',
            data:[220, 182, 191, 234, 290]
        }
    ]
};
                         
                         
var option3 = {
    title : {
        text: '動態數據',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:[ '預購隊列']
    },
        
    dataZoom : {
        show : false,
        realtime: true,
        start : 50,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            splitline : {show : true},
            data : (function(){
                var res = [];
                var len = 100;
                while (len--) {
                    res.push(len + 1);
                }
                return res;
            })()
        }
    ],
    yAxis : [
      {
            type : 'value',
            scale: true,
            name : '預購量',
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'預購隊列',
            type:'bar',
          //  xAxisIndex: 0,//有多個座標軸的時候使用，好比這是第二個座標系，因此用的是1，若是隻有1個，應該是0
          //  yAxisIndex: 0,
            itemStyle: {
                normal: {
                    color : 'rgba(135,206,205,0.4)'
                }
            },
            data:dataXRand()
        }
    ]
};
                                                           
var myChart1;
var myChart2;
var myChart3;
require(
[
'echarts',
'echarts/chart/bar'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
         
myChart3=ec.init(document.getElementById('main3'));
myChart3.setOption(option3);
var timeTicket;
clearInterval(timeTicket);
timeTicket = setInterval(function(){
    RandANum(ec);
    }, 1000);
         
}
)
//ajax獲取後臺數據，x軸的name從數據庫中讀取
         
    function fetchXname(){
        var arr=new Array();
        $.ajax(
        {
            url:"../control/AjaxService.php?method=GetXaxisname",
            dataType:"text",
            success:function(data)
            {
            //調用函數獲取值，轉換成數組模式
              var ss=eval(data);
              for(var i=0;i<ss.length;i++)
              {
                arr.push(ss[i].name);
              }
             }
            });
                 
        return arr;
             
        }
        //柱狀圖初始化的值
        function dataXRand(){
                 
            var dataarr=new Array();
            $.ajax({
                url:"../control/AjaxService.php?method=RandTest",
                dataType:"text",
                success:function(data)
                {
                     var ss=eval(data);
                     for(var i=0;i<ss.length;i++)
                      {
                        dataarr.push(ss[i]);
                     // alert(dataarr[i]);
                      }
                }          
            });
                     
                return dataarr;        
        }
         
         
    function RandANum(ec){
                         
     $.ajax({
                url:"../control/AjaxService.php?method=RandANum2",
                dataType:"text",
                success:function(data)
                {
                         
                     Rdata=eval(data);
                     
                     myChart3.addData([
        [
            0,        // 系列索引
            Rdata, // 新增數據
            false,    // 新增數據是否從隊列頭部插入
            false,    // 是否增長隊列長度，false則自定刪除原有數據，隊頭插入刪隊尾，隊尾插入刪隊頭
          //  axisData  // 座標軸標籤
        ]
    ]);
                                      
                }          
            });
         
    }
         
         
         
         
</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>