### 图表页面 调用示例: ~~~ 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. 页面级方法 - [设置页面标题](https://www.kancloud.cn/evanlee/sphp/1068618) - [添加页面提示信息](https://www.kancloud.cn/evanlee/sphp/1068619) - [设置页面Tab](https://www.kancloud.cn/evanlee/sphp/3183863) - [设置页面背景色](设置页面背景色.md) - [设置是否点击遮罩关闭](设置是否点击遮罩关闭.md) - [添加区块](添加区块.md) 2. 区块级方法 - [设置区块名](设置区块名.md) - [设置区块布局](设置区块布局.md) > 图表的设置区块布局方法额外支持 `width`,`height`,`padding`参数 > 调用方式见上面的`makeCharts`方法示例