@@ -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); | |||
@@ -29,11 +29,11 @@ store.$subscribe((mutation, state) => { | |||
} | |||
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? [ | |||
{ 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 }, | |||
]).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
@@ -90,8 +90,6 @@ onMounted(() => { | |||
height: 300px; | |||
} | |||
.chart-inner {} | |||
.chart-chart { | |||
height: 100%; | |||
} | |||
@@ -1,5 +1,5 @@ | |||
<script setup> | |||
import { ref, onMounted } from "vue"; | |||
import { ref, onMounted, nextTick } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
@@ -9,7 +9,7 @@ const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
const dayData = ref([10,12,13]); | |||
const dayData = ref([]); | |||
store.$subscribe((mutation, state) => { | |||
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield); | |||
if ( | |||
@@ -21,11 +21,7 @@ store.$subscribe((mutation, state) => { | |||
if (chart.value) chart.value.dispose(); | |||
return; | |||
} | |||
classTodayProductYield = [ | |||
{yieldName: 'A', yield: 10}, | |||
{yieldName: 'C', yield: 20}, | |||
{yieldName: 'B', yield: 20}, | |||
] | |||
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) { | |||
if (state.data2.classTodayProductYield[i].teamName == "A组") { | |||
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield); | |||
@@ -39,6 +35,12 @@ store.$subscribe((mutation, state) => { | |||
setupChart(); | |||
}); | |||
// onMounted(() => { | |||
// nextTick(() => { | |||
// setupChart(); | |||
// }) | |||
// }) | |||
function setupChart() { | |||
if (chart.value) chart.value.dispose(); | |||
nextTick(() => { | |||
@@ -66,8 +68,6 @@ onMounted(() => { | |||
height: 300px; | |||
} | |||
.chart-inner {} | |||
.chart-chart { | |||
height: 100%; | |||
} | |||
@@ -1,16 +1,22 @@ | |||
export const options = { | |||
color: ['#ffd601', '#72340b'], | |||
grid: { | |||
top: 10, | |||
bottom: 0, | |||
left: 12, | |||
right: 10, | |||
left: 0, | |||
right: 28, | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
max: 100, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#fff2", | |||
}, | |||
}, | |||
axisLabel: { | |||
fontSize: 22, | |||
color: "#e5e5e533", | |||
fontSize: 16, | |||
color: "#e5e5e5a3", | |||
}, | |||
}, | |||
yAxis: { | |||
@@ -21,28 +27,28 @@ export const options = { | |||
animationDurationUpdate: 300, | |||
max: 2, // only the largest 3 bars will be displayed | |||
axisLabel: { | |||
fontSize: 22, | |||
color: "#e5e5e533", | |||
fontSize: 16, | |||
color: "#e5e5e5a3", | |||
}, | |||
splitLine: { | |||
show: false, | |||
color: "#e5e5e533", | |||
lineStyle: { | |||
color: "#e5e5e5", | |||
}, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
realtimeSort: true, | |||
name: "X", | |||
type: "bar", | |||
data: [10, 20, 30], | |||
// data: [10, 20, 30], | |||
data: [], | |||
label: { | |||
show: true, | |||
position: "right", | |||
valueAnimation: true, | |||
formatter: "{c}%", | |||
color: "#fff8", | |||
fontWeight: "bold", | |||
fontSize: 22, | |||
color: "#fff", | |||
fontSize: 16, | |||
}, | |||
}, | |||
], | |||
@@ -56,7 +62,6 @@ export const options = { | |||
}; | |||
export default function setup(echartInstance, dataArr) { | |||
debugger; | |||
const new_options = { ...options }; | |||
new_options.series[0].data = dataArr; | |||
echartInstance.setOption(new_options); | |||