renren/spc
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新

Browse Source
This commit is contained in:
朱文强
2022-12-13 16:41:37 +08:00
parent c0a5dbac2d
commit f6b3f2f323
60 changed files with 6404 additions and 742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

618
src/views/process-inspection/charts/echart-2line.vue Normal file
View File

@@ -0,0 +1,618 @@
<template>
<div class="mod-demo-echarts">
<div :id="chartLineName" class="chart-box"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
props: {
title: {
type: String,
},
chartLineName: {
type:String,
default: 'echartLine',
},
mrGraphEntity: {
type: Object,
default: () => {
return {};
},
},
processCapability: {
type: Object,
default: () => {
return {};
},
},
rcl: {
type: Object,
default: () => {
return {};
},
},
sl: {
type: Object,
default: () => {
return {};
},
},
xbarCL: {
type: Object,
default: () => {
return {};
},
},
yName1: {
type: String,
},
yName2: {
type: String,
},
lineIndex: {
type: Number,
default: 0
}
},
data() {
return {
ruleList: [
"违反规则一：控制图上有 1 个点位于三倍标准差以外",
"违反规则二：连续 9 点落在中心线的用一侧",
"违反规则三：连续 6 点递增或者递减",
"违反规则四：连续 14 点中 相邻点 交替上下",
"违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
"违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
"违反规则七：连续 15 点 落在中心线两侧的C区内",
"违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
"违反规则九：有 1 点落在规格线以外",
"违反规则十：CPK小于目标值",
],
upLine:[{name:'xbar',
rules:'xbarUnsatisfiedRules'},{name:'xbar',
rules:'xbarUnsatisfiedRules'},{name:'x',
rules:'xUnsatisfiedRules'}],
lowLine:[{name:'r',
rules:'rUnsatisfiedRules'},{name:'s',
rules:'sUnsatisfiedRules'},{name:'rs',
rules:'rsUnsatisfiedRules'}]
//testdata
};
},
mounted() {},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine1) {
this.chartLine1.resize();
}
},
methods: {
// 折线图
initChartLine() {
const rclUcl = this.rcl.ucl;
var option = {
title: {
text: this.title,
},
tooltip: {
// 悬浮提示框
trigger: "axis",
boundaryGap: false,
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: (e) => {
let alarmInfo = ''
e[0].data.sRule.forEach(item=>{
alarmInfo += this.ruleList[item - 1]+'<br/>'
})
return `
点位坐标: ${e[0].data.position}<br/>
${e[0].marker} 数值: ${e[0].data.value}<br/>
${e[0].marker} 规格: ${e[0].data.sl}<br/>
${e[0].marker} 异常信息:<br/> ${alarmInfo || "无"}
`;
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
color: ["#f8f106", "#fe7576", "#a9b0d3", "#476fd4"],
//多个图，就有多个grid,排序默认0、1、2....
grid: [
//0降雨
{ x: "7%", y: "7%", height: "40%", left: "10%" },
//1水位流量
{ x: "7%", y2: "7%", height: "35%", left: "10%", bottom: "15%" },
],
legend: {
data: [this.yName1, this.yName2],
},
xAxis: [
{
show: false, //隐藏了x轴
type: "category",
gridIndex: 0, //对应前面grid的索引位置（第一个）
axisTick: {
alignWithLabel: true,
},
axisLabel: {
//interval:showNum, //x轴显示的数量，我这里是动态算的
},
},
{
type: "category",
gridIndex: 1, //对应前面grid的索引位置（第二个）
axisTick: {
alignWithLabel: true,
},
axisLabel: {
//interval:showNum,
},
},
],
yAxis: [
{
type: "value",
gridIndex: 1,
nameLocation: "middle",
name: this.yName2,
max: function(value) {
if (rclUcl > value.max + 1) {
return rclUcl + 0.5;
} else {
return value.max + 1;
}
},
splitLine: { show: false },
nameTextStyle: {
padding: 25,
},
position: "left",
axisLine: {
show: true,
lineStyle: {
//color: colors[2]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
gridIndex: 0,
name: this.yName1,
min: function(value) {
return value.min - 1;
},
max: function(value) {
return value.max + 1;
},
splitLine: { show: false },
nameTextStyle: {
padding: 25,
},
nameLocation: "middle",
position: "left",
//nameLocation: 'start',//y轴name的位置
//inverse: true,
axisLine: {
show: true,
lineStyle: {
//color: colors[1]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
textStyle: {
fontSize: 12, //y轴坐标轴上的字体大小
},
},
},
],
visualMap: [
{
// 折线颜色修改
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [],
inRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
outOfRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
},
{
// 折线颜色修改
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 1,
pieces: [],
inRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
outOfRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
},
],
dataZoom: [
// 轴放大
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
{
type: "inside",
xAxisIndex: [0, 1],
start: 0,
end: 100,
},
{
show: true,
yAxisIndex: 0,
realtime: true,
left: 6,
start: 0,
end: 100,
},
{
show: true,
yAxisIndex: 1,
realtime: true,
left: 6,
start: 0,
end: 100,
},
],
series: [
{
name: this.yName1,
xAxisIndex: 0,
yAxisIndex: 1,
type: "line",
smooth: true,
symbol: "emptyDiamond", // 设定为实心点
symbolSize: 10,
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 1,
},
markLine: {
// 最大值最小值均值线
symbol: "none",
label: {
normal: {
show: true,
position: "end",
formatter: "{name|{b}}--{c}",
rich: {
name: {
color: "blue",
fontSize: 16,
fontWeight: 400,
},
},
textStyle: {
color: "black", //标注线终点文字颜色
fontSize: 14,
fontWeight: 400,
},
},
},
data: [
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "ucl",
yAxis: this.xbarCL.ucl,
},
{
lineStyle: {
color: "#990000",
type: [5, 10],
width: 3,
dashOffset: 5,
},
name: "cl",
yAxis: this.xbarCL.cl,
},
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "lcl",
yAxis: this.xbarCL.lcl,
},
{
lineStyle: {
color: "#009900",
type: "solid",
width: 3,
},
name: "usl",
yAxis: this.sl.usl,
},
{
lineStyle: {
color: "#009900",
type: "solid",
width: 3,
},
name: "sl",
yAxis: this.sl.sl,
},
{
lineStyle: {
color: "#009900",
width: 3,
type: "solid",
},
name: "lsl",
yAxis: this.sl.lsl,
},
],
},
markPoint: {
// 标记
data: [],
symbolSize: 50, // 标记的大小
label: {
// 标记单位
fontSize: 10,
formatter: "{c}", // 单位
},
},
markArea: {
// 以y轴分割的区域
silent: false,
data: [
[
{
name: "",
itemStyle: {
color: "#fb512c",
opacity: 0.5,
},
yAxis: this.xbarCL.la[0],
},
{
yAxis: this.xbarCL.la[1],
},
],
[
{
name: "",
itemStyle: {
color: "#ffcc33",
opacity: 0.5,
},
yAxis: this.xbarCL.lb[0],
},
{
yAxis: this.xbarCL.lb[1],
},
],
[
{
name: "",
itemStyle: {
color: "#52b854",
opacity: 0.5,
},
yAxis: this.xbarCL.lc[0],
},
{
yAxis: this.xbarCL.uc[1],
},
],
[
{
name: "",
itemStyle: {
color: "#ffcc33",
opacity: 0.5,
},
yAxis: this.xbarCL.ub[0],
},
{
yAxis: this.xbarCL.ub[1],
},
],
[
{
name: "",
itemStyle: {
color: "#fb512c",
opacity: 0.5,
},
yAxis: this.xbarCL.ua[0],
},
{
yAxis: this.xbarCL.ua[1],
},
],
],
},
// areaStyle: {},
data: this.mrGraphEntity.list?.map((item) => {
const obj = {
position: item.position,
value: item[this.upLine[this.lineIndex].name],
sRule: item[this.upLine[this.lineIndex].rules],
sl:`ucl-${this.xbarCL.ucl.toFixed(2)} cl-${this.xbarCL.cl.toFixed(2)} lcl-${this.xbarCL.lcl.toFixed(2)} `
};
return obj;
}),
},
{
name: this.yName2,
type: "line",
xAxisIndex: 1,
yAxisIndex: 0,
type: "line",
smooth: true,
symbol: "emptyDiamond", // 设定为实心点
symbolSize: 10,
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 1,
},
markLine: {
// 最大值最小值均值线
symbol: "none",
label: {
normal: {
show: true,
position: "end",
formatter: "{name|{b}}--{c}",
rich: {
name: {
color: "blue",
fontSize: 16,
fontWeight: 400,
},
},
textStyle: {
color: "black", //标注线终点文字颜色
fontSize: 14,
fontWeight: 400,
},
},
},
data: [
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "ucl",
yAxis: this.rcl.ucl,
},
{
lineStyle: {
color: "#990000",
width: 3,
type: [5, 10],
dashOffset: 5,
},
name: "cl",
yAxis: this.rcl.cl,
},
{
lineStyle: {
color: "#990000",
width: 3,
type: "solid",
},
name: "lcl",
yAxis: this.rcl.lcl,
},
],
},
markPoint: {
// 标记
data: [],
symbolSize: 50, // 标记的大小
label: {
// 标记单位
fontSize: 10,
formatter: "{c}", // 单位
},
},
// areaStyle: {},
data: this.mrGraphEntity.list?.map((item) => {
const obj = {
position: item.position,
value: item[this.lowLine[this.lineIndex].name],
sRule: item[this.lowLine[this.lineIndex].rules],
sl:`ucl-${this.rcl.ucl.toFixed(2)} cl-${this.rcl.cl.toFixed(2)} lcl-${this.rcl.lcl.toFixed(2)} `
};
return obj;
}),
},
],
};
this.mrGraphEntity.list?.forEach((item, index) => {
if (item[this.lowLine[this.lineIndex].rules].length) {
option.visualMap[1].pieces.push({
gte: index,
lt: index + 1,
color: "red",
});
option.series[1].markPoint.data.push({
value: item[this.lowLine[this.lineIndex].name],
coord: [index, item[this.lowLine[this.lineIndex].name]],
});
}
});
this.mrGraphEntity.list?.forEach((item, index) => {
if (item[this.upLine[this.lineIndex].rules].length) {
option.visualMap[0].pieces.push({
gte: index,
lt: index + 1,
color: "red",
});
option.series[0].markPoint.data.push({
value: item[this.upLine[this.lineIndex].name],
coord: [index, item[this.upLine[this.lineIndex].name]],
});
}
});
this.chartLine1 = echarts.init(document.getElementById(this.chartLineName));
this.chartLine1.setOption(option);
window.addEventListener("resize", () => {
this.chartLine1.resize();
});
},
},
};
</script>
<style lang="scss">
.mod-demo-echarts {
.chart-box {
min-height: 700px;
margin-top: 20px;
}
}
</style>

