111 lines
1.9 KiB
Vue
111 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import { useDark, useECharts } from '@pureadmin/utils';
|
|
import { computed, nextTick, type PropType, ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
incomeData: {
|
|
type: Array as PropType<Array<number>>,
|
|
default: () => [],
|
|
},
|
|
expendData: {
|
|
type: Array as PropType<Array<number>>,
|
|
default: () => [],
|
|
},
|
|
xAxis: {
|
|
type: Array as PropType<Array<string>>,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const { isDark } = useDark();
|
|
const theme = computed(() => (isDark.value ? 'dark' : 'light'));
|
|
|
|
const chartRef = ref();
|
|
const { setOptions } = useECharts(chartRef, {
|
|
theme,
|
|
});
|
|
|
|
watch(
|
|
() => props,
|
|
async () => {
|
|
await nextTick(); // 确保DOM更新完成后再执行
|
|
setOptions({
|
|
container: '.bar-card',
|
|
color: ['#41b6ff', '#e85f33'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'none',
|
|
},
|
|
},
|
|
grid: {
|
|
top: '20px',
|
|
left: '50px',
|
|
right: 0,
|
|
},
|
|
legend: {
|
|
data: ['收入金额', '支出金额'],
|
|
textStyle: {
|
|
color: '#606266',
|
|
fontSize: '0.875rem',
|
|
},
|
|
bottom: 0,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: props.xAxis,
|
|
axisLabel: {
|
|
fontSize: '0.875rem',
|
|
},
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
fontSize: '0.875rem',
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '收入金额',
|
|
type: 'line',
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
color: '#67C23A',
|
|
borderRadius: [10, 10, 0, 0],
|
|
},
|
|
data: props.incomeData,
|
|
},
|
|
{
|
|
name: '支出金额',
|
|
type: 'bar',
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
color: '#F56C6C',
|
|
borderRadius: [10, 10, 0, 0],
|
|
},
|
|
data: props.expendData,
|
|
},
|
|
],
|
|
});
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="chartRef" style="width: 100%; height: 504px" />
|
|
</template>
|