Updates 前端组件/hlsChart.md

Auto commit by GitBook Editor

前端组件/hlsChart.md

 ## hlsChart 图表
+
 ### 环状图（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）
+
 ```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
+| chartType | string | 组件类型 | Y |
 | style | string | 组件box样式 |
-| barSourceData | object | 组件数据源 | Y
+| barSourceData | object | 组件数据源 | Y |
 | titleBgColor | string | 组件标题背景颜色 |
 | title | string | 组件标题 |
 | modify | function | 编辑icon触发的事件 |
 | add | function | 新增icon触发的事件 |
-|color|string |字体颜色|
-
+| color | string | 字体颜色 |
 
 **下面是一个例子**
 
-
 ```javascript
 
 var datas = function (url) {
@@ -130,27 +125,54 @@ var statisticalData = function () {
 ```
 
 #### 注意： 数据源中的属性名，需要固定，这样做是考虑到将不同的查询结果整合成统一的数据格式，方便组件渲染。
-> - barModel:柱形图
+
+> * barModel:柱形图
 
 | 属性名 | 类型 | 作用 |
-|:---: | :---: | :---: | :---: | 
-| xkey | string | x轴标题对应的属性名
+| --- | --- | --- |
+| xkey | string | x轴标题对应的属性名 |
 | ykeys | string | y轴数据对应的属性名 |
 | data | Array | 数据集 |
 | labels | string | 鼠标经过柱状图时ykeys对应的值的描述 |
 | barColors | string | 柱子颜色 |
 | barSizeRatio | Number | 柱子和数据的比例 |
-> - statisticalModel:上方的统计框
+
+> * statisticalModel:上方的统计框
 
 | 属性名 | 类型 | 作用 |
-|:---: | :---: | :---: |
+| --- | --- | --- |
 | statisticalTitle | object | 统计框的属性名以及属性描述 |
-| statisticalData  | object |  数据源   (注意statisticalData的属性名和statisticalTitle中的属性名要对应上)
-
-
-
+| 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>
 ```
+> * 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>
+
+
+```
+
+
+
+
+
+
+
+
+