239
src/views/process-inspection/charts/echart-3line.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="mod-demo-echarts">
<div :id="chartLineName" class="chart-box"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
props: {
title: {
type: String,
},
chartLineName: {
type: String,
default: "echartLine",
},
yName: {
type: String,
},
dataList: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
ruleList: [
"违反规则一：控制图上有 1 个点位于三倍标准差以外",
"违反规则二：连续 9 点落在中心线的用一侧",
"违反规则三：连续 6 点递增或者递减",
"违反规则四：连续 14 点中 相邻点 交替上下",
"违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
"违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
"违反规则七：连续 15 点 落在中心线两侧的C区内",
"违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
"违反规则九：有 1 点落在规格线以外",
"违反规则十：CPK小于目标值",
],
//testdata
};
},
mounted() {},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine) {
this.chartLine.resize();
}
},
methods: {
// 折线图
initChartLine() {
var option = {
title: {
text: this.title,
},
legend: {
data: [this.title, "LCL", "CL", "UCL"],
},
tooltip: {
// 悬浮提示框
trigger: "axis",
boundaryGap: false,
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: (e) => {
return `
点位坐标: ${e[0].data.position}<br/>
${e[0].marker} 数值: ${e[0].data.value}<br/>
${e[0].marker} 规格: ${e[0].data.sl}<br/>
${e[0].marker} 名称:${e[0].data.name}
`;
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
grid: {
// 折线图内边距
left: "3%",
right: "4%",
bottom: "7%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
},
yAxis: {
type: "value",
name: this.yName,
axisLine: {
show: true,
lineStyle: {
//color: colors[2]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
},
},
dataZoom: [
// 轴放大
{
show: true,
realtime: true,
start: 0,
end: 100,
xAxisIndex: 0,
},
{
type: "inside",
realtime: true,
start: 0,
end: 100,
xAxisIndex: 0,
},
],
series: [
{
name: this.title,
type: "line",
lineStyle: {
color: "#5470c6",
},
markArea: {
// 以y轴分割的区域
silent: false,
data: [
],
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.value,
name: item.name,
sl:`ucl-${item.controlLimit.ucl.toFixed(2)} cl-${item.controlLimit.cl.toFixed(2)} lcl-${item.controlLimit.lcl.toFixed(2)} `
};
return obj;
}),
},
{
name: "LCL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#91cc75",
},
endLabel: {
formatter: "LCL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.lcl,
name: item.name,
};
return obj;
}),
},
{
name: "CL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#ee6666",
},
endLabel: {
formatter: "CL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.cl,
name: item.name,
};
return obj;
}),
},
{
name: "UCL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#fac858",
},
endLabel: {
formatter: "UCL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.ucl,
name: item.name,
};
return obj;
}),
},
],
};
this.chartLine = echarts.init(document.getElementById(this.chartLineName));
this.chartLine.setOption(option);
window.addEventListener("resize", () => {
this.chartLine.resize();
});
},
},
};
</script>
<style lang="scss">
.mod-demo-echarts {
.chart-box {
min-height: 700px;
margin-top: 20px;
}
}
</style>