柱狀圖多系列php動態實現(ec)
阿新 • • 發佈:2018-12-10
<?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> 本篇是原創文章,如需轉載請註明出處!