Updates 前端组件/hlsChart.md

Auto commit by GitBook Editor

前端组件/hlsChart.md

 ## 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>
+
+
+```
+
+
+
+
+
+
+
+
+