百度ECharts圖形報表 · 人手一本php工具書

示例：# tp3.2使用ECharts做一個降雨量報表 && tp5的使用實例 [toc] ![](https://box.kancloud.cn/0158fe532f8ffb04da7b39e3ea14ed3e_1224x361.png) ## :-: **1、準備數據** 控制器準備數據，數據是個一維數組 ``` php <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index() { $echart = array( 'title' => '某地區蒸發量和降水量', 'subtext' => '純屬虛構', 'legend' => json_encode(['降雨量', '增發量']), 'a_data'=>json_encode([2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]), 'b_data'=>json_encode([2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]), ); $this->assign('echart', $echart); //然后直接傳到前臺去不一定就是要ajax的如果用ajax 就在那邊閉包處理 $this->display(); } } ``` ## :-: **2、使用插件** 模板文件中，為對象加載數據（從文檔中挑選各種配置項） ~~~ <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body>  <div id="main" style="height:400px"></div>  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var lengend = {$echart['legend']}; //最上面的圖例 var a_data = {$echart['a_data']}; //蒸發量 var b_data = {$echart['b_data']}; //降水量 // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基于準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); var option = { title: { text: "{$echart['title']}", //標題 subtext: "{$echart['subtext']}" //父標題 }, tooltip: { trigger: 'axis' //觸發類型，坐標軸觸發，主要在柱狀圖，折線圖 }, legend: { //圖例組件 data: (function () { var list = new Array(); $.each(lengend, function (k, v) { //遍歷最上面的圖例 list.push(v); }); return list; })() }, toolbox: { //工具欄（右上角的） show: true, feature: { //各工具配置項 mark: {show: true}, // dataView: {show: true, readOnly: false}, //數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新 magicType: {show: true, type: ['line', 'bar']}, //動態類型切換 restore: {show: true}, //配置項還原 saveAsImage: {show: true} //保存為圖片 } }, calculable: true, xAxis: [ //x軸 { type: 'category', // 類目軸 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] } ], yAxis: [ { type: 'value' // 數值軸 } ], series: [ //Y軸的數據 { name: '蒸發量', type: 'bar', //類型 data: (function () { var list = new Array(); $.each(a_data, function (k, v) { list.push(v); }); return list //相當于list是data })(), markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name: '降水量', type: 'bar', data: (function () { var list = new Array(); $.each(b_data, function (k, v) { list.push(v); }); return list })(), markLine: { data: [ {type: 'average', name: '平均值'} ] } } ] }; // 為echarts對象加載數據 myChart.setOption(option); } ); </script> </body> ~~~ ## :-: **tp5示例** ``` html <a href="{:url('Stock/qrcode',array('id'=>$vo['id']))}">  ``` - 前端代碼： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>銷售</title> <script src="__STATIC__/js/jquery.js"></script> <script src="__STATIC__/js/echarts/echarts.min.js"></script> <link rel="stylesheet" href="__STATIC__/js/layui/css/layui.css" media="all"> <style> .h{ height:20px; } </style> </head> <body> <div class="h"></div> <div> 開始時間：<input type="date" value="{$start_time}" name="start_time" class="s_time"/> 結束時間：<input type="date" value="{$end_time}" name="end_time" class="e_time"/> <button type="button" class="layui-btn layui-btn-small layui-btn-normal" id="sou">搜索</button> </div> <div class="h"></div>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); $("#sou").click(function() { //接收時間 var s_time = $('.s_time').val(); //開始時間 var e_time = $('.e_time').val(); //結束時間 // $.ajax({ url: "{:url('sellDataPost')}", //本控制器的方法 type : "post", datatype: "json", data : {start_time:s_time,end_time:e_time}, //時間帶過去 success: function(data){ //成功的回調函數，可以根據需要做對應的彈窗提示 var d_obj = JSON.parse(data); //可以將json字符串轉換成json對象 //x軸的數據 var xobj = d_obj.goods; var xstr = xobj.split("|"); //分隔字符串 var xdata = []; for (var i=0;i<xstr.length;i++){ xdata.push(xstr[i]); //將字符串追加到數組 //alert(a[i]); } //y軸的數據 var yobj = d_obj.num; var ystr = yobj.split("|"); var ydata = []; for(var e=0;e<ystr.length;e++){ ydata.push(ystr[e]); } myChart.setOption({ title: { text: '通馳店鋪銷售記錄' }, tooltip: {}, legend: { data:['金額'] }, xAxis: { //銷售種類 data:xdata }, yAxis: { }, series: [{ name: '金額', type: 'bar', // data: [ //銷售金額 // d_obj.num // ] data:ydata, }] }); } }); }); </script> </body> </html> ~~~ - 后端代碼： ~~~ //控制器代碼：通過ajax返回數據 public function sellDataPost(){ //取Y軸數據銷售額 == 價格*數量。使用sum統計銷售總額 $data = input('post.'); $model = new SellModel(); $res = $model->selectDataY($data); //查數據 $moneys = []; foreach ($res as $k => $value){ $moneys[] = $value['sell_sum']; } $money = implode("|",$moneys); //取x軸的數據銷售的品類，取name $info = Db::table('cmf_ws_sell') ->alias('s') ->join('cmf_ws_category c','s.category_id = c.id') ->where('c.parent_id',0) //查category表parent_id為0的一級分類 ->field('c.name') //只查詢需要取出的分類名 ->group('s.category_id') //統計category_id 去重 ->select(); //echo Db::table('cmf_ws_sell')->getLastSql(); //打印sql語句 $category_names = []; //2維變1維 foreach ($info as $key => $value){ $category_names[] = $value['name']; } $category_name = implode("|",$category_names); //轉換成字符串 //返回ajax 品類銷售額 $json = ['goods'=>$category_name,'num'=>$money]; echo json_encode($json); } ~~~