f763ad2855
- 将所有 ERP API 文件从旧的 axios 配置迁移到新的 requestClient - 使用 namespace 组织接口类型定义，提高代码可维护性 - 将对象方法改为独立的导出函数，符合现代 JavaScript 最佳实践 - 为所有 API 函数添加完整的 TypeScript 类型定义 - 统一分页查询参数和状态更新参数的接口定义 - 涵盖财务、采购、销售、库存等所有 ERP 业务模块
121 lines
2.0 KiB
Vue
121 lines
2.0 KiB
Vue
<script lang="ts" setup>
|
|
import type { EChartsOption } from 'echarts';
|
|
|
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
|
|
import { ref, watch } from 'vue';
|
|
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
|
|
import { Card } from 'ant-design-vue';
|
|
|
|
interface Props {
|
|
title: string;
|
|
value?: Array<{ price: number; time: string }>;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
value: () => [],
|
|
});
|
|
|
|
const chartRef = ref<EchartsUIType>();
|
|
const { renderEcharts } = useEcharts(chartRef);
|
|
|
|
/** 折线图配置 */
|
|
const lineChartOptions: EChartsOption = {
|
|
grid: {
|
|
left: 20,
|
|
right: 20,
|
|
bottom: 20,
|
|
top: 80,
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
top: 50,
|
|
},
|
|
series: [
|
|
{
|
|
name: '金额',
|
|
type: 'line',
|
|
smooth: true,
|
|
areaStyle: {},
|
|
data: [],
|
|
},
|
|
],
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: false,
|
|
},
|
|
brush: {
|
|
type: ['lineX', 'clear'],
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
name: props.title,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
},
|
|
padding: [5, 10],
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: [],
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
};
|
|
|
|
watch(
|
|
() => props.value,
|
|
(val) => {
|
|
if (!val || val.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// 更新图表数据
|
|
const xAxisData = val.map((item) => item.time);
|
|
const seriesData = val.map((item) => item.price);
|
|
|
|
const options = {
|
|
...lineChartOptions,
|
|
xAxis: {
|
|
...lineChartOptions.xAxis,
|
|
data: xAxisData,
|
|
},
|
|
series: [
|
|
{
|
|
...lineChartOptions.series![0],
|
|
data: seriesData,
|
|
},
|
|
],
|
|
};
|
|
|
|
renderEcharts(options);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Card>
|
|
<template #title>
|
|
{{ title }}
|
|
</template>
|
|
<!-- 折线图 -->
|
|
<EchartsUI ref="chartRef" :height="300" />
|
|
</Card>
|
|
</template>
|