README.md 2.9 KB
Newer Older
KK's avatar
KK committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
## ibiz图表视图相关文档(移动端)

### 一、图表(序列)类型

#### 	1、漏斗图

##### (1) 支持功能

- ###### 自定义分组:需配置代码表

- ###### 图例数据自定义切换

##### 	(2) 平台配置

- 选择序列类型为漏斗图、坐标系为:无坐标系、分类属性为该实体的分类属性、值属性为该实体的值属性

<div style = "display:flex; overflow:hidden; ">
	<img src="images/README/pz_funnel_1.png" ></img>
</div>

- 

##### 	(3) 界面UI

<div style = "display:flex; overflow:hidden; ">
	<img src="images/README/funnel.png" ></img>
</div>



#### 	2、条形图

##### 	(1)支持功能:

- ###### 自定义分组:季度分组、年分组、月分组(示例为季度分组)

- ###### 图例数据自定义切换

##### (2) 平台配置

- 建立坐标轴(x、y)数据字段为该轴展示的数据(见二坐标轴配置)

- 选择序列类型为条形图、x、y坐标轴(为第一步建立的坐标轴)、分类属性为该实体的分类属性、值属性为该实体的值属性、分组模式

  <div style = "display : flex ; overflow: hidden; ">
  	<img src="images/README/pz_bar_2.png" ></img>
  </div>

##### 	(3)界面UI

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/bar.png" ></img>
</div>


#### 	3、饼图

##### 	(1)支持功能

- ###### 自定义分组:季度分组、年分组、月分组(示例为季度分组)、代码表

- ###### 图例数据自定义切换

##### (2) 平台配置

- 建立坐标轴(x、y)数据字段为该轴展示的数据(见二坐标轴配置)

- 选择序列类型为饼图、x、y坐标轴(为第一步建立的坐标轴)、分类属性为该实体的分类属性、值属性为该实体的值属性

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/pz_bing_1.png" ></img>
</div>

##### 	(3)界面UI

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/bing.png" ></img>
</div>

#### 4、折线图

##### (1)支持功能:

- ###### 自定义分组:需配置代码表

- ###### 图例数据自定义切换

##### (2)平台配置

- 建立坐标轴(x、y)数据字段为该轴展示的数据(见二坐标轴配置)

- 选择序列类型为折线图、x、y坐标轴(为第一步建立的坐标轴)、分类属性为该实体的分类属性、值属性为该实体的值属性

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/pz_line_1.png" ></img>
</div>

##### (3)界面UI

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/line.png" ></img>
</div>

### 二、坐标轴

新建坐标轴:标题为该坐标轴的标题、坐标轴类型(分类、数值、时间)、坐标轴位置(坐标轴展示数据的位置)

数据字段(该坐标轴的数据属性)

<div style = "display : flex ; overflow: hidden; ">
	<img src="images/README/pz_bar_1.png" ></img>
</div>