@@ -10,11 +10,11 @@ const chartChart = ref(null); | |||||
const chart = ref(null); | const chart = ref(null); | ||||
// 小时数据 | // 小时数据 | ||||
const hourData = ref([ | const hourData = ref([ | ||||
// { lineName: '001', hour: '00:00', num: 10 }, | |||||
// { lineName: '002', hour: '00:20', num: 20 }, | |||||
// { lineName: '003', hour: '00:30', num: 30 }, | |||||
// { lineName: '004', hour: '00:40', num: 14 }, | |||||
// { lineName: '005', hour: '00:50', num: 50 } | |||||
// { lineName: "001", hour: "00:00", num: 10 }, | |||||
// { lineName: "002", hour: "00:20", num: 20 }, | |||||
// { lineName: "003", hour: "00:30", num: 30 }, | |||||
// { lineName: "004", hour: "00:40", num: 14 }, | |||||
// { lineName: "005", hour: "00:50", num: 50 }, | |||||
]); | ]); | ||||
store.$subscribe((mutation, state) => { | store.$subscribe((mutation, state) => { | ||||
// console.log("[HourChart] =======>", state.data2.lineHourList?.length); | // console.log("[HourChart] =======>", state.data2.lineHourList?.length); | ||||
@@ -50,7 +50,7 @@ function setupChart() { | |||||
chartSetup( | chartSetup( | ||||
chart.value, | chart.value, | ||||
hourData.value.map((item) => item.hour), | hourData.value.map((item) => item.hour), | ||||
hourData.value.map((item) => item.data) | |||||
hourData.value.map((item) => item.num) | |||||
); | ); | ||||
}); | }); | ||||
@@ -73,12 +73,17 @@ function setupChart() { | |||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add("h-full"); | chartChart.value.classList.add("h-full"); | ||||
// setupChart(); | |||||
}); | }); | ||||
</script> | </script> | ||||
<template> | <template> | ||||
<Container class="chart" title="小时数据" icon="cube"> | <Container class="chart" title="小时数据" icon="cube"> | ||||
<div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div> | |||||
<div | |||||
ref="chartChart" | |||||
class="chart-chart" | |||||
style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}" | |||||
></div> | |||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | <p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | ||||
暂无数据 | 暂无数据 | ||||
</p> | </p> | ||||
@@ -1,4 +1,5 @@ | |||||
export const options = { | export const options = { | ||||
color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"], | |||||
grid: { | grid: { | ||||
top: 10, | top: 10, | ||||
bottom: 0, | bottom: 0, | ||||
@@ -37,9 +38,12 @@ export const options = { | |||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fff8' | color: '#fff8' | ||||
}, | }, | ||||
minInterval: 1, | |||||
max: 100, | |||||
min: 1 | |||||
// minInterval: 1, | |||||
// max: 100, | |||||
// min: 1, | |||||
max: function(value) { | |||||
return value.max + Math.floor(value.max / 5) | |||||
} | |||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | { | ||||
@@ -48,6 +52,16 @@ export const options = { | |||||
type: "bar", | type: "bar", | ||||
// barWidth: 20, | // barWidth: 20, | ||||
showBackground: true, | showBackground: true, | ||||
label: { | |||||
show: true, | |||||
distance: 20, | |||||
rotate: 90, | |||||
color: '#fff', | |||||
fontSize: 16, | |||||
verticalAlign: "middle", | |||||
position: 'top', | |||||
formatter: "{c}" | |||||
}, | |||||
backgroundStyle: { | backgroundStyle: { | ||||
color: "rgba(180, 180, 180, 0.2)", | color: "rgba(180, 180, 180, 0.2)", | ||||
}, | }, | ||||
@@ -41,7 +41,7 @@ const options = { | |||||
axisLabel: { show: false }, | axisLabel: { show: false }, | ||||
axisTick: { show: false }, | axisTick: { show: false }, | ||||
splitLine: { show: false }, | splitLine: { show: false }, | ||||
data: ["废片", "阶段成品"], | |||||
data: ["阶段成品", "废片"], | |||||
axisLabel: { | axisLabel: { | ||||
fontSize: 24, | fontSize: 24, | ||||
color: "#fff", | color: "#fff", | ||||
@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) { | |||||
/** 有状态,处理数据 */ | /** 有状态,处理数据 */ | ||||
function __apply(yieldArray) { | function __apply(yieldArray) { | ||||
const d = loadData(yieldArray); | const d = loadData(yieldArray); | ||||
// const d = loadData([ | |||||
// { teamName: "A组", yield: 11 }, | |||||
// { teamName: "B组", yield: 23 }, | |||||
// { teamName: "C组", yield: 14 }, | |||||
// ]); | |||||
if (!d) { | if (!d) { | ||||
showChartDom.value = false; | showChartDom.value = false; | ||||
if (chart.value) chart.value.dispose(); | if (chart.value) chart.value.dispose(); | ||||
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => { | |||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add("h-full"); | chartChart.value.classList.add("h-full"); | ||||
// __apply(); | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -16,6 +16,14 @@ const store = useWsStore(); | |||||
onMounted(() => { | onMounted(() => { | ||||
chartContainer.value.classList.add("h-full"); | chartContainer.value.classList.add("h-full"); | ||||
const d = loadData(store.data2.monthlyTarget); | const d = loadData(store.data2.monthlyTarget); | ||||
// const d = loadData([ | |||||
// { | |||||
// targetProduction: 100, | |||||
// nowProduction: 66, | |||||
// targetYield: 13, | |||||
// nowYield: 3, | |||||
// }, | |||||
// ]); | |||||
if (!d) { | if (!d) { | ||||
show.value = false; | show.value = false; | ||||
if (chartInstance.value) { | if (chartInstance.value) { | ||||
@@ -1,4 +1,5 @@ | |||||
export const options = { | export const options = { | ||||
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"], | |||||
grid: { | grid: { | ||||
top: 0, | top: 0, | ||||
left: 0, | left: 0, | ||||
@@ -9,7 +9,16 @@ const store = useWsStore(); | |||||
const chartChart = ref(null); | const chartChart = ref(null); | ||||
const chart = ref(null); | const chart = ref(null); | ||||
// 小时数据 | // 小时数据 | ||||
const hourData = ref([]); | |||||
const hourData = ref([ | |||||
// { hour: "0:1", data: 10 }, | |||||
// { hour: "0:2", data: 13 }, | |||||
// { hour: "0:3", data: 20 }, | |||||
// { hour: "0:4", data: 12 }, | |||||
// { hour: "0:5", data: 12 }, | |||||
// { hour: "0:6", data: 11 }, | |||||
// { hour: "0:7", data: 10 }, | |||||
// { hour: "0:8", data: 1 }, | |||||
]); | |||||
store.$subscribe((mutation, state) => { | store.$subscribe((mutation, state) => { | ||||
if ( | if ( | ||||
state.data2.lineHourList == undefined || | state.data2.lineHourList == undefined || | ||||
@@ -41,6 +50,7 @@ function setupChart() { | |||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add("h-full"); | chartChart.value.classList.add("h-full"); | ||||
// setupChart(); | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -1,4 +1,5 @@ | |||||
export const options = { | export const options = { | ||||
color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"], | |||||
grid: { | grid: { | ||||
top: 10, | top: 10, | ||||
bottom: 0, | bottom: 0, | ||||
@@ -11,7 +12,7 @@ export const options = { | |||||
data: [], | data: [], | ||||
axisLabel: { | axisLabel: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fff8' | |||||
color: "#fff8", | |||||
}, | }, | ||||
axisLine: { | axisLine: { | ||||
show: true, | show: true, | ||||
@@ -30,16 +31,19 @@ export const options = { | |||||
}, | }, | ||||
splitLine: { | splitLine: { | ||||
lineStyle: { | lineStyle: { | ||||
color: '#e6e6e633' | |||||
} | |||||
color: "#e6e6e633", | |||||
}, | |||||
}, | }, | ||||
axisLabel: { | axisLabel: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fff8' | |||||
color: "#fff8", | |||||
}, | }, | ||||
minInterval: 1, | minInterval: 1, | ||||
max: 100, | |||||
min: 1 | |||||
// max: 100, | |||||
// min: 1 | |||||
max: function(value) { | |||||
return value.max + Math.floor(value.max / 4) | |||||
} | |||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | { | ||||
@@ -48,6 +52,16 @@ export const options = { | |||||
type: "bar", | type: "bar", | ||||
// barWidth: 20, | // barWidth: 20, | ||||
showBackground: true, | showBackground: true, | ||||
label: { | |||||
show: true, | |||||
distance: 20, | |||||
rotate: 90, | |||||
color: '#fff', | |||||
fontSize: 16, | |||||
verticalAlign: "middle", | |||||
position: 'top', | |||||
formatter: "{c}" | |||||
}, | |||||
backgroundStyle: { | backgroundStyle: { | ||||
color: "rgba(180, 180, 180, 0.2)", | color: "rgba(180, 180, 180, 0.2)", | ||||
}, | }, | ||||
@@ -42,7 +42,50 @@ export const options = { | |||||
}, | }, | ||||
minInterval: 1, | minInterval: 1, | ||||
}, | }, | ||||
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }], | |||||
series: [ | |||||
{ | |||||
type: "bar", | |||||
label: { | |||||
show: true, | |||||
distance: 20, | |||||
rotate: 90, | |||||
color: "#fff", | |||||
verticalAlign: "middle", | |||||
position: 'top', | |||||
formatter: (params) => { | |||||
return params.data[1]; | |||||
}, | |||||
}, | |||||
}, | |||||
{ | |||||
type: "bar", | |||||
label: { | |||||
show: true, | |||||
distance: 20, | |||||
rotate: 90, | |||||
color: "#fff", | |||||
verticalAlign: "middle", | |||||
position: 'top', | |||||
formatter: (params) => { | |||||
return params.data[2]; | |||||
}, | |||||
}, | |||||
}, | |||||
{ | |||||
type: "bar", | |||||
label: { | |||||
show: true, | |||||
distance: 20, | |||||
rotate: 90, | |||||
color: "#fff", | |||||
verticalAlign: "middle", | |||||
position: 'top', | |||||
formatter: (params) => { | |||||
return params.data[3]; | |||||
}, | |||||
}, | |||||
}, | |||||
], | |||||
}; | }; | ||||
export default function setup( | export default function setup( | ||||
@@ -10,9 +10,6 @@ const chartContainer = ref(null); | |||||
const chartInstance = ref(null); | const chartInstance = ref(null); | ||||
const store = useWsStore(); | const store = useWsStore(); | ||||
// 绿色:24FF5E | |||||
// 黄色:FFB524 | |||||
// 红色:FF3737 | |||||
onMounted(() => { | onMounted(() => { | ||||
chartContainer.value.classList.add("h-full"); | chartContainer.value.classList.add("h-full"); | ||||
const d = loadData(store.data2.monthlyTarget); | const d = loadData(store.data2.monthlyTarget); | ||||
@@ -1,4 +1,5 @@ | |||||
export const options = { | export const options = { | ||||
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"], | |||||
grid: { | grid: { | ||||
top: 0, | top: 0, | ||||
left: 0, | left: 0, | ||||
@@ -13,7 +14,7 @@ export const options = { | |||||
top: "70%", | top: "70%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fffa' | |||||
color: '#fffd' | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -23,7 +24,7 @@ export const options = { | |||||
top: "85%", | top: "85%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fffa' | |||||
color: '#fffd' | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -33,7 +34,7 @@ export const options = { | |||||
top: "70%", | top: "70%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fffa' | |||||
color: '#fffd' | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -43,7 +44,7 @@ export const options = { | |||||
top: "85%", | top: "85%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: '#fffa' | |||||
color: '#fffd' | |||||
}, | }, | ||||
}, | }, | ||||
], | ], | ||||
@@ -10,9 +10,6 @@ const chartContainer = ref(null); | |||||
const chartInstance = ref(null); | const chartInstance = ref(null); | ||||
const store = useWsStore(); | const store = useWsStore(); | ||||
// 绿色:24FF5E | |||||
// 黄色:FFB524 | |||||
// 红色:FF3737 | |||||
onMounted(() => { | onMounted(() => { | ||||
chartContainer.value.classList.add("h-full"); | chartContainer.value.classList.add("h-full"); | ||||
const d = loadData(store.data2.dailyTarget); | const d = loadData(store.data2.dailyTarget); | ||||
@@ -1,4 +1,5 @@ | |||||
export const options = { | export const options = { | ||||
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"], | |||||
grid: { | grid: { | ||||
top: 0, | top: 0, | ||||
left: 0, | left: 0, | ||||
@@ -13,7 +14,7 @@ export const options = { | |||||
top: "70%", | top: "70%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: "#fffa", | |||||
color: "#fffd", | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -23,7 +24,7 @@ export const options = { | |||||
top: "85%", | top: "85%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: "#fffa", | |||||
color: "#fffd", | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -33,7 +34,7 @@ export const options = { | |||||
top: "70%", | top: "70%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: "#fffa", | |||||
color: "#fffd", | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
@@ -43,7 +44,7 @@ export const options = { | |||||
top: "85%", | top: "85%", | ||||
textStyle: { | textStyle: { | ||||
fontSize: 16, | fontSize: 16, | ||||
color: "#fffa", | |||||
color: "#fffd", | |||||
}, | }, | ||||
}, | }, | ||||
], | ], | ||||
@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) { | |||||
/** 有状态,处理数据 */ | /** 有状态,处理数据 */ | ||||
function __apply(yieldArray) { | function __apply(yieldArray) { | ||||
const d = loadData(yieldArray); | const d = loadData(yieldArray); | ||||
// const d = loadData([ | |||||
// { teamName: "A组", yield: 11 }, | |||||
// { teamName: "B组", yield: 23 }, | |||||
// { teamName: "C组", yield: 14 }, | |||||
// ]); | |||||
if (!d) { | if (!d) { | ||||
showChartDom.value = false; | showChartDom.value = false; | ||||
if (chart.value) chart.value.dispose(); | if (chart.value) chart.value.dispose(); | ||||
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => { | |||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add("h-full"); | chartChart.value.classList.add("h-full"); | ||||
// __apply(); | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) { | |||||
/** 有状态,处理数据 */ | /** 有状态,处理数据 */ | ||||
function __apply(yieldArray) { | function __apply(yieldArray) { | ||||
const d = loadData(yieldArray); | const d = loadData(yieldArray); | ||||
// const d = loadData([ | |||||
// { teamName: "A组", yield: 11 }, | |||||
// { teamName: "B组", yield: 23 }, | |||||
// { teamName: "C组", yield: 14 }, | |||||
// ]); | |||||
if (!d) { | if (!d) { | ||||
showChartDom.value = false; | showChartDom.value = false; | ||||
if (chart.value) chart.value.dispose(); | if (chart.value) chart.value.dispose(); | ||||
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => { | |||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add("h-full"); | chartChart.value.classList.add("h-full"); | ||||
// __apply(); | |||||
}); | }); | ||||
</script> | </script> | ||||