export const options = { 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 / data.targetProduction * 100).toFixed(1) // 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 / data.targetYield * 100).toFixed(2) + '%', echartInstance.setOption(new_options); }