tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页图表添加resize自适应

Browse Source
This commit is contained in:
郝先瑞
2022-01-24 23:54:29 +08:00
parent 35ceddc39a
commit 251637cf17
6 changed files with 211 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/utils/resize.ts Normal file
View File

@@ -0,0 +1,67 @@
import { ref } from 'vue'
export default function() {
const chart = ref<any>()
const sidebarElm = ref<Element>()
const chartResizeHandler = () => {
if (chart.value) {
chart.value.resize()
}
}
const sidebarResizeHandler = (e: TransitionEvent) => {
if (e.propertyName === 'width') {
chartResizeHandler()
}
}
const initResizeEvent = () => {
window.addEventListener('resize', chartResizeHandler)
}
const destroyResizeEvent = () => {
window.removeEventListener('resize', chartResizeHandler)
}
const initSidebarResizeEvent = () => {
sidebarElm.value = document.getElementsByClassName('sidebar-container')[0]
if (sidebarElm.value) {
sidebarElm.value.addEventListener('transitionend', sidebarResizeHandler as EventListener)
}
}
const destroySidebarResizeEvent = () => {
if (sidebarElm.value) {
sidebarElm.value.removeEventListener('transitionend', sidebarResizeHandler as EventListener)
}
}
const mounted = () => {
initResizeEvent()
initSidebarResizeEvent()
}
const beforeDestroy = () => {
destroyResizeEvent()
destroySidebarResizeEvent()
}
const activated = () => {
initResizeEvent()
initSidebarResizeEvent()
}
const deactivated = () => {
destroyResizeEvent()
destroySidebarResizeEvent()
}
return {
chart,
mounted,
beforeDestroy,
activated,
deactivated
}
}

40
src/views/dashboard/components/BarChart.vue
View File

