Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
D
dcxy-manage-shell
Project
Overview
Details
Activity
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
姜雷
dcxy-manage-shell
Commits
d660e9b0
Commit
d660e9b0
authored
Apr 18, 2019
by
姜雷
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改数据首页展现
parent
26b6ab05
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
101 additions
and
58 deletions
+101
-58
CustomerRecharge.vue
...ontainers/Dashboard/CustomerRecharge/CustomerRecharge.vue
+6
-6
chart.vue
src/containers/Dashboard/CustomerRecharge/chart.vue
+95
-52
No files found.
src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue
View file @
d660e9b0
...
...
@@ -28,14 +28,14 @@
</el-radio-group>
</div>
<div
class=
"Dashboard-title"
>
会员充值数据
<div
class=
"CustomerRecha
n
geChart-tip"
>
<div
class=
"CustomerRecha
r
geChart-tip"
>
<span
class=
"CustomerRecha
n
ge-tooltip"
class=
"CustomerRecha
r
ge-tooltip"
style=
"background-color:#4e82fb;"
></span>
累计充值:
<span
style=
"color:#f00;"
>
{{
rechargeCount
&&
rechargeCount
.
rechargeMoney
?
(
rechargeCount
.
rechargeMoney
).
toFixed
(
2
)
:
'0.00'
}}
元
</span>
<span
class=
"CustomerRecha
n
ge-tooltip"
class=
"CustomerRecha
r
ge-tooltip"
style=
"background-color:#26c9a8;"
></span>
充值人数:
<span
style=
"color:#f00;"
>
{{
rechargeCount
&&
rechargeCount
.
rechargeMen
?
rechargeCount
.
rechargeMen
:
0
}}
人
</span>
...
...
@@ -50,7 +50,7 @@ import Chart from './chart';
import
{
mapGetters
,
mapActions
}
from
'vuex'
;
export
default
{
name
:
'CustomerRecha
n
ge'
,
name
:
'CustomerRecha
r
ge'
,
components
:
{
Chart
,
},
...
...
@@ -82,7 +82,7 @@ export default {
display
:
flex
;
align-items
:
center
;
}
.CustomerRecha
n
geChart-tip
{
.CustomerRecha
r
geChart-tip
{
position
:
absolute
;
right
:
0
;
top
:
50px
;
...
...
@@ -91,7 +91,7 @@ export default {
font-size
:
14px
;
font-weight
:
normal
;
text-align
:
center
;
.CustomerRecha
n
ge-tooltip
{
.CustomerRecha
r
ge-tooltip
{
display
:
inline-block
;
width
:
10px
;
height
:
5px
;
...
...
src/containers/Dashboard/CustomerRecharge/chart.vue
View file @
d660e9b0
<
template
>
<div
class=
"CustomerRechangeChart"
>
<div
id=
'CustomerRechangeChart'
></div>
<div
class=
"CustomerRechargeChart"
>
<div
id=
'CustomerRechargeChart'
></div>
<div
id=
'CustomerRechangeSlider'
></div>
</div>
</
template
>
...
...
@@ -13,8 +12,60 @@ import chartMixin from '../chartMixin';
import
DataSet
from
'@antv/data-set'
;
import
_
from
'lodash'
;
const
Shape
=
G2
.
Shape
;
const
Util
=
G2
.
Util
;
const
Global
=
G2
.
Global
;
function
getRectRange
(
points
,
step
)
{
var
xValues
=
[];
var
yValues
=
[];
for
(
var
i
=
0
,
len
=
points
.
length
;
i
<
len
;
i
++
)
{
var
point
=
points
[
i
];
xValues
.
push
(
point
.
x
);
yValues
.
push
(
point
.
y
-
step
);
}
var
xMin
=
Math
.
min
.
apply
(
null
,
xValues
);
var
yMin
=
Math
.
min
.
apply
(
null
,
yValues
);
var
xMax
=
Math
.
max
.
apply
(
null
,
xValues
);
var
yMax
=
Math
.
max
.
apply
(
null
,
yValues
);
return
{
x
:
xMin
,
y
:
yMin
,
width
:
xMax
-
xMin
,
height
:
yMax
-
yMin
,
};
}
// 左侧柱子
Shape
.
registerShape
(
'interval'
,
'left'
,
{
draw
:
function
draw
(
cfg
,
container
)
{
var
points
=
this
.
parsePoints
(
cfg
.
points
);
var
style
=
Util
.
mix
(
Global
.
shape
.
interval
,
cfg
.
style
,
{
fill
:
cfg
.
color
});
var
rectCfg
=
getRectRange
(
points
,
cfg
.
size
);
// cfg.size 对应 .size(25)
return
container
.
addShape
(
'rect'
,
{
className
:
'interval'
,
attrs
:
Util
.
mix
(
rectCfg
,
style
),
});
},
});
// 右侧柱子
Shape
.
registerShape
(
'interval'
,
'right'
,
{
draw
:
function
draw
(
cfg
,
container
)
{
var
points
=
this
.
parsePoints
(
cfg
.
points
);
var
style
=
Util
.
mix
(
Global
.
shape
.
interval
,
cfg
.
style
,
{
fill
:
cfg
.
color
});
var
rectCfg
=
getRectRange
(
points
,
-
cfg
.
size
/
2
);
// cfg.size 对应 .size(25
return
container
.
addShape
(
'rect'
,
{
className
:
'interval'
,
attrs
:
Util
.
mix
(
rectCfg
,
style
),
});
},
});
export
default
{
name
:
'CustomerRecha
n
geChart'
,
name
:
'CustomerRecha
r
geChart'
,
mixins
:
[
chartMixin
],
props
:
{
rechargeCount
:
{
...
...
@@ -24,14 +75,14 @@ export default {
data
()
{
return
{
demoList
:
[
{
areaName
:
'bvs'
,
rechargeMoney
:
13.45
},
{
areaName
:
'gsn'
,
rechargeMoney
:
23.45
},
{
areaName
:
'dsf'
,
rechargeMoney
:
12.45
},
{
areaName
:
'bzx'
,
rechargeMoney
:
45.45
},
{
areaName
:
'bvmf'
,
rechargeMoney
:
3213.454
},
{
areaName
:
'swer'
,
rechargeMoney
:
256
},
{
areaName
:
'cvsdf'
,
rechargeMoney
:
541
},
{
areaName
:
'cvsdf'
,
rechargeMoney
:
10.15
},
{
areaName
:
'bvs'
,
rechargeMoney
:
13.45
,
rechargeMen
:
12
},
{
areaName
:
'gsn'
,
rechargeMoney
:
23.45
,
rechargeMen
:
13
},
{
areaName
:
'dsf'
,
rechargeMoney
:
12.45
,
rechargeMen
:
16
},
{
areaName
:
'bzx'
,
rechargeMoney
:
45.45
,
rechargeMen
:
63
},
{
areaName
:
'bvmf'
,
rechargeMoney
:
3213.454
,
rechargeMen
:
32
},
{
areaName
:
'swer'
,
rechargeMoney
:
256
,
rechargeMen
:
125
},
{
areaName
:
'cvsdf'
,
rechargeMoney
:
541
,
rechargeMen
:
14
},
{
areaName
:
'cvsdf'
,
rechargeMoney
:
10.15
,
rechargeMen
:
574
},
],
slider
:
null
,
sliderDom
:
null
,
...
...
@@ -51,24 +102,6 @@ export default {
const
dv
=
this
.
ds
.
createView
().
source
(
this
.
data
);
this
.
dv
=
dv
;
dv
.
transform
({
type
:
'fold'
,
fields
:
[
'rechargeMoney'
,
'rechargeMen'
],
// 展开字段集
key
:
'key'
,
// key字段
value
:
'value'
,
// value字段
retains
:
[
'areaName'
],
}).
transform
({
type
:
'map'
,
callback
(
row
)
{
if
(
row
.
key
===
'rechargeMoney'
)
{
row
.
key
=
'充值金额'
;
}
if
(
row
.
key
===
'rechargeMen'
)
{
row
.
key
=
'充值人数'
;
}
return
row
;
},
});
dv
.
transform
({
type
:
'filter'
,
callback
:
obj
=>
{
if
(
...
...
@@ -87,51 +120,60 @@ export default {
);
},
});
this
.
chart
=
new
G2
.
Chart
({
container
:
'CustomerRecha
n
geChart'
,
container
:
'CustomerRecha
r
geChart'
,
forceFit
:
true
,
height
:
this
.
height
,
padding
:
[
50
,
50
,
50
,
120
],
});
this
.
chart
.
source
(
dv
);
this
.
chart
.
axis
(
'areaName'
,
{
label
:
{
offset
:
5
,
this
.
chart
.
source
(
dv
,
{
rechargeMoney
:
{
alias
:
'充值金额'
,
},
rechargeMen
:
{
alias
:
'充值人数'
,
},
});
this
.
chart
.
axis
(
'value'
);
this
.
chart
.
axis
(
'rechargeMoney'
,
{
grid
:
null
,
});
this
.
chart
.
axis
(
'rechargeMen'
);
this
.
chart
.
coord
().
transpose
();
this
.
chart
.
legend
(
false
);
// 坐标系及着色
this
.
chartGeom
=
this
.
chart
this
.
chart
.
interval
()
.
position
(
'areaName*value'
)
.
color
(
'key'
,
[
'#4e82fb'
,
'#26c9a8'
])
.
adjust
([
{
type
:
'dodge'
,
marginRatio
:
0.2
,
},
]);
.
position
(
'areaName*rechargeMoney'
)
.
color
(
'#4e82fb'
)
.
shape
(
'left'
)
.
size
(
10
);
this
.
chart
.
interval
()
.
position
(
'areaName*rechargeMen'
)
.
shape
(
'right'
)
.
color
(
'#26c9a8'
)
.
size
(
10
);
this
.
chart
.
legend
(
false
);
this
.
chart
.
render
();
this
.
initSlider
();
},
initSlider
()
{
const
wrapDom
=
document
.
getElementById
(
'CustomerRecha
n
geChart'
);
const
wrapDom
=
document
.
getElementById
(
'CustomerRecha
r
geChart'
);
let
height
=
wrapDom
.
clientHeight
;
// const arrLength = this.data.length;
// let spanNum = 4 / arrLength;
this
.
sliderDom
=
document
.
getElementById
(
'CustomerRechangeSlider'
);
this
.
sliderDom
.
style
=
`height:
${
height
}
px`
;
this
.
slider
=
new
Slider
({
container
:
this
.
sliderDom
,
// dom 容器 id 或者 dom 容器对象
width
:
26
,
// slider 的宽度,默认为 'auto',即自适应宽度
height
:
height
,
// slider 的高度,默认为 '26px'
xAxis
:
'value'
,
// 背景图的横轴对应字段,同时为数据筛选的字段
padding
:
[
50
,
0
,
50
,
0
],
xAxis
:
'rechargeMen'
,
// 背景图的横轴对应字段,同时为数据筛选的字段
yAxis
:
'areaName'
,
// 背景图的纵轴对应字段
startRadio
:
this
.
ds
.
state
.
startRadio
,
// 新增
endRadio
:
this
.
ds
.
state
.
endRadio
,
// 新增
...
...
@@ -153,7 +195,7 @@ export default {
this
.
slider
.
render
();
// 渲染
},
updateSlider
()
{
const
wrapDom
=
document
.
getElementById
(
'CustomerRecha
n
geChart'
);
const
wrapDom
=
document
.
getElementById
(
'CustomerRecha
r
geChart'
);
let
height
=
wrapDom
.
clientHeight
;
let
dom
=
this
.
sliderDom
;
...
...
@@ -165,6 +207,7 @@ export default {
container
:
this
.
sliderDom
,
width
:
26
,
height
:
height
,
padding
:
[
50
,
0
,
50
,
0
],
xAxis
:
'value'
,
yAxis
:
'areaName'
,
startRadio
:
this
.
ds
.
state
.
startRadio
,
...
...
@@ -204,7 +247,7 @@ export default {
</
script
>
<
style
lang=
"scss"
>
.CustomerRecha
n
geChart
{
.CustomerRecha
r
geChart
{
position
:
relative
;
#CustomerRechangeSlider
{
margin-left
:
-30px
;
...
...
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