Thinkphp+ECharts生成柱狀圖
阿新 • • 發佈：2017-11-28
document ntb .com 邊框 blog 引入 類目 src end
1.首先進ECharts官網下載echarts.js 點擊下載，結合TP5講解，主要代碼在js裏面，更多請到ECharts官網
2.引進echarts.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>銷售柱狀圖</title> <!-- 引入ECharts文件 --> <script type="text/javascript" src="/public/index/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 option = { title:{ //主標題 text:‘銷售柱狀圖‘, textStyle:{ //標題樣式 color:‘red‘, fontWeight:‘bold‘ }, padding:[5,10,5,10], //標題內邊距，默認5 itemGap:5, //主副標題縱向間隔，默認10left:‘left‘, //具體的像素值，百分比， backgroundColor:‘#ccc‘, //標題背景顏色，默認透明，支持RGB,十六進制數 borderWidth:‘3‘, //邊框 borderColor:‘rgb(98,52,51)‘, //邊框顏色 //圖形陰影的模糊大小，下面四個配合使用 shadowBlur:‘10‘, shadowColor:‘rgba(0,0,0,0.5)‘, shadowOffsetX:‘2‘, shadowOffsetY:‘5‘ }, tooltip:{}, //提示框 legend:{ //圖例組件，點擊圖例控制哪些不顯示 data:[‘銷量‘], }, xAxis:{ type:‘category‘, //坐標軸類型 類目(默認)，時間，數值 //data:["襯衫","羊毛衫","手套","褲子","高跟鞋","襪子"], //數據可以從數據庫提取 data:[<volist name="info" id="info1">"{$info1[‘name‘]}",</volist>], name:‘類別‘, //坐標軸名稱 nameTextStyle:{ //坐標軸名稱的文字樣式 color:‘green‘, }, nameRotate:‘10‘, //坐標軸名字旋轉角度 //inverse:true, //反向坐標軸 boundaryGap:true, //坐標軸兩邊留白策略 axisTick:{ alignWithLabel:true, //刻度線和標簽對其 inside:false, //刻度是否朝內，默認朝外 }, position:‘bottom‘, //x軸的位置 }, yAxis:{}, series:[{ name:‘銷量‘, type:‘bar‘, //data:[5,20,36,10,10,20] //數據可以從數據庫提取 data:[<volist name="info" id="info2">{$info2[‘num‘]},</volist>] }] }; // 使用剛指定的配置項和數據顯示圖表 myChart.setOption(option); </script> </body> </html>
4.後臺代碼，就是查詢出來數據，分配給前端頁面，不需要引任何文件
/* * 制作圖表 */ public function echarts() { $info = Db::table(‘goods‘)->select(); //var_dump($info); $this->assign(‘info‘,$info); return $this->fetch(); }
5.運行結果
Thinkphp+ECharts生成柱狀圖