193 lines
4.2 KiB
JavaScript
193 lines
4.2 KiB
JavaScript
export const options = {
|
|
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
title: [
|
|
{
|
|
text: "当前产量：" + 118 + " 片",
|
|
left: "27%",
|
|
textAlign: "center",
|
|
top: "70%",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fffa",
|
|
},
|
|
},
|
|
{
|
|
text: "目标产量：" + 213 + " 片",
|
|
left: "27%",
|
|
textAlign: "center",
|
|
top: "85%",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fffa",
|
|
},
|
|
},
|
|
{
|
|
text: "当前成品率：" + 78 + "%",
|
|
left: "72%",
|
|
textAlign: "center",
|
|
top: "70%",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fffa",
|
|
},
|
|
},
|
|
{
|
|
text: "目标成品率：" + 90 + "%",
|
|
left: "72%",
|
|
textAlign: "center",
|
|
top: "85%",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "#fffa",
|
|
},
|
|
},
|
|
],
|
|
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: 16,
|
|
offsetCenter: [0, "0%"],
|
|
formatter: "{value}%",
|
|
color: "rgba(255, 255, 255, 1)",
|
|
},
|
|
data: [
|
|
{
|
|
// value: (nowProduction / targetProduction * 100).toFixed(1),
|
|
value: 89.78,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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: 16,
|
|
offsetCenter: [0, "0%"],
|
|
// formatter: 0 + "%",
|
|
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
|
|
color: "#fff",
|
|
},
|
|
data: [
|
|
{
|
|
// value: targetYield,
|
|
value: 78,
|
|
name: "Perfect",
|
|
title: {
|
|
show: false,
|
|
},
|
|
detail: {
|
|
show: false,
|
|
valueAnimation: true,
|
|
offsetCenter: ["0%", "-20%"],
|
|
},
|
|
},
|
|
{
|
|
value: 90,
|
|
name: "Good",
|
|
title: {
|
|
show: false,
|
|
},
|
|
detail: {
|
|
show: false,
|
|
valueAnimation: true,
|
|
offsetCenter: ["0%", "10%"],
|
|
formatter: "99.23%",
|
|
},
|
|
},
|
|
{
|
|
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 != null &&
|
|
data.targetProduction != null &&
|
|
data.targetProduction != 0
|
|
? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
|
|
: 0;
|
|
new_options.series[1].data[0].value = data.targetYield;
|
|
new_options.series[1].data[1].value = data.nowYield;
|
|
new_options.series[1].detail.formatter =
|
|
data.nowYield != null && data.targetYield != null && data.targetYield != 0
|
|
? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
|
|
: "0%";
|
|
echartInstance.setOption(new_options);
|
|
}
|
|
|
|
// {
|
|
// "targetProduction": 99,
|
|
// "nowProduction": 58,
|
|
// "targetYield": 12,
|
|
// "nowYield": 9
|
|
// }
|