diff --git a/src/utils/unit-convert.js b/src/utils/unit-convert.js index fcd09e3c..ecd72d54 100644 --- a/src/utils/unit-convert.js +++ b/src/utils/unit-convert.js @@ -118,7 +118,7 @@ export function getUnitType (column) { /* 单位转换,返回转换后的[value, unit],type=time时若value<1ms,返回<1ms,type=percent时若value<0.01%,返回<0.01% */ export function valueToRangeValue (value, unitType) { - const values = unitConvert(value, unitType) + const values = unitConvert(Number(value), unitType) if (values[0] || values[0] === 0) { switch (unitType) { case unitTypes.time: { diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue index 8fe7a403..eabd0df4 100644 --- a/src/views/charts/charts/ChartEchart.vue +++ b/src/views/charts/charts/ChartEchart.vue @@ -140,7 +140,7 @@ export default { distance: [-50, 0], formatter(params) { const arr = unitConvert( - params.value, + Number(params.value), chartParams.unitType, ).join(' ') let desc = '' @@ -277,50 +277,51 @@ export default { selectedName = name } } - let markLine = { - silent: true, - symbol: 'none', - label: { - distance: [-50, 0], - formatter(params) { - const arr = unitConvert( - params.value, - chartParams.unitType, - ).join(' ') - let desc = '' - switch (params.dataIndex) { - case 0: { - desc = 'P50' - break - } - case 1: { - desc = 'P90' - break - } - default: - break - } - return `${arr} (${desc})` - }, - }, - data: [ - { - name: 'P50', - yAxis: self.chartData[0].aggregation.p50 - ? self.chartData[0].aggregation.p50 - : 50, - }, - { - name: 'P90', - yAxis: self.chartData[0].aggregation.p90 - ? self.chartData[0].aggregation.p90 - : 90, - }, - ], - } + let serieArray = [] self.chartOption.series.forEach((item,i) =>{ if(item.name === selectedName){ + let markLine = { + silent: true, + symbol: 'none', + label: { + distance: [-50, 0], + formatter(params) { + const arr = unitConvert( + Number(params.value), + chartParams.unitType, + ).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + default: + break + } + return `${arr} (${desc})` + }, + }, + data: [ + { + name: 'P50', + yAxis: self.chartData[i].aggregation.p50 + ? self.chartData[i].aggregation.p50 + : 50, + }, + { + name: 'P90', + yAxis: self.chartData[i].aggregation.p90 + ? self.chartData[i].aggregation.p90 + : 90, + }, + ], + } item.markLine = markLine } serieArray.push(item) diff --git a/src/views/charts/charts/ChartEchartWithStatistics.vue b/src/views/charts/charts/ChartEchartWithStatistics.vue index 663371f7..b69d9e44 100644 --- a/src/views/charts/charts/ChartEchartWithStatistics.vue +++ b/src/views/charts/charts/ChartEchartWithStatistics.vue @@ -57,57 +57,55 @@ export default { } } }) - - let markLine = { - silent: true, - symbol: 'none', - label: { - distance: [-50, 0], - formatter(params) { - const arr = unitConvert( - params.value, - chartParams.unitType, - ).join(' ') - let desc = '' - switch (params.dataIndex) { - case 0: { - desc = 'P50' - break - } - case 1: { - desc = 'P90' - break - } - default: - break - } - return `${arr} (${desc})` - }, - }, - data: [ - { - name: 'P50', - yAxis: this.chartData[0].aggregation.p50 - ? this.chartData[0].aggregation.p50 - : 50, - }, - { - name: 'P90', - yAxis: this.chartData[0].aggregation.p90 - ? this.chartData[0].aggregation.p90 - : 90, - }, - ], - } - if(this.statisticsData.length === 1){ + let markLine = { + silent: true, + symbol: 'none', + label: { + distance: [-50, 0], + formatter(params) { + const arr = unitConvert( + Number(params.value), + chartParams.unitType, + ).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + default: + break + } + return `${arr} (${desc})` + }, + }, + data: [ + { + name: 'P50', + yAxis: this.chartData[0].aggregation.p50 + ? this.chartData[0].aggregation.p50 + : 50, + }, + { + name: 'P90', + yAxis: this.chartData[0].aggregation.p90 + ? this.chartData[0].aggregation.p90 + : 90, + }, + ], + } let serieTmp = this.chartOption.series[0] this.chartOption.series[0] = { ...serieTmp, markLine:markLine } } - this.loadEchart() + this.loadEchart(1,true) }, dispatchLegendSelectAction(name) { @@ -127,47 +125,6 @@ export default { toggleStatisticsLegend (index) { let legendNum = this.statisticsData.length const chartParams = this.chartInfo.params - let markLine = { - silent: true, - symbol: 'none', - label: { - distance: [-50, 0], - formatter(params) { - const arr = unitConvert( - params.value, - chartParams.unitType, - ).join(' ') - let desc = '' - switch (params.dataIndex) { - case 0: { - desc = 'P50' - break - } - case 1: { - desc = 'P90' - break - } - default: - break - } - return `${arr} (${desc})` - }, - }, - data: [ - { - name: 'P50', - yAxis: this.chartData[0].aggregation.p50 - ? this.chartData[0].aggregation.p50 - : 50, - }, - { - name: 'P90', - yAxis: this.chartData[0].aggregation.p90 - ? this.chartData[0].aggregation.p90 - : 90, - }, - ], - } if(legendNum > 1){ let selectedNum = this.statisticsData.filter(item => {return item.active === true}).length //点击前,高亮legend个数 if(selectedNum === legendNum){//全部曲线高亮时 @@ -205,6 +162,47 @@ export default { let serieArray = [] this.chartOption.series.forEach((item,i) =>{ if(item.name === selectedName){ + let markLine = { + silent: true, + symbol: 'none', + label: { + distance: [-50, 0], + formatter(params) { + const arr = unitConvert( + Number(params.value), + chartParams.unitType, + ).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + default: + break + } + return `${arr} (${desc})` + }, + }, + data: [ + { + name: 'P50', + yAxis: this.chartData[i].aggregation.p50 + ? this.chartData[i].aggregation.p50 + : 50, + }, + { + name: 'P90', + yAxis: this.chartData[i].aggregation.p90 + ? this.chartData[i].aggregation.p90 + : 90, + }, + ], + } item.markLine = markLine } serieArray.push(item) @@ -234,6 +232,47 @@ export default { let selectedAfterNum = this.statisticsData.filter((item,i) => {return item.active === true}).length //点击后,高亮legend个数 if(selectedAfterNum === 1) {//点击后只有一条曲线高亮 + let markLine = { + silent: true, + symbol: 'none', + label: { + distance: [-50, 0], + formatter(params) { + const arr = unitConvert( + Number(params.value), + chartParams.unitType, + ).join(' ') + let desc = '' + switch (params.dataIndex) { + case 0: { + desc = 'P50' + break + } + case 1: { + desc = 'P90' + break + } + default: + break + } + return `${arr} (${desc})` + }, + }, + data: [ + { + name: 'P50', + yAxis: this.chartData[0].aggregation.p50 + ? this.chartData[0].aggregation.p50 + : 50, + }, + { + name: 'P90', + yAxis: this.chartData[0].aggregation.p90 + ? this.chartData[0].aggregation.p90 + : 90, + }, + ], + } this.chartOption.series[0].markLine = markLine }else { this.chartOption.series[0].markLine = [] diff --git a/src/views/charts/charts/chart-echart-mixin.js b/src/views/charts/charts/chart-echart-mixin.js index 0003fee7..7b347b9f 100644 --- a/src/views/charts/charts/chart-echart-mixin.js +++ b/src/views/charts/charts/chart-echart-mixin.js @@ -77,13 +77,13 @@ export default { return allZero } }, - loadEchart (chartNum) { + loadEchart (chartNum,refresh=false) { this.$emit('showLoading', true) try { - this.myChart.setOption(this.chartOption) + this.myChart.setOption(this.chartOption,refresh) this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart)) if (chartNum && chartNum == 2) { - this.myChart2.setOption(this.chartOption2) + this.myChart2.setOption(this.chartOption2,refresh) this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2)) } const _this = this