Commit b2bf65cf authored by 程志康's avatar 程志康

Updates 前端组件/hlsChart.md

Auto commit by GitBook Editor
parent a32742fd
...@@ -37,7 +37,6 @@ var select = function(arg,item){ ...@@ -37,7 +37,6 @@ var select = function(arg,item){
### 柱状图(BAR) ### 柱状图(BAR)
```xml ```xml
<h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red" <h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red"
title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart> title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart>
``` ```
...@@ -46,20 +45,19 @@ var select = function(arg,item){ ...@@ -46,20 +45,19 @@ var select = function(arg,item){
| 属性名 | 类型 | 作用 | 是否必输 | | 属性名 | 类型 | 作用 | 是否必输 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| id | string | 唯一标识 | | | id | string | 唯一标识 |
| chartType | string | 组件类型 | Y | | chartType | string | 组件类型 | Y |
| style | string | 组件box样式 | | | style | string | 组件box样式 |
| barSourceData | object | 组件数据源 | Y | | barSourceData | object | 组件数据源 | Y |
| titleBgColor | string | 组件标题背景颜色 | | | titleBgColor | string | 组件标题背景颜色 |
| title | string | 组件标题 | | | title | string | 组件标题 |
| modify | function | 编辑icon触发的事件 | | | modify | function | 编辑icon触发的事件 |
| add | function | 新增icon触发的事件 | | | add | function | 新增icon触发的事件 |
| color | string | 字体颜色 | | | color | string | 字体颜色 |
**下面是一个例子** **下面是一个例子**
```javascript ```javascript
var datas = function (url) { var datas = function (url) {
var odatas = [], var odatas = [],
$.ajax({ $.ajax({
...@@ -120,8 +118,6 @@ var statisticalData = function () { ...@@ -120,8 +118,6 @@ var statisticalData = function () {
function addFunc(e) { function addFunc(e) {
alert("addFunc"); alert("addFunc");
} }
``` ```
#### 注意: 数据源中的属性名,需要固定,这样做是考虑到将不同的查询结果整合成统一的数据格式,方便组件渲染。 #### 注意: 数据源中的属性名,需要固定,这样做是考虑到将不同的查询结果整合成统一的数据格式,方便组件渲染。
...@@ -148,26 +144,53 @@ var statisticalData = function () { ...@@ -148,26 +144,53 @@ var statisticalData = function () {
<h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red" <h:hlsChart chartType="BAR" style="margin-top:5px;margin-left:6px;" barSourceData="barSourceData" titleBgColor="red"
title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart> title="商业伙伴" modify="modifyFunc" add="addFunc" color="#ed4e2a"></h:hlsChart>
``` ```
## HlsBrokenChart 图表 ## HlsBrokenChart 图表
### 折线图(BROKEN)
### 折线图(BROKEN)
| 属性名 | 类型 | 作用 | | 属性名 | 类型 | 作用 |
| --- | --- | --- | | --- | --- | --- |
| renderType | string | 渲染类型(one 或者 three) | | renderType | string | 渲染类型(one 或者 three) |
| url| string | 当渲染为three的时候url生效 | | url | string | 当渲染为three的时候url生效 |
| time| string | 当天时间(yyyy-mm-dd) | | time | string | 当天时间(yyyy-mm-dd) |
| title| string | 折线图标题 | | title | string | 折线图标题 |
| imageSrc| string | 折线图左角图片路径 | | imageSrc | string | 折线图左角图片路径 |
```xml ```xml
<h:hlsChart renderType="three" <h:hlsChart renderType="three"
url="/con/conHomepage/putIn/query" chartType="BROKEN" time="${Session.sysDate!}" url="/con/conHomepage/putIn/query" chartType="BROKEN" time="${Session.sysDate!}"
title="合同逾期金额变动" title="合同逾期金额变动"
imageSrc="/resources/images/CONT/zhuzi.png"></h:hlsChart> imageSrc="/resources/images/CONT/zhuzi.png"></h:hlsChart>
```
## HlsLineChart 图表
### 折线图(LINECHART)
| 属性名 | 类型 | 作用 |
| --- | --- | --- |
| id | string | 唯一标识 |
| url | string | 获取数据源的url |
| chartType | string | 图表类型 |
| title | string | 折线图标题 |
| style | string | 图表外层样式 |
| code | string | 选择放款/回款数据 |
```
<h:hlsChart chartType="LINECHART" id="A" code="PAYMENT" title="放款"
style="margin-top:15px;margin-left:60px;float:left;"
url="${base.contextPath}/csh/write/off/getEveryMonthPaymentAndReceiptAmount/query"> </h:hlsChart>
<h:hlsChart chartType="LINECHART" id="B" code="RECEIPT" title="回款"
style="margin-top:15px;margin-left:60px;float:left;"
url="${base.contextPath}/csh/write/off/getEveryMonthPaymentAndReceiptAmount/query"> </h:hlsChart>
<script>
InitiateSparklineCharts.init();
</script>
``` ```
......
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