Skip to content

F
factory_front
Commit 47e24ee4 by wusiyi
Options

feat: 图表优化

parent fd7d9058
Showing with 80 additions and 13 deletions
src/views/Dashboard.vue
...@@ -534,7 +534,7 @@ ...@@ -534,7 +534,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick, type Ref } from 'vue'
import * as echarts from 'echarts/core' import * as echarts from 'echarts/core'
import { import {
...@@ -582,8 +582,20 @@ const orderChart3 = ref<HTMLDivElement | null>(null) ...@@ -582,8 +582,20 @@ const orderChart3 = ref<HTMLDivElement | null>(null)
// 图表实例数组 // 图表实例数组
const chartInstances: (echarts.ECharts | null)[] = [null, null, null] const chartInstances: (echarts.ECharts | null)[] = [null, null, null]
type ChartSeriesItem = {
name: string
data: (number | { value: number; count?: number })[]
color: string
}
type ChartConfig = {
title: string
legend: string[]
xAxisData: string[]
series: ChartSeriesItem[]
}
// 图表配置 // 图表配置
const chartConfig1 = ref({ const chartConfig1 = ref<ChartConfig>({
title: '订单趋势统计（单）', title: '订单趋势统计（单）',
legend: ['接单数', '生产数', '发货数'], legend: ['接单数', '生产数', '发货数'],
xAxisData: [''], xAxisData: [''],
...@@ -606,7 +618,7 @@ const chartConfig1 = ref({ ...@@ -606,7 +618,7 @@ const chartConfig1 = ref({
], ],
}) })
const chartConfig2 = ref({ const chartConfig2 = ref<ChartConfig>({
title: '订单发货效率', title: '订单发货效率',
legend: ['24H发货率', '48H发货率'], legend: ['24H发货率', '48H发货率'],
xAxisData: [''], xAxisData: [''],
...@@ -625,7 +637,7 @@ const chartConfig2 = ref({ ...@@ -625,7 +637,7 @@ const chartConfig2 = ref({
], ],
}) })
const chartConfig3 = ref({ const chartConfig3 = ref<ChartConfig>({
title: '订单生产效率', title: '订单生产效率',
legend: ['发货超时率'], legend: ['发货超时率'],
xAxisData: [''], xAxisData: [''],
...@@ -633,14 +645,41 @@ const chartConfig3 = ref({ ...@@ -633,14 +645,41 @@ const chartConfig3 = ref({
series: [ series: [
{ {
name: '发货超时率', name: '发货超时率',
data: [0], data: [{ value: 0, count: 0 }],
color: '#ff6845', color: '#ff6845',
}, },
], ],
}) })
const overtimeTooltipFormatter = (params: TooltipParam[]) =>
params
.map((item) => {
const dataObj =
item.data && typeof item.data === 'object'
? (item.data as { value: number | string; count?: number })
: null
const count =
dataObj && typeof dataObj.count === 'number' ? dataObj.count : null
const valueText = `${item.value}%`
return `${item.marker}${item.seriesName}: ${valueText}${
count !== null ? `（${count}单）` : ''
}`
})
.join('<br/>')
// 创建图表配置的函数 // 创建图表配置的函数
const createChartOption = (config: typeof chartConfig1) => { type TooltipParam = {
marker: string
seriesName: string
value: number | string
data?: unknown
}
const createChartOption = (
config: Ref<ChartConfig>,
isPercent = false,
customFormatter?: (params: TooltipParam[]) => string,
) => {
const data = config.value const data = config.value
return { return {
title: { title: {
...@@ -658,6 +697,17 @@ const createChartOption = (config: typeof chartConfig1) => { ...@@ -658,6 +697,17 @@ const createChartOption = (config: typeof chartConfig1) => {
backgroundColor: '#6a7985', backgroundColor: '#6a7985',
}, },
}, },
formatter:
customFormatter ??
((params: TooltipParam[]) =>
params
.map(
(item) =>
`${item.marker}${item.seriesName}: ${
isPercent ? `${item.value}%` : item.value
}`,
)
.join('<br/>')),
}, },
legend: { legend: {
data: data.legend, data: data.legend,
...@@ -690,6 +740,11 @@ const createChartOption = (config: typeof chartConfig1) => { ...@@ -690,6 +740,11 @@ const createChartOption = (config: typeof chartConfig1) => {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: isPercent
? {
formatter: '{value}%',
}
: undefined,
}, },
series: data.series.map((item) => ({ series: data.series.map((item) => ({
name: item.name, name: item.name,
...@@ -762,7 +817,7 @@ const getStatisticDataApi = async () => { ...@@ -762,7 +817,7 @@ const getStatisticDataApi = async () => {
.then((res) => { .then((res) => {
if (res.code === 200) { if (res.code === 200) {
updateShipmentTrendChart(res.data, 0) updateShipmentTrendChart(res.data, 0)
chartInstances[1]?.setOption(createChartOption(chartConfig2)) chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
} }
}) })
.catch((error) => { .catch((error) => {
...@@ -777,7 +832,9 @@ const getStatisticDataApi = async () => { ...@@ -777,7 +832,9 @@ const getStatisticDataApi = async () => {
.then((res) => { .then((res) => {
if (res.code === 200) { if (res.code === 200) {
updateOvertimeTrendChart(res.data, 0) updateOvertimeTrendChart(res.data, 0)
chartInstances[2]?.setOption(createChartOption(chartConfig3)) chartInstances[2]?.setOption(
createChartOption(chartConfig3, true, overtimeTooltipFormatter),
)
} }
}) })
.catch((error) => { .catch((error) => {
...@@ -795,12 +852,14 @@ onMounted(async () => { ...@@ -795,12 +852,14 @@ onMounted(async () => {
// 订单发货效率 // 订单发货效率
if (orderChart2.value) { if (orderChart2.value) {
chartInstances[1] = echarts.init(orderChart2.value) chartInstances[1] = echarts.init(orderChart2.value)
chartInstances[1]?.setOption(createChartOption(chartConfig2)) chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
} }
// 订单生产效率 // 订单生产效率
if (orderChart3.value) { if (orderChart3.value) {
chartInstances[2] = echarts.init(orderChart3.value) chartInstances[2] = echarts.init(orderChart3.value)
chartInstances[2]?.setOption(createChartOption(chartConfig3)) chartInstances[2]?.setOption(
createChartOption(chartConfig3, true, overtimeTooltipFormatter),
)
} }
// 请求成功后立即更新对应的图表 // 请求成功后立即更新对应的图表
getStatisticDataApi() getStatisticDataApi()
...@@ -819,10 +878,12 @@ const getchartTimes = async (v: string, type: string) => { ...@@ -819,10 +878,12 @@ const getchartTimes = async (v: string, type: string) => {
chartInstances[0]?.setOption(createChartOption(chartConfig1)) chartInstances[0]?.setOption(createChartOption(chartConfig1))
} else if (type == 'SHIPMENT_TREND') { } else if (type == 'SHIPMENT_TREND') {
updateShipmentTrendChart(data, v) updateShipmentTrendChart(data, v)
chartInstances[1]?.setOption(createChartOption(chartConfig2)) chartInstances[1]?.setOption(createChartOption(chartConfig2, true))
} else { } else {
updateOvertimeTrendChart(data, v) updateOvertimeTrendChart(data, v)
chartInstances[2]?.setOption(createChartOption(chartConfig3)) chartInstances[2]?.setOption(
createChartOption(chartConfig3, true, overtimeTooltipFormatter),
)
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -866,6 +927,7 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => { ...@@ -866,6 +927,7 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
const overtimeShipmentOrderNums = data.map( const overtimeShipmentOrderNums = data.map(
(el) => el.overtimeShipmentOrderNum, (el) => el.overtimeShipmentOrderNum,
) )
const overtimeShipmentRates = data.map((el) => el.overtimeShipmentRate)
const startTimes = data.map((el) => el.startTime) const startTimes = data.map((el) => el.startTime)
const timerange = data.map((el) => `${el.startTime}-${el.endTime}`) const timerange = data.map((el) => `${el.startTime}-${el.endTime}`)
...@@ -874,7 +936,12 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => { ...@@ -874,7 +936,12 @@ const updateOvertimeTrendChart = (data: trendType[], type: number | string) => {
} else { } else {
chartConfig3.value.xAxisData = timerange chartConfig3.value.xAxisData = timerange
} }
chartConfig3.value.series[0].data = overtimeShipmentOrderNums chartConfig3.value.series[0].data = overtimeShipmentRates.map(
(rate, idx) => ({
value: rate,
count: overtimeShipmentOrderNums[idx],
}),
)
} }
const handleResize = () => { const handleResize = () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment