timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix rest day style in chart

Browse Source
This commit is contained in:
Timi
2026-09-23 16:12:09 +08:00
parent 9f4a7d7b2d
commit f8574c387d
7 changed files with 80 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/component/OrderDailyChart.vue
+3 -3
View File
@@ -29,14 +29,14 @@ const props = defineProps<{
const dateTextList = computed(() => props.dateTextList);
const { restDaySet } = useRestDayCalendar(dateTextList);
function buildOption(visibleDateTextList: string[]): EChartsOption {
function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
const labelList = visibleDateTextList.map(item => item.slice(5));
return {
...buildAxisChartOption(labelList),
xAxis: {
type: "category",
data: labelList,
axisTick: { show: false },
axisTick: { show: true, length: 0, interval: 0 },
axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
},
yAxis: [
@@ -62,7 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
name: "订单数",
type: "bar",
yAxisIndex: 0,
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
},
src/pages/product/component/ProductFulfillmentTrendChart.vue
+3 -3
View File
@@ -29,14 +29,14 @@ const props = defineProps<{
const dateTextList = computed(() => props.dateTextList);
const { restDaySet } = useRestDayCalendar(dateTextList);
function buildOption(visibleDateTextList: string[]): EChartsOption {
function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
const labelList = visibleDateTextList.map(item => item.slice(5));
return {
...buildAxisChartOption(labelList),
xAxis: {
type: "category",
data: labelList,
axisTick: { show: false },
axisTick: { show: true, length: 0, interval: 0 },
axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
},
series: [
@@ -44,7 +44,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
name: "直接履约",
type: "bar",
stack: "fulfillment",
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
},
{
src/pages/product/component/ProductSalesTrendChart.vue
+3 -3
View File
@@ -29,14 +29,14 @@ const props = defineProps<{
const dateTextList = computed(() => props.dateTextList);
const { restDaySet } = useRestDayCalendar(dateTextList);
function buildOption(visibleDateTextList: string[]): EChartsOption {
function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
const labelList = visibleDateTextList.map(item => item.slice(5));
return {
...buildAxisChartOption(labelList),
xAxis: {
type: "category",
data: labelList,
axisTick: { show: false },
axisTick: { show: true, length: 0, interval: 0 },
axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
},
yAxis: [
@@ -62,7 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
type: "bar",
stack: "quantity",
yAxisIndex: 0,
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
},
{
src/pages/product/component/ProductStockMovementChart.vue
+3 -3
View File
@@ -29,7 +29,7 @@ const props = defineProps<{
const dateTextList = computed(() => props.dateTextList);
const { restDaySet } = useRestDayCalendar(dateTextList);
function buildOption(visibleDateTextList: string[]): EChartsOption {
function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
const labelList = visibleDateTextList.map(item => item.slice(5));
return {
...buildAxisChartOption(labelList),
@@ -37,7 +37,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
type: "category",
data: labelList,
axisLine: { onZero: true },
axisTick: { show: false },
axisTick: { show: true, length: 0, interval: 0 },
axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
},
series: [
@@ -45,7 +45,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
name: "入库",
type: "bar",
stack: "stock-movement",
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.inQuantity)))
},
{