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