Commit bdb220a4 authored by zihao21's avatar zihao21

Updates 前端组件/hlsChart.md

Auto commit by GitBook Editor
parent 7b854410
## hlsChart 图表
### 环状图(CIRCULAR)
使用方法:
### 环状图(CIRCULAR)
使用方法:
```xml
<h:hlsChart
chartType="CIRCULAR"
......@@ -20,7 +23,7 @@ var select = function(arg,item){
```
| 属性名 | 类型 | 描述 |
| :--- | :--- | :--- |
| --- | --- | --- |
| chartType | String | 图表类型 |
| style | String | 图表外层的style样式 |
| url | String | 图表数据源的获取地址 |
......@@ -29,40 +32,32 @@ var select = function(arg,item){
| values | String | 图表中各数据块所对应响应数据中的字段,多个数据块之间使用“,”分隔 |
| selectedChanged | String | 图表中各数据块的点击回调事件 |
## HlsBarChart 图表
### 柱状图(BAR)
## HlsBarChart 图表
### 柱状图(BAR)
```xml
<h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red"
title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart>
```
**常用的属性**
| 属性名 | 类型 | 作用 | 是否必输|
|:---: | :---: | :---: | :---: |
| id | string | 唯一标识 |
| chartType | string | 组件类型 | Y
| style | string | 组件box样式 |
| barSourceData | object | 组件数据源 | Y
| titleBgColor | string | 组件标题背景颜色 |
| title | string | 组件标题 |
| modify | function | 编辑icon触发的事件 |
**常用的属性**
| 属性名 | 类型 | 作用 | 是否必输 |
| --- | --- | --- | --- |
| id | string | 唯一标识 |
| chartType | string | 组件类型 | Y |
| style | string | 组件box样式 |
| barSourceData | object | 组件数据源 | Y |
| titleBgColor | string | 组件标题背景颜色 |
| title | string | 组件标题 |
| modify | function | 编辑icon触发的事件 |
| add | function | 新增icon触发的事件 |
|color|string |字体颜色|
| color | string | 字体颜色 |
**下面是一个例子**
```javascript
var datas = function (url) {
......@@ -74,7 +69,7 @@ var datas = function (url) {
contentType: "application/json; charset=utf-8",
success: function (datas) {
odatas = datas.rows;
}
});
return odatas;
......@@ -116,41 +111,68 @@ var statisticalData = function () {
}
};
function modifyFunc(e) {
alert("modifyFunc");
}
function addFunc(e) {
alert("addFunc");
}
```
#### 注意: 数据源中的属性名,需要固定,这样做是考虑到将不同的查询结果整合成统一的数据格式,方便组件渲染。
> - barModel:柱形图
| 属性名 | 类型 | 作用 |
|:---: | :---: | :---: | :---: |
| xkey | string | x轴标题对应的属性名
| ykeys | string | y轴数据对应的属性名 |
| data | Array | 数据集 |
| labels | string | 鼠标经过柱状图时ykeys对应的值的描述 |
| barColors | string | 柱子颜色 |
| barSizeRatio | Number | 柱子和数据的比例 |
> - statisticalModel:上方的统计框
> * barModel:柱形图
| 属性名 | 类型 | 作用 |
|:---: | :---: | :---: |
| statisticalTitle | object | 统计框的属性名以及属性描述 |
| statisticalData | object | 数据源 (注意statisticalData的属性名和statisticalTitle中的属性名要对应上)
| --- | --- | --- |
| xkey | string | x轴标题对应的属性名 |
| ykeys | string | y轴数据对应的属性名 |
| data | Array | 数据集 |
| labels | string | 鼠标经过柱状图时ykeys对应的值的描述 |
| barColors | string | 柱子颜色 |
| barSizeRatio | Number | 柱子和数据的比例 |
> * statisticalModel:上方的统计框
| 属性名 | 类型 | 作用 |
| --- | --- | --- |
| statisticalTitle | object | 统计框的属性名以及属性描述 |
| statisticalData | object | 数据源 \(注意statisticalData的属性名和statisticalTitle中的属性名要对应上\) |
```xml
<h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red"
title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart>
```
\ No newline at end of file
```
> * BROKEN:折线图
| 属性名 | 类型 | 作用 |
| --- | --- | --- |
| renderType | string | 渲染类型(one 或者 three) |
| url| string | 当渲染为three的时候url生效 |
| time| string | 当天时间(yyyy-mm-dd) |
| title| string | 折线图标题 |
| imageSrc| string | 折线图左角图片路径 |
```xml
<h:hlsChart renderType="three"
url="/con/conHomepage/putIn/query" chartType="BROKEN" time="${Session.sysDate!}"
title="合同逾期金额变动"
imageSrc="/resources/images/CONT/zhuzi.png"></h:hlsChart>
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment