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