### 圖表頁面 調用示例: ~~~ SBuilder::makeCharts([ 'width' => '500px', 'height' => '300px' ]) ->setTitle('圖表示例') ->setData([ ['id' => 1, 'name' => '襯衫', 'count' => '35', 'value' => 5], ['id' => 2, 'name' => '羊毛衫', 'count' => '567', 'value' => 20], ['id' => 3, 'name' => '雪紡衫', 'count' => '34', 'value' => 36], ['id' => 4, 'name' => '褲子', 'count' => '658', 'value' => 10], ], 'name') ->addBar('value') ->addBar('count') ->addLine('count', true) ->addLine('value', true) ->fetch(); ~~~ 詳細具體配置信息見 [ECharts官方文檔](https://echarts.apache.org/zh/api.html#echarts) ## 布局參數 ``` SBuilder::makeCharts([ 'span' => 24, // 圖表區塊寬度, 總寬度24 'width' => '500px', // 圖表畫板寬度 'height' => '300px', // 圖表畫板高度 'padding' => '20px', // 圖表畫板內容邊距 ]) ``` ## 方法說明 - `setOption($option = []) `方法, 直接設置全部選項, 選項參數見 [ECharts官方文檔](https://echarts.apache.org/zh/api.html#echarts) - `addSeries($series)` 方法, 添加一個圖表, 選項參數見 [series](https://echarts.apache.org/zh/option.html#series) - `addLine($yColumn = '', $smooth = false, $areaStyle = false)` 方法, 添加一個折線圖 > 方法參數: > ``` > * @param string $yColumn > * @param bool $smooth 是否平滑曲線 > * @param bool|array $areaStyle 是否填充 > ``` - `addBar($yColumn = '')`方法, 添加一個柱狀圖 > 方法參數: > ~~~ > * @param string $yColumn y軸顯示的列 > ~~~ - `setXType($type = 'category')` 設置x軸類型 > 類型說明: value-數值軸, category-類目軸 time-時間軸, log-對數軸 - `setXColumn($column = '')` 設置X軸顯示的列 - `setToolTip($show = true)` 設置是否顯示tooltip ## 通用方法: 1. 頁面級方法 - [設置頁面標題](http://www.hmoore.net/evanlee/sphp/1068618) - [添加頁面提示信息](http://www.hmoore.net/evanlee/sphp/1068619) - [設置頁面Tab](http://www.hmoore.net/evanlee/sphp/3183863) - [設置頁面背景色](設置頁面背景色.md) - [設置是否點擊遮罩關閉](設置是否點擊遮罩關閉.md) - [添加區塊](添加區塊.md) 2. 區塊級方法 - [設置區塊名](設置區塊名.md) - [設置區塊布局](設置區塊布局.md) > 圖表的設置區塊布局方法額外支持 `width`,`height`,`padding`參數 > 調用方式見上面的`makeCharts`方法示例