使用echarts 外掛生成圖表柱狀圖
阿新 • • 發佈：2018-12-14
1.下載echarts 得到檔案：echarts.js 檔案 複製到專案中
2.建立前端頁面，將下方程式碼複製到html檔案中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>myProject</title> <!-- 引入 lib/echarts.custom.min.js --><script src="__COMMON__/Echarts/echarts.js"></script> <script type="text/javascript" src="__ADMIN__/js/jquery-1.10.1.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 $myChart = echarts.init($('#main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 統計各部門成員數量' }, tooltip: { // trigger: 'axis',// axisPointer: { // type: 'cross' // } }, legend: { data:['人數'] }, xAxis: { // data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] data: {$name_json} }, yAxis: {}, series: [{ name: '人數', type: 'bar', //data: [5, 20, 36, 10, 10, 20] data: {$num_json} }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
3.在後臺控制器中編寫echarts方法
思路：獲取資料 -> 轉換成所需資料格式 -> 分配到模板
第一種 方式： 將資料組合成陣列再轉換成json：
function echarts(){ //1.例項化資料表模型 $user = D('User'); //2.讀取到表中資料 $data = $user ->alias('a') ->join('left join oa_dept as b on a.user_deptid = b.dept_id') ->field('b.dept_name,count(*) as num') ->group('user_deptid') ->select(); //dump($data);die; //3.遍歷$data二維陣列 分別將dept_name 和 num單獨存放到一個空陣列 //資料型別示例：data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] $name = array();; $num = array(); foreach ($data as $v) { array_push($name, $v['dept_name']); array_push($num, $v['num']); } //print_r($name); // 4.轉換成json資料型別，供前端使用 $name_json = json_encode($name); $num_json = json_encode($num); //dump($name_json); //5.分配到模板，呼叫檢視 $this->assign('name_json', $name_json); $this->assign('num_json', $num_json); $this->display(); }
第二種 方式：拼接字串方式
function echarts(){
//1.例項化資料表模型
$user = D('User');
//2.讀取到表中資料
$data = $user
->alias('a')
->join('left join oa_dept as b on a.user_deptid = b.dept_id')
->field('b.dept_name,count(*) as num')
->group('user_deptid')
->select();
//dump($data);die;
//3.遍歷二維陣列，拼接成字串，形成想要的資料型別
//資料型別示例：data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
$result_name="";
foreach($data as $value){
$result_name .= '"'.$value['dept_name'].'"'.",";
}
$str_name = substr($result_name,0,strlen($result_name)-1);
$str_names="[".$str_name."]";
//dump($str_name);die;
$this->assign('str_names',$str_names);
$result_num="";
foreach($data as $value){
//資料型別示例： data: [5, 20, 36, 10, 10, 20]
$result_num .= $value['num'].",";
}
$str_num = substr($result_num,0,strlen($result_num)-1);
$str_nums = "[".$str_num."]";
//dump($str_num);die;
$this->assign('str_nums',$str_nums);
$this->display();
}