update chart settings
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
eac23b3408
commit
b48f3a713c
@ -1,39 +1,47 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } 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 chartSetup from "./HourChartOptions";
|
||||||
|
|
||||||
|
const store = useWsStore();
|
||||||
const chartChart = ref(null);
|
const chartChart = ref(null);
|
||||||
|
const chart = ref(null);
|
||||||
|
|
||||||
|
// 小时数据
|
||||||
|
const hourData = ref(null);
|
||||||
|
store.$subscribe((mutation, state) => {
|
||||||
|
console.log("lineHourList ===> ", state.data2.lineHourList);
|
||||||
|
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
|
||||||
|
id: `${item.lineName}_${index}`,
|
||||||
|
hour: item.hour || `${index}`.padStart(2, "0"),
|
||||||
|
data: item.num || Math.random() * 100,
|
||||||
|
}));
|
||||||
|
chartSetup(
|
||||||
|
chart.value,
|
||||||
|
hourData.value.map((item) => item.hour),
|
||||||
|
hourData.value.map((item) => item.data)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartChart.value.classList.add('h-full');
|
chartChart.value.classList.add("h-full");
|
||||||
const mc = echarts.init(chartChart.value);
|
chart.value = echarts.init(chartChart.value);
|
||||||
mc.setOption({
|
chart.value.setOption({});
|
||||||
grid: {
|
|
||||||
top: 24,
|
|
||||||
bottom: 24,
|
|
||||||
left: 24,
|
|
||||||
right: 24,
|
|
||||||
},
|
|
||||||
tooltip: {},
|
|
||||||
xAxis: {
|
|
||||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
|
||||||
},
|
|
||||||
yAxis: {},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '销量',
|
|
||||||
type: 'bar',
|
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="本日班组情况" icon="cube">
|
<Container class="chart" title="本日班组情况" icon="cube">
|
||||||
<div ref="chartChart" class="chart-chart"></div>
|
<div
|
||||||
|
v-show="hourData && hourData.length > 0"
|
||||||
|
ref="chartChart"
|
||||||
|
class="chart-chart"
|
||||||
|
></div>
|
||||||
|
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
56
src/components/TeamChartDayOptions.js
Normal file
56
src/components/TeamChartDayOptions.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
export const options = {
|
||||||
|
grid: {
|
||||||
|
top: "10%",
|
||||||
|
bottom: "5%",
|
||||||
|
left: "3%",
|
||||||
|
right: "5%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 22,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["A组", "B组", "C组"],
|
||||||
|
inverse: true,
|
||||||
|
animationDuration: 300,
|
||||||
|
animationDurationUpdate: 300,
|
||||||
|
max: 2, // only the largest 3 bars will be displayed
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 22,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
realtimeSort: true,
|
||||||
|
name: "X",
|
||||||
|
type: "bar",
|
||||||
|
data: [10, 20, 30],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: "{c}%",
|
||||||
|
color: "rgba(255, 255, 255, 1)",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 22,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
animationDuration: 0,
|
||||||
|
animationDurationUpdate: 3000,
|
||||||
|
animationEasing: "linear",
|
||||||
|
animationEasingUpdate: "linear",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function setup(echartInstance, dataArr) {
|
||||||
|
const new_options = { ...options };
|
||||||
|
new_options.series[0].data = dataArr;
|
||||||
|
echartInstance.setOption(new_options);
|
||||||
|
}
|
||||||
@ -1,39 +1,47 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } 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 chartSetup from "./HourChartOptions";
|
||||||
|
|
||||||
|
const store = useWsStore();
|
||||||
const chartChart = ref(null);
|
const chartChart = ref(null);
|
||||||
|
const chart = ref(null);
|
||||||
|
|
||||||
|
// 小时数据
|
||||||
|
const hourData = ref(null);
|
||||||
|
store.$subscribe((mutation, state) => {
|
||||||
|
console.log("lineHourList ===> ", state.data2.lineHourList);
|
||||||
|
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
|
||||||
|
id: `${item.lineName}_${index}`,
|
||||||
|
hour: item.hour || `${index}`.padStart(2, "0"),
|
||||||
|
data: item.num || Math.random() * 100,
|
||||||
|
}));
|
||||||
|
chartSetup(
|
||||||
|
chart.value,
|
||||||
|
hourData.value.map((item) => item.hour),
|
||||||
|
hourData.value.map((item) => item.data)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartChart.value.classList.add('h-full');
|
chartChart.value.classList.add("h-full");
|
||||||
const mc = echarts.init(chartChart.value);
|
chart.value = echarts.init(chartChart.value);
|
||||||
mc.setOption({
|
chart.value.setOption({});
|
||||||
grid: {
|
|
||||||
top: 24,
|
|
||||||
bottom: 24,
|
|
||||||
left: 24,
|
|
||||||
right: 24,
|
|
||||||
},
|
|
||||||
tooltip: {},
|
|
||||||
xAxis: {
|
|
||||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
|
||||||
},
|
|
||||||
yAxis: {},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '销量',
|
|
||||||
type: 'bar',
|
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="本月班组情况" icon="cube">
|
<Container class="chart" title="本月班组情况" icon="cube">
|
||||||
<div ref="chartChart" class="chart-chart"></div>
|
<div
|
||||||
|
v-show="hourData && hourData.length > 0"
|
||||||
|
ref="chartChart"
|
||||||
|
class="chart-chart"
|
||||||
|
></div>
|
||||||
|
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
169
src/components/TeamChartMonthOptions.js
Normal file
169
src/components/TeamChartMonthOptions.js
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
export const options = {
|
||||||
|
grid: {
|
||||||
|
top: "10%",
|
||||||
|
bottom: "10%",
|
||||||
|
},
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "当前产量：" + 100 + " 片",
|
||||||
|
left: "27%",
|
||||||
|
textAlign: "center",
|
||||||
|
top: "67%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "目标产量：" + 100 + " 片",
|
||||||
|
left: "27%",
|
||||||
|
textAlign: "center",
|
||||||
|
top: "82%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "当前成品率：" + 22 + "%",
|
||||||
|
left: "73%",
|
||||||
|
textAlign: "center",
|
||||||
|
top: "67%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "目标成品率：" + 22 + "%",
|
||||||
|
left: "73%",
|
||||||
|
textAlign: "center",
|
||||||
|
top: "82%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
startAngle: 90,
|
||||||
|
center: ["27%", "35%"],
|
||||||
|
endAngle: -270,
|
||||||
|
radius: "55%",
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 12,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontSize: 12,
|
||||||
|
offsetCenter: [0, "0%"],
|
||||||
|
formatter: "{value}%",
|
||||||
|
color: "rgba(255, 255, 255, 1)",
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
// value: (nowProduction / targetProduction * 100).toFixed(1),
|
||||||
|
value: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
startAngle: 90,
|
||||||
|
center: ["73%", "35%"],
|
||||||
|
endAngle: -270,
|
||||||
|
radius: "55%",
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 12,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: true,
|
||||||
|
valueAnimation: true,
|
||||||
|
fontSize: 12,
|
||||||
|
offsetCenter: [0, "0%"],
|
||||||
|
formatter: 0 + "%",
|
||||||
|
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
|
||||||
|
color: "rgba(255, 255, 255, 1)",
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
// value: targetYield,
|
||||||
|
value: 100,
|
||||||
|
name: "Perfect",
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
valueAnimation: true,
|
||||||
|
offsetCenter: ["0%", "-20%"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
// value: nowYield,
|
||||||
|
name: "Good",
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
valueAnimation: true,
|
||||||
|
offsetCenter: ["0%", "10%"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
detail: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export default function setup(echartInstance, data) {
|
||||||
|
const new_options = { ...options };
|
||||||
|
new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
|
||||||
|
new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
|
||||||
|
new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
|
||||||
|
new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
|
||||||
|
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
|
||||||
|
new_options.series[1].data[0].value = data.targetYield
|
||||||
|
new_options.series[1].data[1].value = data.nowYield
|
||||||
|
echartInstance.setOption(new_options);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user