Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hel-developer-guide
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Spencer Chang
hel-developer-guide
Commits
b2bf65cf
Commit
b2bf65cf
authored
Aug 14, 2017
by
程志康
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Updates 前端组件/hlsChart.md
Auto commit by GitBook Editor
parent
a32742fd
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
40 additions
and
17 deletions
+40
-17
hlsChart.md
前端组件/hlsChart.md
+40
-17
No files found.
前端组件/hlsChart.md
View file @
b2bf65cf
...
@@ -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>
```
```
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment