update chart settings
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
förälder
eac23b3408
incheckning
b48f3a713c
@ -1,39 +1,47 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import Container from './Base/Container.vue';
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
import chartSetup from "./HourChartOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
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(() => {
|
||||
chartChart.value.classList.add('h-full');
|
||||
const mc = echarts.init(chartChart.value);
|
||||
mc.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],
|
||||
},
|
||||
],
|
||||
});
|
||||
chartChart.value.classList.add("h-full");
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
chart.value.setOption({});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import Container from './Base/Container.vue';
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
import chartSetup from "./HourChartOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
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(() => {
|
||||
chartChart.value.classList.add('h-full');
|
||||
const mc = echarts.init(chartChart.value);
|
||||
mc.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],
|
||||
},
|
||||
],
|
||||
});
|
||||
chartChart.value.classList.add("h-full");
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
chart.value.setOption({});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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);
|
||||
}
|
||||
Laddar…
Referens i nytt ärende
Block a user