@@ -8,8 +8,9 @@
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
import resize from '@/utils/resize'
const props = defineProps({
id: {
@@ -32,6 +33,14 @@ const props = defineProps({
}
})
const {
mounted,
chart,
beforeDestroy,
activated,
deactivated
} = resize()
function initChart() {
const barChart = init(document.getElementById(props.id) as HTMLDivElement)
@@ -45,7 +54,7 @@ function initChart() {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color:'#096b92'
color: '#096b92'
}
},
grid: {
@@ -71,7 +80,7 @@ function initChart() {
xAxis: [
{
type: 'category',
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东','海外'],
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东', '海外'],
axisPointer: {
type: 'shadow'
}
@@ -104,22 +113,22 @@ function initChart() {
data: [
8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213
],
barWidth : 20
barWidth: 20
},
{
name: '毛利润',
type: 'bar',
data: [
6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000,8200, 7000
6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000, 8200, 7000
],
barWidth : 20
barWidth: 20
},
{
name: '收入增长率',
type: 'line',
yAxisIndex: 1,
data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42,46]
data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42, 46]
},
{
name: '利润增长率',
@@ -128,14 +137,29 @@ function initChart() {
data: [82, 81, 56, 45, 51, 65, 65, 67, 78, 76, 67, 78]
}
]
})
} as EChartsOption)
chart.value = barChart
}
onBeforeUnmount(() => {
beforeDestroy()
})
onActivated(() => {
activated()
})
onDeactivated(() => {
deactivated()
})
onMounted(() => {
mounted()
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>

35
src/views/dashboard/components/FunnelChart.vue
View File

@@ -8,8 +8,10 @@
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
import resize from '@/utils/resize'
import {FunnelChart} from "echarts/charts";
const props = defineProps({
id: {
@@ -32,10 +34,18 @@ const props = defineProps({
}
})
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
const {
mounted,
chart,
beforeDestroy,
activated,
deactivated
} = resize()
pieChart.setOption({
function initChart() {
const funnelChart = init(document.getElementById(props.id) as HTMLDivElement)
funnelChart.setOption({
title: {
show: true,
text: '订单线索转化漏斗图',
@@ -103,14 +113,29 @@ function initChart() {
]
}
]
})
} as EChartsOption)
chart.value = funnelChart
}
onBeforeUnmount(() => {
beforeDestroy()
})
onActivated(() => {
activated()
})
onDeactivated(() => {
deactivated()
})
onMounted(() => {
mounted()
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>

33
src/views/dashboard/components/PieChart.vue
View File

@@ -8,8 +8,9 @@
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
import resize from "@/utils/resize";
const props = defineProps({
id: {
@@ -32,6 +33,14 @@ const props = defineProps({
}
})
const {
mounted,
chart,
beforeDestroy,
activated,
deactivated
} = resize()
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
@@ -61,7 +70,7 @@ function initChart() {
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 180],
radius: [50, 160],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
@@ -74,15 +83,29 @@ function initChart() {
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
{ value: 22, name: 'rose 7' }
]
}
]
})
} as EChartsOption)
chart.value = pieChart
}
onBeforeUnmount(() => {
beforeDestroy()
})
onActivated(() => {
activated()
})
onDeactivated(() => {
deactivated()
})
onMounted(() => {
mounted()
nextTick(() => {
initChart()
})

58
src/views/dashboard/components/RadarChart.vue
View File

@@ -8,8 +8,9 @@
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
import resize from "@/utils/resize";
const props = defineProps({
id: {
@@ -32,10 +33,18 @@ const props = defineProps({
}
})
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
const {
mounted,
chart,
beforeDestroy,
activated,
deactivated
} = resize()
pieChart.setOption({
function initChart() {
const radarChart = init(document.getElementById(props.id) as HTMLDivElement)
radarChart.setOption({
title: {
show: true,
text: '订单状态总雷达图',
@@ -57,17 +66,17 @@ function initChart() {
legend: {
x: 'center',
y: 'bottom',
data: ['待支付', '已发货']
data: ['预定数量', '下单数量','发货数量']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
{ name: '家用电器', max: 6500 },
{ name: '服装箱包', max: 16000 },
{ name: '运动户外', max: 30000 },
{ name: '手机数码', max: 38000 },
{ name: '汽车用品', max: 52000 },
{ name: '家具厨具', max: 25000 }
]
},
series: [
@@ -76,20 +85,39 @@ function initChart() {
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '待支付'
value: [4200, 10000, 20000, 35000, 50000, 18000],
name: '预定数量'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '已发货'
name: '下单数量'
},
{
value: [5000, 12000, 23000, 18000, 31000, 11000],
name: '发货数量'
}
]
}
]
})
} as EChartsOption)
chart.value = radarChart
}
onBeforeUnmount(() => {
beforeDestroy()
})
onActivated(() => {
activated()
})
onDeactivated(() => {
deactivated()
})
onMounted(() => {
mounted()
nextTick(() => {
initChart()
})

23
src/views/dashboard/index.vue
View File

@@ -62,19 +62,19 @@
</el-col>
</el-row>
<BarChart id="barChart" height="400px" width="100%" class="bar-chart-container"/>
<BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
<el-row :gutter="40" style="margin-top: 20px">
<el-col :xs="24" :span="8">
<PieChart id="pieChart" height="500px" width="100%" class="pie-chart-container"/>
<PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
</el-col>
<el-col :xs="24" :span="8">
<FunnelChart id="funnelChart" height="500px" width="100%" class="pie-chart-container"/>
<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>
</el-col>
<el-col :xs="24" :span="8">
<RadarChart id="radarChart" height="500px" width="100%" class="pie-chart-container"/>
<RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
</el-col>
</el-row>
@@ -82,10 +82,13 @@
</template>
<script setup lang="ts">
import GithubCorner from '@/components/GithubCorner/index.vue'
import TodoList from './components/TodoList/index.vue'
// Vue引用
import {computed, reactive, toRefs} from "vue";
// 组件引用
import GithubCorner from '@/components/GithubCorner/index.vue'
import TodoList from './components/TodoList/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
@@ -241,8 +244,7 @@ const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(stat
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
margin: 26px 20px 0;
.card-panel-text {
line-height: 18px;
@@ -257,13 +259,10 @@ const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(stat
}
}
.bar-chart-container {
.chart-container {
background: #ffffff;
}
.pie-chart-container {
background: #ffffff;
}
}
</style>