提交 ece33aef authored 作者: liujiaxing's avatar liujiaxing

曲线bug修复

上级 96184e36
......@@ -131,7 +131,7 @@ function initChart() {
props.data.forEach((it, index) => {
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(it, series1Data.value, '最终数据');
if (it.length > 0) {
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
......@@ -171,6 +171,8 @@ function initChart() {
},
}
})
}
})
} else {
seriesArr.push({
......@@ -363,32 +365,36 @@ function initChart() {
// let res = params[0].axisValue + '<br>';
// res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
// return res;
console.log(params,props.legendName);
console.log(params, props.legendName);
let res = ''
if (params[0].seriesIndex == 0) {
// if (seriesArr.length > 1) {//曲线有多个时
if (Array.isArray(props.legendName) && props.legendName.length > 1) {
res = params[0].axisValue + '<br>';
if(props.data[0].length>0){
if (props.data[0].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
}
if(props.data[1].length>0){
if (props.data[1].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}:<br>`;
}
return res;
} else {
res = params[0].axisValue + '<br>';
res += `${params[0].marker} ${props.legendName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
res += `${params[0].marker} ${props.legendName}: ${params[0].value} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
return res;
}
// } else {
// res = params[0].axisValue + '<br>';
// res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value} <br>`;
// return res;
// }
} else if (params[0].seriesIndex == 1) {
let res =params[0].axisValue + '<br>';
if(props.data[0].length>0){
let res = params[0].axisValue + '<br>';
if (props.data[0].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}:<br>`;
} if(props.data[1].length>0){
} if (props.data[1].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value} <br>`;
}
return res;
......
......@@ -75,11 +75,24 @@
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<div class="flex-box" v-if="props.legendName[0] && props.legendName[1]">
<cdfCurve :lineArray="props.lineArray" :yName="props.yName" :legendName="props.legendName" :data="props.data"
:color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
<div class="flex-box" v-else>
<div v-if="props.legendName[0]">
<cdfCurve :legendName="props.legendName[0]"
:yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
:data="props.data[0]" color="#ff9f7f" :isShowDetial="true"></cdfCurve>
</div>
<div v-if="props.legendName[1]">
<cdfCurve :legendName="props.legendName[1]"
:yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
:data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve>
</div>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="false" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
......
......@@ -77,11 +77,26 @@
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<div class="flex-box" v-if="props.legendName[0] && props.legendName[1]">
<instantCurve :lineArray="props.lineArray" :yName="props.yName" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate">
</instantCurve>
</div>
<div class="flex-box" v-else>
<div v-if="props.legendName[0]">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]"
:yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' } : {}"
:propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
</div>
<div v-if="props.legendName[1]">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]"
:yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' } : {}"
:propsDate="componentProps" isShowDetail="true" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="false" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
......
......@@ -148,7 +148,7 @@ function initChart() {
if (props.lineArray) {
xAxisType = 'time';
props.data.forEach((it, index) => {
if(it.length>0){
if (it.length > 0) {
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(series1Data.value, '最终数据');
if (series1Data.value.length > 0) {
......@@ -445,10 +445,10 @@ function initChart() {
if (params[0].seriesIndex == 0) {
if (Array.isArray(props.legendName) && props.legendName.length > 1) {
res = timestampToHMS(params[0].axisValue) + '<br>';
if(props.data[0].length>0){
if (props.data[0].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
}
if(props.data[1].length>0){
if (props.data[1].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}:<br>`;
}
return res;
......@@ -463,10 +463,10 @@ function initChart() {
} else if (params[0].seriesIndex == 1) {
let res = timestampToHMS(params[0].axisValue) + '<br>';
if(props.data[0].length>0){
if (props.data[0].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}:<br>`;
}
if(props.data[1].length>0){
if (props.data[1].length > 0) {
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value} <br>`;
}
return res;
......
......@@ -11,7 +11,7 @@
<div class="satellite-section">
<!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14"
:title="titles[1]" slogan="可用性" :yName="yName2" :legendName="['规划可用性', '实际可用性']" :lineArray="true"
:title="titles[1]" slogan="可用性" :yName="yName2" :legendName="['', '实际可用性']" :lineArray="true"
@changeTime="changeTimeFn(2, $event)">
</component>
</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论