Skip to content

Commit de11374

Browse files
lpyalpya
committed
feat: 添加线、圆报表
1 parent 659ad74 commit de11374

File tree

7 files changed

+251
-25
lines changed

7 files changed

+251
-25
lines changed

‎src/components/EchartInit/Index.vue‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: hutu
44
* @Date: 2021-12-30 10:32:19
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-10 16:48:23
6+
* @LastEditTime: 2022-01-11 08:50:29
77
-->
88
<template>
99
<div :id="prop.id" :style="{ width: prop.width, height: prop.height }"></div>
@@ -19,7 +19,6 @@ echarts.use([BarChart, LineChart, PieChart, TitleComponent, TooltipComponent, To
1919
2020
import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
2121
import { debounce } from 'throttle-debounce'
22-
import elementResizeDetectorMaker from 'element-resize-detector'
2322
2423
const prop = defineProps<{
2524
id: string
@@ -40,11 +39,11 @@ const initChart = () => {
4039
/**
4140
* @desc: 监听窗口变化重置图表
4241
*/
43-
const chartResizeHandler = debounce(200, false, () => {
42+
const chartResizeHandler = debounce(100, false, () => {
4443
if (chart.value) {
4544
chart.value.resize({
4645
animation: {
47-
duration: 300
46+
duration: 200
4847
}
4948
})
5049
}
@@ -61,25 +60,22 @@ const initResizeEvent = () => {
6160
const destroyResizeEvent = () => {
6261
window.addEventListener('resize', chartResizeHandler)
6362
}
63+
6464
/**
6565
* @desc: 添加监听侧边栏变化事件
6666
*/
6767
let sidebarElm: HTMLElement
68-
const erd = elementResizeDetectorMaker()
6968
const initSidebarResizeEvent = () => {
7069
sidebarElm = document.getElementsByClassName('sidebar-container')[0] as HTMLElement
71-
if (sidebarElm) {
72-
erd.listenTo(sidebarElm, chartResizeHandler)
73-
}
70+
sidebarElm && sidebarElm.addEventListener('transitionend', chartResizeHandler)
7471
}
7572
/**
7673
* @desc: 移除监听侧边栏变化事件
7774
*/
7875
const destroySidebarResizeEvent = () => {
79-
if (sidebarElm) {
80-
erd.removeListener(sidebarElm, chartResizeHandler)
81-
}
76+
sidebarElm && sidebarElm.removeEventListener('transitionend', chartResizeHandler)
8277
}
78+
8379
const mounted = () => {
8480
initChart()
8581
initResizeEvent()
@@ -88,9 +84,6 @@ const mounted = () => {
8884
const beforeDestroy = () => {
8985
destroyResizeEvent()
9086
destroySidebarResizeEvent()
91-
if (chart.value) {
92-
chart.value.dispose()
93-
}
9487
}
9588
9689
let firstFlag = false //首次渲染

‎src/views/dashboard/Index.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,33 @@
33
<PanelGroup :list="state.panelList" />
44
<el-row>
55
<el-col :xs="24" :sm="24" :lg="24">
6+
<LineChart />
7+
</el-col>
8+
</el-row>
9+
<el-row :gutter="25">
10+
<el-col :xs="24" :sm="24" :lg="8">
11+
<div class="chart-wrapper">
12+
<BarChart />
13+
</div>
14+
</el-col>
15+
<el-col :xs="24" :sm="24" :lg="8">
16+
<div class="chart-wrapper">
17+
<PieChart />
18+
</div>
19+
</el-col>
20+
<el-col :xs="24" :sm="24" :lg="8">
621
<div class="chart-wrapper">
7-
<LineChart />
22+
<TestChart />
823
</div>
924
</el-col>
1025
</el-row>
1126
</div>
1227
</template>
1328
<script lang="ts" setup>
29+
import TestChart from './components/TestChart.vue'
1430
import LineChart from './components/LineChart.vue'
31+
import BarChart from './components/BarChart.vue'
32+
import PieChart from './components/PieChart.vue'
1533
import PanelGroup from './components/PanelGroup.vue'
1634
import { reactive } from 'vue'
1735
const state = reactive({
@@ -33,5 +51,8 @@ const state = reactive({
3351
overflow-x: hidden;
3452
height: 100%;
3553
padding: 0 20px;
54+
.chart-wrapper {
55+
margin: 20px 0 0;
56+
}
3657
}
3758
</style>

‎src/views/dashboard/components/BarChart.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!--
2+
* @Description: 用户访问量统计
3+
* @Author: hutu
4+
* @Date: 2022-01-06 14:51:10
5+
* @LastEditors: hutu
6+
* @LastEditTime: 2022-01-11 08:55:00
7+
-->
8+
<template>
9+
<div class="bar-chart">
10+
<EchartInit id="barNum" width="100%" height="400px" :option="state.option" />
11+
</div>
12+
</template>
13+
<script lang="ts" setup>
14+
import EchartInit from '@/components/EchartInit/Index.vue'
15+
import { IEchartsOption } from '@/interface'
16+
17+
import { reactive } from 'vue'
18+
const state = reactive({
19+
option: {
20+
title: {
21+
text: '浏览时长（时）'
22+
},
23+
grid: {
24+
top: '20%',
25+
left: '5%',
26+
right: '5%',
27+
bottom: '3%',
28+
containLabel: true
29+
},
30+
tooltip: {
31+
trigger: 'axis',
32+
axisPointer: {
33+
type: 'shadow'
34+
}
35+
},
36+
xAxis: {
37+
type: 'category',
38+
data: ['1月3日', '1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日']
39+
},
40+
yAxis: {
41+
type: 'value'
42+
},
43+
series: [
44+
{
45+
data: [3, 5, 3, 0.4, 1, 0.5, 0.9],
46+
type: 'bar',
47+
showBackground: true,
48+
backgroundStyle: {
49+
color: 'rgba(180, 180, 180, 0.2)'
50+
}
51+
}
52+
]
53+
} as IEchartsOption
54+
})
55+
</script>
56+
57+
<style lang="scss" scoped>
58+
.bar-chart {
59+
background: $white;
60+
padding: 30px 20px;
61+
border-radius: 4px;
62+
overflow: hidden;
63+
}
64+
</style>

‎src/views/dashboard/components/LineChart.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: hutu
44
* @Date: 2022-01-06 14:51:10
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-10 16:51:04
6+
* @LastEditTime: 2022-01-11 08:52:15
77
-->
88
<template>
99
<div class="line-chart">
@@ -38,7 +38,7 @@ const state = reactive({
3838
},
3939
yAxis: {},
4040
legend: {
41-
data: ['注册用户', '访客量', 'IP数', '阅读量']
41+
data: ['注册用户', '访客量', '访问量', 'IP数']
4242
},
4343
series: [
4444
{
@@ -54,16 +54,16 @@ const state = reactive({
5454
data: [112, 54, 15, 77, 102, 22, 30]
5555
},
5656
{
57-
name: 'IP数',
57+
name: '访问量',
5858
smooth: true,
5959
type: 'line',
60-
data: [99, 34, 5, 34, 44, 2, 16]
60+
data: [52, 154, 85, 177, 142, 132, 150]
6161
},
6262
{
63-
name: '阅读量',
63+
name: 'IP数',
6464
smooth: true,
6565
type: 'line',
66-
data: [52, 154, 85, 177, 142, 132, 150]
66+
data: [99, 34, 5, 34, 44, 2, 16]
6767
}
6868
]
6969
} as IEchartsOption
@@ -75,5 +75,6 @@ const state = reactive({
7575
background: $white;
7676
padding: 30px 20px;
7777
border-radius: 4px;
78+
overflow: hidden;
7879
}
7980
</style>

‎src/views/dashboard/components/PanelGroup.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
* @Author: hutu
44
* @Date: 2022-01-06 09:26:04
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-10 09:20:09
6+
* @LastEditTime: 2022-01-11 08:58:58
77
-->
88
<template>
9-
<el-row :gutter="20" class="panel-group">
9+
<el-row :gutter="32" class="panel-group">
1010
<el-col v-for="(item, key) in prop.list" :key="key" :xs="12" :sm="12" :lg="6" class="card-panel-col">
1111
<div class="card-panel">
1212
<div class="card-panel-icon">
@@ -42,9 +42,9 @@ const prop = defineProps<{
4242
</script>
4343
<style lang="scss" scoped>
4444
.panel-group {
45-
padding: 20px 0 5px;
45+
padding: 20px 0 0px;
4646
.card-panel-col {
47-
margin-bottom: 15px;
47+
margin-bottom: 20px;
4848
.card-panel {
4949
display: flex;
5050
height: 110px;

‎src/views/dashboard/components/PieChart.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
* @Description: 用户访问量统计
3+
* @Author: hutu
4+
* @Date: 2022-01-06 14:51:10
5+
* @LastEditors: hutu
6+
* @LastEditTime: 2022-01-11 08:51:16
7+
-->
8+
<template>
9+
<div class="pie-chart">
10+
<EchartInit id="pieNum" width="100%" height="400px" :option="state.option" />
11+
</div>
12+
</template>
13+
<script lang="ts" setup>
14+
import EchartInit from '@/components/EchartInit/Index.vue'
15+
import { IEchartsOption } from '@/interface'
16+
17+
import { reactive } from 'vue'
18+
const state = reactive({
19+
option: {
20+
title: {
21+
text: '文章统计（章）',
22+
subtext: 'Fake Data',
23+
left: 'center'
24+
},
25+
tooltip: {
26+
trigger: 'item'
27+
},
28+
legend: {
29+
orient: 'vertical',
30+
left: 'left'
31+
},
32+
series: [
33+
{
34+
type: 'pie',
35+
radius: '50%',
36+
data: [
37+
{ value: 14, name: '总文章数' },
38+
{ value: 4, name: '待审核' },
39+
{ value: 10, name: '已发布' }
40+
],
41+
emphasis: {
42+
itemStyle: {
43+
shadowBlur: 10,
44+
shadowOffsetX: 0,
45+
shadowColor: 'rgba(0, 0, 0, 0.5)'
46+
}
47+
}
48+
}
49+
]
50+
} as IEchartsOption
51+
})
52+
</script>
53+
54+
<style lang="scss" scoped>
55+
.pie-chart {
56+
background: $white;
57+
padding: 30px 20px;
58+
border-radius: 4px;
59+
overflow: hidden;
60+
}
61+
</style>

‎src/views/dashboard/components/TestChart.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!--
2+
* @Description: 用户访问量统计
3+
* @Author: hutu
4+
* @Date: 2022-01-06 14:51:10
5+
* @LastEditors: hutu
6+
* @LastEditTime: 2022-01-11 08:57:17
7+
-->
8+
<template>
9+
<div class="test-chart">
10+
<EchartInit id="testNum" width="100%" height="400px" :option="state.option" />
11+
</div>
12+
</template>
13+
<script lang="ts" setup>
14+
import EchartInit from '@/components/EchartInit/Index.vue'
15+
import { IEchartsOption } from '@/interface'
16+
17+
import { reactive } from 'vue'
18+
const state = reactive({
19+
option: {
20+
title: {
21+
text: '阅读统计（次）'
22+
},
23+
tooltip: {
24+
trigger: 'axis',
25+
axisPointer: {
26+
type: 'shadow'
27+
}
28+
},
29+
grid: {
30+
top: '20%',
31+
left: '5%',
32+
right: '5%',
33+
bottom: '3%',
34+
containLabel: true
35+
},
36+
xAxis: [
37+
{
38+
type: 'category',
39+
data: ['1月3日', '1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日'],
40+
axisTick: {
41+
alignWithLabel: true
42+
}
43+
}
44+
],
45+
yAxis: [
46+
{
47+
type: 'value',
48+
axisTick: {
49+
show: false
50+
}
51+
}
52+
],
53+
series: [
54+
{
55+
name: 'pageA',
56+
type: 'bar',
57+
stack: 'vistors',
58+
barWidth: '60%',
59+
data: [79, 52, 200, 334, 390, 330, 220]
60+
},
61+
{
62+
name: 'pageB',
63+
type: 'bar',
64+
stack: 'vistors',
65+
barWidth: '60%',
66+
data: [80, 52, 200, 334, 390, 330, 220]
67+
},
68+
{
69+
name: 'pageC',
70+
type: 'bar',
71+
stack: 'vistors',
72+
barWidth: '60%',
73+
data: [30, 52, 200, 334, 390, 330, 220]
74+
}
75+
]
76+
} as IEchartsOption
77+
})
78+
</script>
79+
<style lang="scss" scoped>
80+
.test-chart {
81+
background: $white;
82+
padding: 30px 20px;
83+
border-radius: 4px;
84+
overflow: hidden;
85+
}
86+
</style>

0 commit comments

Comments
 (0)