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>