<template>
<div ref="doubleBar"></div>
</template>
<script>
import {
selectedAtchingFun,
deepCopy,
defaultColorArr,
defaultTitleArr,
defaultGridArr,
setChartsNumber,
setXInfo,
setLeftTitle,
yAxisArr,
controlLimitsArr,
setxAxisFun,
exchangedFun,
exchangedFunsectional,
exchangedFungroup,
exchangedOOCFun,
exchangedOOCFunsectional,
exchangedOOCFungroup,
exchangedPMFun,
exchangedPMFunsectional,
exchangedPMFungroup
} from "@/pages/HOME/common.js";
import resize from "@/mixins/resize";
import Bus from "@/pages/newApplication/components/bus.js";
export default {
name: "doubleBar",
mixins: [resize],
props: {
xAxislValues: {
type: Array,
required: true,
},
fixedright: {
type: Boolean,
default: true,
},
newnumArr: {
type: Array,
required: true,
},
barType: {
type: String,
},
propsDataInfo: {
type: Object,
},
queryDatarvSeqNum: {
type: String | Number,
required: true,
},
controlLimitsWithStrtegy: {
type: Object,
},
allFArrpoint: {
type: Object
},
sectionalPMValuesMaps: {
type: Object
},
aAndbDataInfo: {
type: Object,
},
showABFactory: {
type: String
},
groupInfoData:{
type: Object,
},
//传递一个分段还是不分的四个按钮数组的情况
//只要其中有一个状态改变，那么就不使用propsDataInfo
headerIconsFlag: {
type: Array
},
//五个按钮的状态
headerIconsAllFlag: {
type: Array
},
sectionalOOCValuesMaps:{
type: Object,
},
spinning: {
type: Boolean,
},
},
data() {
return {
clickParamsVal: null,
option: {},
oldOptionSeries: {},
selePercentFlag: false,
fScatterArr: {}, //单独拎出来F的集合
pushAndDelF: [], //添加删除F点标记
};
},
mounted() {
setTimeout(() => {
this.initEchart();
}, 1000);
},
watch: {
xAxislValues: {
handler(val, oval) {
if (val) {
// Bus.$emit("sendselePercentFun", {
// keyArr: {},
// controlLimitsWithStrtegy: this.controlLimitsWithStrtegy,
// });
setTimeout(() => {
this.initEchart();
}, 1000);
}
},
deep: true,
},
fixedright: function (val) {
this.myChart.resize();
},
newnumArr: {
handler(val, oval) {
if (val) {
this.initEchart();
}
},
},
},
methods: {
initEchart() {
sessionStorage.setItem('flagF', 'F');
this.myChart = this.$echarts.init(this.$refs.doubleBar);
// this.myChart.clear();
let xinfo = setxAxisFun(this.xAxislValues);
/**
* 从后台拿F点数据
*/
let fData =[];
let oocData =[];
let pmData =[];
//如果有ooc
let setgrid = setChartsNumber(this.newnumArr.length);
/**zhiData 这个是将从后台返回的数据拿过来渲染。即黑色点*/
let zhiData = [
{
name: "值", //原始
id:"值2",
type: "scatter",
color: "#000000",
symbol: "rect",
showSymbol: true,
symbolSize: 4,
z: 7,
data: this.propsDataInfo.scatterPlotValues,
xAxisIndex: 2,
yAxisIndex: 2,
},
{
name: "值",
id:"值1",
type: "line",
color: "#000000",
data: this.propsDataInfo.averageValues,
symbol: "rect",
showSymbol: true,
symbolSize: 4,
z: 8,
silent: false,
xAxisIndex: 1, //平均
yAxisIndex: 1,
itemStyle: {
normal: {
lineStyle: {
width: 0.8,
color: "#000000",
type: "solid", //'dotted'虚线 'solid'实线
},
},
},
},
{
name: "值", //标准
id:"值0",
type: "line",
color: "#000000",
symbol: "rect",
data: this.propsDataInfo.standardValues,
showSymbol: true,
symbolSize: 4,
z: 8,
silent: false,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
lineStyle: {
width: 0.8,
color: "#000000",
type: "solid", //'dotted'虚线 'solid'实线
},
},
},
},
];
var option = {
color: defaultColorArr,
dataZoom: [
{
type: "slider",
xAxisIndex: [0, 1, 2],
show: true,
start: 0,
end: 100,
height: 14,
right: 5,
bottom: 0,
fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
showDetail: false, //拖拽时是否展示滚动条两侧的文字
},
],
animation: false,
title: setLeftTitle(this.newnumArr.length, this.newnumArr),
tooltip: {
// trigger: "axis",
show: false,
},
legend: {
bottom: 10,
data: ["目前的管制界限", "SL", "目标值", "目前的中心", "值"],
},
grid: setgrid, //defaultGridArr,
toolbox: {
right: 16,
feature: {
saveAsImage: { name: "chart图表" },
},
},
xAxis: setXInfo(this.newnumArr.length, xinfo.xAxisAlltime),
yAxis: yAxisArr(this.newnumArr.length),
series: [...this.propsDataInfo.infoArr, ...zhiData],
};
this.oldOptionSeries = option.series;
if (this.barType == "XbarS") {
option.title[1].text = "标" + "\n" + "准" + "\n" + "差";
} else {
option.title[1].text = "全" + "\n" + "距" + "\n" + "值";
}
//首次进入，红色坐标线指向最后一个
//将最后一个点的SampleId存着,最后一个点
let lastInfoArr = [
{
name: "averageValues1",
type: "line",
xAxisIndex: 1, //平均
yAxisIndex: 1,
data: [
// this.propsDataInfo.averageValues[
// this.propsDataInfo.averageValues.length - 1
// ],
],
markPoint: {
symbol: "rect",
symbolSize: 8,
data: [
{
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: xinfo.xAxisAlltime.length - 1,
yAxis:
this.propsDataInfo.averageValues[
this.propsDataInfo.averageValues.length - 1
],
symbolSize: 8,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
},
],
},
markLine: {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
width: 1,
},
data: [{ xAxis: xinfo.xAxisAlltime.length - 1 }],
},
},
{
name: "standardValues1",
type: "line",
data: [
// this.propsDataInfo.standardValues[
// this.propsDataInfo.standardValues.length - 1
// ],
],
markPoint: {
symbol: "rect",
symbolSize: 8,
data: [
{
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: xinfo.xAxisAlltime.length - 1,
yAxis:
this.propsDataInfo.standardValues[
this.propsDataInfo.standardValues.length - 1
],
symbolSize: 8,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
},
],
},
markLine: {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
width: 1,
},
data: [{ xAxis: xinfo.xAxisAlltime.length - 1 }],
},
},
{
name: "scatterPlotValues1", //原始
type: "scatter",
color: "#000000",
symbol: "rect",
showSymbol: true,
symbolSize: 3,
z: 8,
data: [
// this.propsDataInfo.standardValues[
// this.propsDataInfo.standardValues.length - 1 ]
],
xAxisIndex: 2,
yAxisIndex: 2,
markPoint:{
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
data:[{coord: [xinfo.xAxisAlltime.length - 1, this.queryDatarvSeqNum],//最后一个点位？？？
}],
symbolSize: 8,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
},
markLine : {
symbol: "none", //去掉箭头
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
width: 1,
},
data: [{ xAxis: xinfo.xAxisAlltime.length - 1 }],
}
}
];
option.series = [...option.series, ...lastInfoArr ,]// ...fData ,...oocData,...pmData];
console.log(option);
if(this.showABFactory === 'T'){
let colorSelectArr = []; //随机颜色数组 "#B94FFF", "#FFAA33" #98c379
let nameaANDb = []
//显示ab两厂的图
let {
showABAverageMaps,
showABStandardMaps,
showABFullRangeMaps,
showABScatterPlotMaps
} = this.aAndbDataInfo;
if(showABScatterPlotMaps["A"] !== undefined){
option.series.push({
name: "A",
data: showABScatterPlotMaps["A"],
type: "scatter",
symbol: "circle",
z: 18,
symbolSize: 4,
itemStyle: {
color: "#B94FFF",
},
xAxisIndex: 2,
yAxisIndex: 2,
});
}
if(showABScatterPlotMaps["B"] !== undefined){
option.series.push({
name: "B",
data: showABScatterPlotMaps["B"],
type: "scatter",
symbol: "circle",
z: 19,
symbolSize: 4,
itemStyle: {
color: "#98c379",
},
xAxisIndex: 2,
yAxisIndex: 2,
});
}
if( showABAverageMaps["A"] !== undefined){
colorSelectArr.push("#B94FFF")
nameaANDb.push("A")
option.series.push({
name: "A",
data: showABAverageMaps["A"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#B94FFF",
z: 11,
symbolSize: 4,
itemStyle: {
color: "#B94FFF",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 1,
yAxisIndex: 1,
})
}
if( showABAverageMaps["B"] !== undefined){
colorSelectArr.push("#98c379")
nameaANDb.push("B")
option.series.push({
name: "B",
data: showABAverageMaps["B"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#98c379",
z: 12,
symbolSize: 4,
itemStyle: {
color: "#98c379",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 1,
yAxisIndex: 1,
})
}
if(this.barType == "XbarS"){
if( showABStandardMaps["A"] !== undefined){
option.series.push({
name: "A",
data: showABStandardMaps["A"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#B94FFF",
z: 11,
symbolSize: 4,
itemStyle: {
color: "#B94FFF",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 0,
yAxisIndex: 0,
})
}
if( showABStandardMaps["B"] !== undefined){
option.series.push({
name: "B",
data: showABStandardMaps["B"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#98c379",
z: 12,
symbolSize: 4,
itemStyle: {
color: "#98c379",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 0,
yAxisIndex: 0,
})
}
}else if( this.barType == "XbarR"){
if( showABFullRangeMaps["A"] !== undefined){
option.series.push({
name: "A",
data: showABFullRangeMaps["A"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#B94FFF",
z: 11,
symbolSize: 4,
itemStyle: {
color: "#B94FFF",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 0,
yAxisIndex: 0,
})
}
if( showABFullRangeMaps["B"] !== undefined){
option.series.push({
name: "B",
data: showABFullRangeMaps["B"],
connectNulls: true,
type: "line",
symbol: "circle",
showSymbol:true,
color: "#98c379",
z: 12,
symbolSize: 4,
itemStyle: {
color: "#98c379",
width: 0.3,
},
lineStyle: {
width: 1,
},
xAxisIndex: 0,
yAxisIndex: 0,
})
}
}
option.legend.data = [
...["目前的管制界限", "SL", "目标值", "目前的中心", "值"],
...nameaANDb,
];
// colorSelectArr
}
//需要告诉知道是不是显示符合的开启/关闭
let headerIconsFlagStr =this.headerIconsFlag.toString();
let groupAverageMapsFlag ="";
switch(headerIconsFlagStr){
case 'true,true,true,false':
groupAverageMapsFlag = false;
break;
case 'true,true,false,false':
groupAverageMapsFlag = false;
break;
case 'true,true,false,true' :
groupAverageMapsFlag = false;
break;
case 'true,false,false,false' :
groupAverageMapsFlag = true;
break;
case 'true,false,true,true':
groupAverageMapsFlag = true;
break;
case 'true,false,false,true':
groupAverageMapsFlag = true;
break;
case 'true,false,true,false' :
groupAverageMapsFlag = true;
break;
default:
groupAverageMapsFlag = "";
}
if(headerIconsFlagStr == 'false,false,false,false' ){
if(this.allFArrpoint.initialAveragesFValues !== undefined){ //？？？？？？？
//大于零就是需要去显示F点，这里需要区分是分段还是不分段，不分段不分组的三种情况
//1.不分段不分组
fData = exchangedFun(this.allFArrpoint.initialAveragesFValues,this.allFArrpoint.initialStandardsFValues,this.allFArrpoint.initialOriginalFValues)
}
pmData = exchangedPMFun(this.barType ,this.sectionalPMValuesMaps);
oocData = exchangedOOCFun(this.barType ,this.sectionalOOCValuesMaps);
option.series = [...option.series, ...fData ,...oocData,...pmData];
}
if(groupAverageMapsFlag == true){
let {
groupAverageMaps,
groupStandardMaps,
groupFullRangeMaps,
groupScatterPlotMaps,
colorArr
} = this.groupInfoData;
let rightTitle = Object.keys(groupAverageMaps)
let inMaxArr = [];
var lastInfoArrfunData ={}
rightTitle.forEach((k, index) => {
let inMinArr = [
{
name: k,
id:k+"1",
data: groupAverageMaps[k],
connectNulls: true,
type: "line",
xAxisIndex: 1,
yAxisIndex: 1,
symbol: "circle",
symbolSize: 5,
z: 19,
color: colorArr[index],
itemStyle: {
color: colorArr[index],
normal: {lineStyle: {width: 0.8,}},
},
},
{
name: k,
id:k+"0",
data: this.barType == "XbarS" ? groupStandardMaps[k] : groupFullRangeMaps[k],
connectNulls: true,
type: "line",
symbol: "circle",
symbolSize: 5,
color: colorArr[index],
itemStyle: {
color: colorArr[index],
normal: {lineStyle: {width: 0.8,}},
},
xAxisIndex: 0,
z: 19,
yAxisIndex: 0,
},
{
name: k,
id:k+"2",
data: groupScatterPlotMaps[k],
type: "scatter",
symbol: "circle",
symbolSize: 5,
itemStyle: {
color: colorArr[index],
},
xAxisIndex: 2,
z: 19,
yAxisIndex: 2,
}
]
inMaxArr = [...inMaxArr,...inMinArr];
});
let nullarrs =[
{
name: '目前的管制界限',
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {color:"#0000ff"},
data:[]
},
{
name: "SL",
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {color:"#ff4444"},
data:[]
},
{
name: "目标值",
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {color:"#00ff00"},
data:[]
},
{
name: "目前的中心",
symbol: "none",
showSymbol: false,
itemStyle: {color:"#0000ff"},
type: 'line',
data:[]
},
]
option.series = [...option.series ,...inMaxArr,...nullarrs];
option.legend.selectedMode= false; /******************/
option.legend["data"] =[
{name :"目前的管制界限",show:true,itemStyle: {color:"#0000ff"}, },
{name :"SL",show:true,itemStyle: {color:"#ff4444"}, },
{name :"目标值",show:true,itemStyle: {color:"#00ff00"}, },
{name :"目前的中心",show:true,itemStyle: {color:"#0000ff"}, },{name :"值",show:true,itemStyle: {color:"#000000"}, }];
if(groupAverageMapsFlag!= ""){ //对最后一个点进行定位
//先根据lastSampleId去找标准值，平均值找到下标
let {
groupAverageMaps,
groupStandardMaps,
groupFullRangeMaps,
groupScatterPlotMaps,
colorArr
} = this.groupInfoData;
let rightTitle = Object.keys(groupAverageMaps)
let lastSampleId = sessionStorage.getItem('lastSampleId');
let lastSampleIdIndex= xinfo.xAxisAllId.findIndex(value=>value == lastSampleId)
rightTitle.forEach((k, index) => {
if(groupAverageMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.average = groupAverageMaps[k][lastSampleIdIndex]
}
if (this.barType == "XbarS") {
if(groupStandardMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.standard = groupStandardMaps[k][lastSampleIdIndex]
}
}else if(this.barType == "XbarR"){
if(groupFullRangeMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.standard = groupFullRangeMaps[k][lastSampleIdIndex]
}
}
if(groupScatterPlotMaps[k].length > 0){
groupScatterPlotMaps[k].forEach(z=>{
if(z[0] == lastSampleIdIndex){
lastInfoArrfunData.scatterPlot= z;
return;
}
})
}
})
option.series.forEach(g=>{
if(g.name =="averageValues1"){
g.data = lastInfoArrfunData.average;
g.markPoint.data[0].xAxis = lastSampleIdIndex;
g.markPoint.data[0].yAxis = lastInfoArrfunData.average;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
if(g.name =="standardValues1"){
g.data = lastInfoArrfunData.standard;
g.markPoint.data[0].xAxis = lastSampleIdIndex;
g.markPoint.data[0].yAxis = lastInfoArrfunData.standard;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
if(g.name =="scatterPlotValues1"){
g.data = lastInfoArrfunData.scatterPlot;
g.markPoint.data[0].coord= lastInfoArrfunData.scatterPlot;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
})
//循环对象
}
let rightarrtitle = this.allFArrpoint.initialAveragesFValues === undefined ? Object.keys(this.groupInfoData.groupStandardMaps) : Object.keys(this.allFArrpoint.initialAveragesFValues);
if(this.allFArrpoint.initialAveragesFValues !== undefined){ //？？？？？？？
//大于零就是需要去显示F点，这里需要区分是分段还是不分段，不分段不分组的三种情况
//1.不分段不分组
fData = exchangedFungroup(this.allFArrpoint.initialAveragesFValues,this.allFArrpoint.initialStandardsFValues,this.allFArrpoint.initialOriginalFValues ,rightarrtitle)
}
pmData = exchangedPMFungroup(this.barType ,this.sectionalPMValuesMaps,rightarrtitle);
oocData = exchangedOOCFungroup(this.barType ,this.sectionalOOCValuesMaps,rightarrtitle);
option.series = [...option.series, ...fData ,...oocData,...pmData];
}
if(groupAverageMapsFlag === false){
let {
sectionalAverageMaps,
sectionalStandardMaps,
sectionalFullRangeMaps,
sectionalScatterPlotMaps,
colorArr
} = this.groupInfoData;
let rightsectionalTitle = Object.keys(sectionalAverageMaps)
var lastInfoArrfunData ={}
let inMaxArr = [];
rightsectionalTitle.forEach((k, index) => {
let inMinArr = [
{
name: k,
id:k+"1",
data: sectionalAverageMaps[k],
connectNulls: true,
type: "line",
xAxisIndex: 1,
z: 19,
yAxisIndex: 1,
symbol: "circle",
symbolSize: 5,
color: colorArr[index],
itemStyle: {
color: colorArr[index],
normal: {lineStyle: {width: 0.8,}},
},
},
{
name: k,
id:k+"0",
data: sectionalStandardMaps[k],
connectNulls: true,
type: "line",
symbol: "circle",
symbolSize: 5,
z: 19,
color: colorArr[index],
itemStyle: {
color: colorArr[index],
normal: {lineStyle: {width: 0.8,}},
},
},
{
name: k,
id:k+"2",
data: sectionalScatterPlotMaps[k],
type: "scatter",
symbol: "circle",
symbolSize: 5,
z: 19,
color: colorArr[index],
itemStyle: {
color: colorArr[index],
normal: {lineStyle: {width: 0.8,}},
},
xAxisIndex: 2,
yAxisIndex: 2,
}
]
inMaxArr = [...inMaxArr,...inMinArr];
});
let nullarr =[
{
name: '目前的管制界限',
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {
color:"#0000ff",
},
data:[]
},
{
name: "SL",
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {color:"#ff4444"},
data:[]
},
{
name: "目标值",
type: 'line',
symbol: "none",
showSymbol: false,
itemStyle: {color:"#00ff00"},
data:[]
},
{
name: "目前的中心",
symbol: "none",
showSymbol: false,
itemStyle: {color:"#0000ff"},
type: 'line',
data:[]
},
]
option.series = [...option.series ,...inMaxArr,...nullarr];
option.legend.selectedMode= false; /******************/
option.legend["data"] =[
{name :"目前的管制界限",show:true,itemStyle: {color:"#0000ff"}, },
{name :"SL",show:true,itemStyle: {color:"#ff4444"}, },
{name :"目标值",show:true,itemStyle: {color:"#00ff00"}, },
{name :"目前的中心",show:true,itemStyle: {color:"#0000ff"}, },{name :"值",show:true,itemStyle: {color:"#000000"}, }];
//对最后一个点进行定位
// console.log("进来了")
// //先根据lastSampleId去找标准值，平均值找到下标
let rightTitle = Object.keys(sectionalAverageMaps)
let lastSampleId = sessionStorage.getItem('lastSampleId');
let lastSampleIdIndex= xinfo.xAxisAllId.findIndex(value=>value == lastSampleId)
rightTitle.forEach((k, index) => {
if(sectionalAverageMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.average = sectionalAverageMaps[k][lastSampleIdIndex]
}
if (this.barType == "XbarS") {
if(sectionalStandardMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.standard = sectionalStandardMaps[k][lastSampleIdIndex]
}
}else if(this.barType == "XbarR"){
if(sectionalFullRangeMaps[k][lastSampleIdIndex] != null){
lastInfoArrfunData.standard = sectionalFullRangeMaps[k][lastSampleIdIndex]
}
}
if(sectionalScatterPlotMaps[k].length > 0){
sectionalScatterPlotMaps[k].forEach(z=>{
if(z[0] == lastSampleIdIndex){
lastInfoArrfunData.scatterPlot= z;
return;
}
})
}
})
option.series.forEach(g=>{
if(g.name =="averageValues1"){
g.data = lastInfoArrfunData.average;
g.markPoint.data[0].xAxis = lastSampleIdIndex;
g.markPoint.data[0].yAxis = lastInfoArrfunData.average;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
if(g.name =="standardValues1"){
g.data = lastInfoArrfunData.standard;
g.markPoint.data[0].xAxis = lastSampleIdIndex;
g.markPoint.data[0].yAxis = lastInfoArrfunData.standard;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
if(g.name =="scatterPlotValues1"){
g.data = lastInfoArrfunData.scatterPlot;
g.markPoint.data[0].coord= lastInfoArrfunData.scatterPlot;
g.markLine.data[0].xAxis = lastSampleIdIndex;
}
})
let righttitleInfo = this.allFArrpoint.initialAveragesFValues === undefined ? Object.keys(this.groupInfoData.sectionalAverageMaps) : Object.keys(this.allFArrpoint.initialAveragesFValues);
// Object.keys(this.allFArrpoint.initialAveragesFValues);
//循环对象
if(this.allFArrpoint.initialAveragesFValues !== undefined){ //？？？？？？？
//大于零就是需要去显示F点，这里需要区分是分段还是不分段，不分段不分组的三种情况
//1.不分段不分组
fData = exchangedFunsectional(this.allFArrpoint.initialAveragesFValues,this.allFArrpoint.initialStandardsFValues,this.allFArrpoint.initialOriginalFValues,righttitleInfo)
}
pmData = exchangedPMFunsectional(this.barType ,this.sectionalPMValuesMaps,righttitleInfo);
oocData = exchangedOOCFunsectional(this.barType ,this.sectionalOOCValuesMaps,righttitleInfo);
option.series = [...option.series, ...fData ,...oocData,...pmData];
}
if(groupAverageMapsFlag == ""){
option.legend.selectedMode= true;
}
//需要告诉知道是不是显示符合的排序的开启/关闭
//？？分段时候的x轴需要改变，最后一个标记点的坐标可能也需要发生改变，上下限之类所有都需要改变
this.option = option;
this.myChart.clear();
var loadingOption = {
text: '加载中...',
color: '#999',
textColor: '#222',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
};
// 在调用 setOption 前显示加载动画
this.myChart.showLoading(loadingOption);
console.log(new Date(),"////////////////////////////")
this.myChart.setOption(option);
console.log(new Date(),"-------------------------------")
this.myChart.hideLoading();
this.myChart.off('legendclick');//图例（legend）的监听事件
this.myChart.on('legendclick', function (params) {
console.log(params);
//需要判断是否分组分段
});
//单击时候的事件
let that = this;
that.myChart.off("click");
that.myChart.on("click", function (params) {
// console.log("单击click----params",params);
//单击时候还要考虑如果点击的是平均或者标准差，那么原始值对应的点位应该是什么？
if (!params.componentSubType) {
return;
}
that.option = option;
//这里分三种情况
//每种情况又分两种，如果seriesId最后一位是2，那就是点击的散点图
let headerIcons2 =that.headerIconsFlag.slice(0, 2);
let resStr = headerIcons2.toString();
if(resStr == "true,true"){
//分段
let titleName ="";
if(params.seriesName.indexOf("pjdata") >= 0 || params.seriesName.indexOf("bzdata") >= 0 || params.seriesName.indexOf("ysdata") >= 0){
titleName = params.seriesName.split("data")[1];
}else{
titleName = params.seriesName;
}
//params.seriesName
//分组
option.series.forEach((item) => {
if(item.name == "averageValues1" && item.type == "line"){ //sectionalAverageMaps,
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.groupInfoData.sectionalAverageMaps[titleName][x];
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "standardValues1" && item.type == "line"){ //sectionalStandardMaps, sectionalFullRangeMaps,
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.barType == "XbarS" ? that.groupInfoData.sectionalStandardMaps[titleName][x] : that.groupInfoData.sectionalFullRangeMaps[titleName][x] ;
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "scatterPlotValues1" && item.type == "scatter" ){ //sectionalScatterPlotMaps,
let pointInPixel = [params.event.offsetX, params.event.offsetY];
let x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
if(params.seriesId.slice(-1).indexOf("2")!= -1){ //这里会知道点击的是原始数据的
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: params.value,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}else{//否则就是点击折线图（平均值/标准差/全距值）这个时候散点图应该落在第一个点
let filterArr = that.groupInfoData.sectionalScatterPlotMaps[titleName].filter(function(item, idx) {
return item[0] === x; // 过滤出x下标为5的数据
});
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: filterArr[0],
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}
}
})
}else if(resStr == "true,false"){
let titleName ="";
if(params.seriesName.indexOf("pjdata") >= 0 || params.seriesName.indexOf("bzdata") >= 0 || params.seriesName.indexOf("ysdata") >= 0){
titleName = params.seriesName.split("data")[1];
}else{
titleName = params.seriesName;
}
//params.seriesName
//分组
option.series.forEach((item) => {
if(item.name == "averageValues1" && item.type == "line"){ //groupInfoData.groupAverageMaps
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.groupInfoData.groupAverageMaps[titleName][x];
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "standardValues1" && item.type == "line"){ //groupStandardMaps, groupFullRangeMaps,
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.barType == "XbarS" ? that.groupInfoData.groupStandardMaps[titleName][x] : that.groupInfoData.groupFullRangeMaps[titleName][x] ;
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "scatterPlotValues1" && item.type == "scatter" ){ //groupScatterPlotMaps,
let pointInPixel = [params.event.offsetX, params.event.offsetY];
let x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
if(params.seriesId.slice(-1).indexOf("2")!= -1){
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: params.value,//？？？
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}else{
let filterArr = that.groupInfoData.groupScatterPlotMaps[titleName].filter(function(item, idx) {
return item[0] === x; // 过滤出x下标为5的数据
});
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: filterArr[0],
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}
}
})
}else if(resStr == "false,false"){
//1.不分组不分段
option.series.forEach((item) => {
if(item.name == "averageValues1" && item.type == "line"){
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.propsDataInfo.averageValues[x];
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "standardValues1" && item.type == "line"){
let pointInPixel = [params.event.offsetX, params.event.offsetY];
const x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
let yval = that.propsDataInfo.standardValues[x];
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
xAxis: x,
yAxis: yval,
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
}
if(item.name == "scatterPlotValues1" && item.type == "scatter" ){
let pointInPixel = [params.event.offsetX, params.event.offsetY];
let x = that.myChart.convertFromPixel({ seriesIndex: 8 },pointInPixel )[0];//获取到x轴下标
if(params.seriesId.slice(-1).indexOf("2")!= -1){
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: params.value,//？？？
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}else{
let filterArr = that.propsDataInfo.scatterPlotValues.filter(function(item, idx) {
return item[0] === x; // 过滤出x下标为5的数据
});
item.markPoint.data.splice(item.markPoint.data.length - 1, 1, {
symbol:
"path://M10.46 18a2.23 2.23 0 0 1-.91-.2 1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46zm0-10v7.9l4.86-3.9z",
coord: filterArr[0],//？？？
symbolSize: 10,
symbolRotate: 0,
symbolOffset: [-4, 0],
itemStyle: {
color: "rgba(255, 15, 15, 1)",
},
label: {
show: false,
},
});
item.markLine = {
symbol: "none",
silent: true,
animation: false,
label: {
show: false,
},
lineStyle: {
color: "#ff4444",
type: "solid",
},
data: [{ xAxis: x }],
};
}
}
})
}
that.myChart.setOption({ series: option.series }, { lazyUpdate: true });
let arrIconsStr = params.seriesId.slice(-1);
switch(arrIconsStr){
case "1":
that.$emit("uploadRightInfo", {
value: [params.dataIndex, params.value],
type: "line",
});
that.$emit("uploadRightInfoClick", params.seriesId);
break;
case "0":
that.$emit("uploadRightInfo", {
value: [params.dataIndex, params.value],
type: "line",
});
that.$emit("uploadRightInfoClick", params.seriesId);
break;
case "2":
that.$emit("uploadRightInfo", {
value: params.value,
type: "scatter",
});
that.$emit("uploadRightInfoClick", params.seriesId);
break;
}
});
that.myChart.off("dblclick");
//双击时候的事件
that.myChart.on("dblclick", function (params) {
let arrIconsString = params.seriesId.slice(-1);
switch(arrIconsString){
case "1":
that.$emit("showhandleModel", {
value: [params.dataIndex, params.value],
type: "line",
});
break;
case "0":
that.$emit("showhandleModel", {
value: [params.dataIndex, params.value],
type: "line",
});
break;
case "2":
that.$emit("showhandleModel", {
value: params.value,
type: "scatter",
});
break;
}
});
},
//隐藏或者显示某个信息颜色
atchingFunTwo(flag, filterVal) {
let option = this.myChart.getOption();
option.legend[0]["selected"] = filterVal;
this.option = option;
let that = this;
that.myChart.setOption(that.option);
},
//处理atching弹窗选中的信息
atchingFun(filterVal) {
console.log("处理atching弹窗选中的信息",filterVal)
},
//上中下计算管制界限
selePercentNumFun(key) {
//对传过来的字段进行转义
Bus.$emit("sendselePercentFun", {
keyArr: controlLimitsArr[key],
controlLimitsWithStrtegy: this.controlLimitsWithStrtegy,
});
let option = this.myChart.getOption();
//声明一个变量，避免重复进行push,同时还要校验点击的编号是不是还是原来的编号
let legendPercent = ["计算管制界限", "计算管制中心"];
let newOptionArr = [];
option.series.forEach((k) => {
if (k.name.indexOf("计算") == -1) {
newOptionArr.push(k);
}
});
if (this.selePercentFlag == false) {
this.selePercentFlag = true;
legendPercent.forEach((i, index) => {
option.legend[0].data.push(i);
});
option.color.splice(5, 1, "#00DD00");
option.color.splice(6, 1, "#00DD00");
}
//平mean，全range，原raw，标sigma
let setIndexOptionArr = [];
if (this.barType == "XbarS") {
setIndexOptionArr = ["mean", "sigma", "raw", "range"];
} else {
setIndexOptionArr = ["mean", "range", "raw", "sigma"];
}
let controlLimitsWithStrtval = this.controlLimitsWithStrtegy;
// 1 //是点散点图 0 //点平均值 2标准差
let numArr = [{ key: 1 }, { key: 0 }, { key: 2 }];
numArr.forEach((item, index) => {
let keygjz = controlLimitsArr[key];
let inerkey = setIndexOptionArr[index];
let gjz = keygjz[inerkey];
let valuegjz = gjz[0];
newOptionArr.push({
name: "计算管制界限",
type: "line",
showSymbol: false,
symbol: "none",
data: [controlLimitsWithStrtval[valuegjz]],
silent: true,
step: "middle",
xAxisIndex: item.key,
yAxisIndex: item.key,
lineStyle: {
width: 1,
},
markLine: {
symbol: "none",
lineStyle: {
width: 1,
type: "dashed",
},
data: [
{
xAxis: option.xAxis[0].data.length,
yAxis: controlLimitsWithStrtval[valuegjz], //
},
],
},
});
});
numArr.forEach((item, indexs) => {
let keygjz = controlLimitsArr[key];
let inerkey = setIndexOptionArr[indexs];
let gjz = keygjz[inerkey];
let valuegjz = gjz[2];
newOptionArr.push({
name: "计算管制中心",
type: "line",
showSymbol: false,
symbol: "none",
data: [controlLimitsWithStrtval[valuegjz]],
silent: true,
step: "middle",
xAxisIndex: item.key,
yAxisIndex: item.key,
lineStyle: {
width: 1,
},
markLine: {
symbol: "none",
lineStyle: {
width: 1,
},
data: [
{
xAxis: option.xAxis[0].data.length,
yAxis: controlLimitsWithStrtval[valuegjz],
},
],
},
});
});
numArr.forEach((item, index) => {
let keygjz = controlLimitsArr[key];
let inerkey = setIndexOptionArr[index];
let gjz = keygjz[inerkey];
let valuegjz = gjz[1];
newOptionArr.push({
name: "计算管制界限",
type: "line",
showSymbol: false,
symbol: "none",
lineStyle: {
width: 1,
},
data: [controlLimitsWithStrtval[valuegjz]],
silent: true,
step: "middle",
xAxisIndex: item.key,
yAxisIndex: item.key,
markLine: {
symbol: "none",
lineStyle: {
width: 1,
type: "dashed",
},
data: [
{
xAxis: option.xAxis[0].data.length,
yAxis: controlLimitsWithStrtval[valuegjz], //
},
],
},
});
});
option.series = newOptionArr;
this.myChart.setOption(option);
},
//标记F点
showFpointFun() {
//先判断有没有F点
//分两种情况，如果点击就会有 clickParamsVal.componentSubType
//没有点击，即进入页面就进行标记，该种情况暂时未写
var clickParamsVal = this.clickParamsVal;
var xVal = null;
if (this.clickParamsVal === null) {
//这种是页面进来时候就去标记F点
xVal = this.xAxislValues.length - 1;
} else {
if (!clickParamsVal.componentSubType) {
return;
}
let pointInPixel = [
clickParamsVal.event.offsetX,
clickParamsVal.event.offsetY,
];
xVal = this.myChart.convertFromPixel(
{ seriesIndex: 8 },
pointInPixel
)[0];
}
this.$emit("sendFpoint", xVal);
},
},
beforeDestroy() {
if (this.myChart) {
this.myChart.clear();
}
},
};
</script>
<style lang="less" scoped>
::v-deep div {
z-index: 999 !important;
}
</style>