Skip to content

Commit

Permalink
添加 折线图
Browse files Browse the repository at this point in the history
添加 面积图
添加 阶梯图
添加 条形图
添加vue组件分包加载
  • Loading branch information
SmallRuralDog committed Mar 30, 2020
1 parent 3313d1f commit f0c1761
Show file tree
Hide file tree
Showing 38 changed files with 1,105 additions and 46 deletions.
1 change: 1 addition & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"plugins": [

[
"import",
{
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions docs/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ Card::make()->content();

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

![image-20200330135622182](components.assets/image-20200330135622182.png)

```php
Steps::make()
->simple(false)
Expand Down Expand Up @@ -72,6 +74,8 @@ Text::make()->html("我是纯文本");

用于页面中展示重要的提示信息。

![image-20200330135556270](components.assets/image-20200330135556270.png)

```
Alert::make("title","desc");
```
Expand Down Expand Up @@ -472,3 +476,86 @@ Transfer::make()->data($permissionModel::get()->map(function ($item) {



## 统计图表

g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics),同时也致敬了 ggplot2。

![image-20200330151604231](components.assets/image-20200330151604231.png)

### Line - 折线图

使用一条折线的线段显示数据在一个具有顺序性的维度上的变化。

![image-20200330154928558](components.assets/image-20200330154928558.png)

```php
Line::make()
->data(function () {
$data = collect();
for ($year = 2010; $year <= 2020; $year++) {
$data->push([
'year' => (string)$year,
'type'=>'type1',
'value' => rand(100, 1000)
]);
$data->push([
'year' => (string)$year,
'type'=>'type2',
'value' => rand(100, 1000)
]);
}
return $data;
})
->config(function () {
return [
'title' => [
'visible' => true,
'text' => '折线图',
],
'seriesField'=>'type',
'smooth'=>true,
'xField' => 'year',
'yField' => 'value'
];
});
```

具体请参考:https://g2plot.antv.vision/zh/examples/line/basic

### StepLine - 阶梯折图

阶梯线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升还是下降,是否存在周期性的循环?因此,相对于独立的数据点,折线图关注的是全局趋势。

![image-20200330161859300](components.assets/image-20200330161859300.png)

```php
StepLine::make()->data()->config();
```

具体参数请参考:https://g2plot.antv.vision/zh/examples/step-line/basic

### Area - 面积图

面积图又叫区域图。 它是在折线图的基础之上形成的,它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充,这样一个填充区域我们叫做面积,颜色的填充可以更好的突出趋势信息。

面积图用于强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。他们最常用于表现趋势和关系,而不是传达特定的值。

![image-20200330154940875](components.assets/image-20200330154940875.png)

```php
Area::make()->data()->config();
```

具体参数请参考:https://g2plot.antv.vision/zh/examples/area/basic

### Column - 柱状图

柱状图用于描述分类数据之间的对比,如果我们把时间周期,如周、月、年,也理解为一种分类数据 (time category),那么柱状图也可以用于描述时间周期之间的数值比较。

![image-20200330162019246](components.assets/image-20200330162019246.png)

```php
Column::make()->data()->config();
```

具体参数请参考:https://g2plot.antv.vision/zh/examples/column/basic
24 changes: 22 additions & 2 deletions docs/grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,13 @@ $column->headerAlign('right');
$column->help('帮助内容');
```

### 设置默认值

当获取不到字段值的时候显示的内容,默认为`null`

```php
$column->defaultValue("-")
```

### 显示组件

Expand All @@ -545,10 +552,23 @@ $column->component(Tag::make()->size("mini")->type("info"));
支持HTML标签

```php
//普通
$grid->column('name')->customValue(function ($row, $value) {
return $value;
})
});
//一对一
$grid->column('user.name')->customValue(function ($row, $value) {
//此时的value是name的值
return $value;
});
//一对多
$grid->column('roles.name')->customValue(function ($row, $value) {
//此时的value是 roles.name的值的数组
return $value;
});
```


### 前缀/后缀

会在值的前后以字符串形式拼接
Expand Down Expand Up @@ -589,7 +609,7 @@ $grid->column('permissions.name'),
#### 一对多
一对多最终得到的是数组,前端会自动循环展示,文本建议使用`Tag`组件,图片建议使用`Avatar``Image`组件
```php
$grid->column('permissions.name')->displayComponent(Tag::make()->type('info')),
$grid->column('permissions.name')->component(Tag::make()->type('info')),
```


Expand Down
Loading

0 comments on commit f0c1761

Please sign in to comment.