柱狀圖多系列php動態實現（ec）

cruzer_glide發表於2018-12-10
PHP
<?php 

require_once `data.php`;

$arr1=$a->sum(`answer`,`ask_id=1`);
$arr2=$a->sum(`answer`,`ask_id=2`);
$arr3=$a->sum(`answer`,`ask_id=3`);
$arr4=$a->sum(`answer`,`ask_id=4`);
$arr5=$a->sum(`answer`,`ask_id=5`);
$arr6=$a->sum(`answer`,`ask_id=6`);
$arr7=$a->sum(`answer`,`ask_id=7`);
$arr8=$a->sum(`answer`,`ask_id=8`);
$arr9=$a->sum(`answer`,`ask_id=9`);
$arr10=$a->sum(`answer`,`ask_id=10`);


for($i=0;$i<6;$i++){
    
 
        
             
    $res1[$i]=$arr1[$i][`numbers`];
    $res2[$i]=$arr2[$i][`numbers`];
    $res3[$i]=$arr3[$i][`numbers`];
    $res4[$i]=$arr4[$i][`numbers`];
    $res5[$i]=$arr5[$i][`numbers`];
    $res6[$i]=$arr6[$i][`numbers`];
    $res7[$i]=$arr7[$i][`numbers`];
    $res8[$i]=$arr8[$i][`numbers`];
    $res9[$i]=$arr9[$i][`numbers`];
    $res10[$i]=$arr10[$i][`numbers`];


}

$a1=array(`1`);
$b1=array_merge($a1,$res1);        //陣列合並;
$a2=array(`2`);
$b2=array_merge($a2,$res2);
$a3=array(`3`);
$b3=array_merge($a3,$res3);
$a4=array(`4`);
$b4=array_merge($a4,$res4);
$a5=array(`5`);
$b5=array_merge($a5,$res5);
$a6=array(`6`);
$b6=array_merge($a6,$res6);
$a7=array(`7`);
$b7=array_merge($a7,$res7);
$a8=array(`8`);
$b8=array_merge($a8,$res8);
$a9=array(`9`);
$b9=array_merge($a9,$res9);
$a10=array(`10`);
$b10=array_merge($a10,$res10);

$rs1=json_encode($b1);        //php陣列轉json;
$rs2=json_encode($b2);
$rs3=json_encode($b3);
$rs4=json_encode($b4);
$rs5=json_encode($b5);
$rs6=json_encode($b6);
$rs7=json_encode($b7);
$rs8=json_encode($b8);
$rs9=json_encode($b9);
$rs10=json_encode($b10);

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById(`main`));
        
       var arrData=[]; 
       var rs1=JSON.parse(`<?php echo $rs1 ?>`);
       rs=`1`;
       rs+=rs1;
       arrData.push(rs);
       // arrData.push(`1`);    
        // 指定圖表的配置項和資料
       var option = {



    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份資料。

      source: [
            

            [`sort`,`A`, `B`, `C`, `D`,`E`,`F`],    
            <?php echo $rs1; ?>,
            <?php echo $rs2; ?>,
            <?php echo $rs3; ?>,
            <?php echo $rs4; ?>,
            <?php echo $rs5; ?>,
            <?php echo $rs6; ?>,
            <?php echo $rs7; ?>,
            <?php echo $rs8; ?>,
            <?php echo $rs9; ?>,
            <?php echo $rs10; ?>,

        ]
    },
    // 宣告一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
    xAxis: {type: `category`},
    // 宣告一個 Y 軸，數值軸。
    yAxis: {},
    // 宣告多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
    series: [
        {type: `bar`},
        {type: `bar`},
        {type: `bar`},
        {type: `bar`},
        {type: `bar`},
        {type: `bar`}
    ]
}
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

本篇是原創文章，如需轉載請註明出處！

相關文章