Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
civil-front
Overview
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
civil
civil-front
Commits
c21f758c
Commit
c21f758c
authored
Jun 21, 2021
by
苏咏卓
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
页面更新
parent
b60b4efc
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
271 additions
and
97 deletions
+271
-97
src/api/home.js
+11
-0
src/views/funeral/funeral.vue
+2
-2
src/views/home.vue
+151
-95
src/views/home2.vue
+107
-0
No files found.
src/api/home.js
0 → 100644
View file @
c21f758c
import
request
from
'@/utils/request'
//获取地图数据
export
const
getMapData
=
(
areaId
)
=>
{
return
request
({
url
:
`portal/static/map/
${
areaId
}
.json`
,
method
:
'get'
})
}
\ No newline at end of file
src/views/funeral/funeral.vue
View file @
c21f758c
...
...
@@ -55,7 +55,7 @@
</el-col>
<el-col
:span=
"16"
>
<el-card
shadow=
"hover"
>
<div
class=
"b
ox
"
id=
"1"
></div>
<div
class=
"b
arCharts
"
id=
"1"
></div>
</el-card>
</el-col>
</el-row>
...
...
@@ -240,7 +240,7 @@ export default {
background-color
:
rgba
(
238
,
249
,
255
);
}
.b
ox
{
.b
arCharts
{
width
:
100%
;
height
:
330px
;
}
...
...
src/views/home.vue
View file @
c21f758c
<
template
>
<div
class=
"dashboard-container"
>
<div
class=
"dashboard-editor-container"
>
<github-corner
class=
"github-corner"
/>
<panel-group
@
handleSetLineChartData=
"handleSetLineChartData"
/>
<el-row
style=
"background:#fff;padding:16px 16px 0;margin-bottom:32px;"
>
<line-chart
:chart-data=
"lineChartData"
/>
</el-row>
<el-row
:gutter=
"32"
>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<radar-chart
/>
</div>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<pie-chart
/>
</div>
<el-row
:gutter=
"18"
>
<el-col
:span=
"16"
>
<el-card
shadow=
"hover"
>
<div
id=
"map"
></div>
<el-col
:span=
"16"
>
<el-card
shadow=
"hover"
>
<el-card
shadow=
"hover"
>
<div>
<el-table
v-loading=
"loading"
:data=
"tableData"
border
style=
"width: 100%"
:header-cell-style=
"
{
background: '#eef1f6',
color: '#606266',
}"
>
<el-table-column
prop=
"albumName"
label=
"行政区划"
align=
"center"
/>
<el-table-column
prop=
"albumName"
label=
"经营性公墓"
align=
"center"
/>
<el-table-column
prop=
"albumName"
label=
"非营性公墓"
align=
"center"
/>
<el-table-column
prop=
"albumName"
label=
"公益性公墓"
align=
"center"
/>
</el-table>
</div>
</el-card>
</el-card>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<bar-chart
/>
</div>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</
template
>
<
script
>
import
GithubCorner
from
'@/components/GithubCorner'
import
PanelGroup
from
'./dashboard/PanelGroup'
import
LineChart
from
'./dashboard/LineChart'
import
RadarChart
from
'@/components/Echarts/RadarChart'
import
PieChart
from
'@/components/Echarts/PieChart'
import
BarChart
from
'@/components/Echarts/BarChart'
const
lineChartData
=
{
newVisitis
:
{
expectedData
:
[
100
,
120
,
161
,
134
,
105
,
160
,
165
],
actualData
:
[
120
,
82
,
91
,
154
,
162
,
140
,
145
]
},
messages
:
{
expectedData
:
[
200
,
192
,
120
,
144
,
160
,
130
,
140
],
actualData
:
[
180
,
160
,
151
,
106
,
145
,
150
,
130
]
},
purchases
:
{
expectedData
:
[
80
,
100
,
121
,
104
,
105
,
90
,
100
],
actualData
:
[
120
,
90
,
100
,
138
,
142
,
130
,
130
]
},
shoppings
:
{
expectedData
:
[
130
,
140
,
141
,
142
,
145
,
150
,
160
],
actualData
:
[
120
,
82
,
91
,
154
,
162
,
140
,
130
]
}
}
import
echarts
from
"echarts"
;
import
{
getMapData
}
from
"@/api/home"
;
export
default
{
name
:
'Dashboard'
,
components
:
{
GithubCorner
,
PanelGroup
,
LineChart
,
RadarChart
,
PieChart
,
BarChart
},
data
()
{
return
{
lineChartData
:
lineChartData
.
newVisitis
}
tableData
:
[],
pageInfo
:
{
page
:
1
,
size
:
10
,
total
:
0
,
},
loading
:
false
,
};
},
created
()
{
this
.
getMapData
(
"g450000"
);
//默认展示广西 g450000
},
methods
:
{
handleSetLineChartData
(
type
)
{
this
.
lineChartData
=
lineChartData
[
type
]
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.dashboard-editor-container
{
padding
:
32px
;
background-color
:
rgb
(
240
,
242
,
245
);
position
:
relative
;
//获取地图数据
getMapData
(
areaId
)
{
getMapData
(
areaId
).
then
((
res
)
=>
{
console
.
log
(
"map"
,
res
);
this
.
map
([],
res
,
100
,
0
);
});
},
.github-corner
{
position
:
absolute
;
top
:
0
;
border
:
0
;
right
:
0
;
}
.chart-wrapper
{
background
:
#fff
;
padding
:
16px
16px
0
;
margin-bottom
:
32px
;
}
}
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
map
(
dataList
,
mapList
,
max
,
min
)
{
let
map
=
echarts
.
init
(
document
.
getElementById
(
"map"
));
echarts
.
registerMap
(
"GX"
,
mapList
);
map
.
setOption
({
tooltip
:
{
trigger
:
"item"
,
// formatter: '{b}
<
br
/>
{
c
}
%
(
完成数
/
指标数
)
'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#333333" },
borderWidth: 1, //区域边框宽度
borderColor: "#0b1940", //区域边框颜色
},
emphasis: { label: { show: true } },
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
console.log("点击取值", res);
});
},
},
};
</
script
>
@media
(
max-width
:
1024px
)
{
.chart-wrapper
{
padding
:
8
px
;
}
}
</
style
>
<
style
lang=
"scss"
scoped
>
#map
{
width
:
800
px
;
height
:
800px
;
}
</
style
>
\ No newline at end of file
src/views/home2.vue
0 → 100644
View file @
c21f758c
<
template
>
<div
class=
"dashboard-container"
>
<div
class=
"dashboard-editor-container"
>
<github-corner
class=
"github-corner"
/>
<panel-group
@
handleSetLineChartData=
"handleSetLineChartData"
/>
<el-row
style=
"background:#fff;padding:16px 16px 0;margin-bottom:32px;"
>
<line-chart
:chart-data=
"lineChartData"
/>
</el-row>
<el-row
:gutter=
"32"
>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<radar-chart
/>
</div>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<pie-chart
/>
</div>
</el-col>
<el-col
:xs=
"24"
:sm=
"24"
:lg=
"8"
>
<div
class=
"chart-wrapper"
>
<bar-chart
/>
</div>
</el-col>
</el-row>
</div>
</div>
</
template
>
<
script
>
import
GithubCorner
from
'@/components/GithubCorner'
import
PanelGroup
from
'./dashboard/PanelGroup'
import
LineChart
from
'./dashboard/LineChart'
import
RadarChart
from
'@/components/Echarts/RadarChart'
import
PieChart
from
'@/components/Echarts/PieChart'
import
BarChart
from
'@/components/Echarts/BarChart'
const
lineChartData
=
{
newVisitis
:
{
expectedData
:
[
100
,
120
,
161
,
134
,
105
,
160
,
165
],
actualData
:
[
120
,
82
,
91
,
154
,
162
,
140
,
145
]
},
messages
:
{
expectedData
:
[
200
,
192
,
120
,
144
,
160
,
130
,
140
],
actualData
:
[
180
,
160
,
151
,
106
,
145
,
150
,
130
]
},
purchases
:
{
expectedData
:
[
80
,
100
,
121
,
104
,
105
,
90
,
100
],
actualData
:
[
120
,
90
,
100
,
138
,
142
,
130
,
130
]
},
shoppings
:
{
expectedData
:
[
130
,
140
,
141
,
142
,
145
,
150
,
160
],
actualData
:
[
120
,
82
,
91
,
154
,
162
,
140
,
130
]
}
}
export
default
{
name
:
'Dashboard'
,
components
:
{
GithubCorner
,
PanelGroup
,
LineChart
,
RadarChart
,
PieChart
,
BarChart
},
data
()
{
return
{
lineChartData
:
lineChartData
.
newVisitis
}
},
methods
:
{
handleSetLineChartData
(
type
)
{
this
.
lineChartData
=
lineChartData
[
type
]
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.dashboard-editor-container
{
padding
:
32px
;
background-color
:
rgb
(
240
,
242
,
245
);
position
:
relative
;
.github-corner
{
position
:
absolute
;
top
:
0
;
border
:
0
;
right
:
0
;
}
.chart-wrapper
{
background
:
#fff
;
padding
:
16px
16px
0
;
margin-bottom
:
32px
;
}
}
@media
(
max-width
:
1024px
)
{
.chart-wrapper
{
padding
:
8px
;
}
}
</
style
>
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