diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue index eabd0df4..6a4054e9 100644 --- a/src/views/charts/charts/ChartEchart.vue +++ b/src/views/charts/charts/ChartEchart.vue @@ -14,21 +14,21 @@ import { legendMapping } from '@/views/charts/charts/chart-table-title' export default { name: 'ChartEchart', mixins: [chartEchartMixin], - data() { + data () { return {} }, props: { resultType: Object, - chartInfo: Object, + chartInfo: Object }, - setup(props) { + setup (props) { return { isEchartsPie: isEchartsPie(props.chartInfo.type), - isEchartsLine: isEchartsLine(props.chartInfo.type), + isEchartsLine: isEchartsLine(props.chartInfo.type) } }, methods: { - initEcharts(id) { + initEcharts (id) { this.initDom(id) const chartParams = this.chartInfo.params if (chartParams.showLegend === false) { @@ -42,11 +42,11 @@ export default { ...this.chartOption.series[0], radius: ['30%', '45%'], label: { - show: false, + show: false }, labelLine: { - show: false, - }, + show: false + } } this.chartOption.legend = { ...this.chartOption.legend, @@ -59,14 +59,14 @@ export default { // return echarts.format.truncateText(name, 6, '…'); }, tooltip: { - show: true, + show: true }, textStyle: { // 图例文字的样式 color: '#666666', fontSize: 12, - fontWeight: 400, - }, + fontWeight: 400 + } } let chartDataTmp = [] let otherData = [] @@ -99,7 +99,7 @@ export default { name: lineToSpace(d.name), data: d, value: parseInt(d.num), - unitType: chartParams.unitType ? chartParams.unitType : 'number', + unitType: chartParams.unitType ? chartParams.unitType : 'number' } }) } else { @@ -108,7 +108,7 @@ export default { name: lineToSpace(d.name), data: d, value: parseInt(d.num), - unitType: chartParams.unitType ? chartParams.unitType : 'number', + unitType: chartParams.unitType ? chartParams.unitType : 'number' } }) } @@ -122,26 +122,26 @@ export default { ] ? legendMapping[ `${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}` - ] + ] : humpToSpace(r.legend), data: r.values.map((v) => [ Number(v[0]) * 1000, Number(v[1]), - chartParams.unitType, - ]), + chartParams.unitType + ]) } if (this.isEchartsLine) { serie.data = serie.data.slice(1, serie.data.length - 2) - if (this.chartData.length === 1) {//只有一条曲线 + if (this.chartData.length === 1) { // 只有一条曲线 serie.markLine = { silent: true, symbol: 'none', label: { distance: [-50, 0], - formatter(params) { + formatter (params) { const arr = unitConvert( - Number(params.value), - chartParams.unitType, + Number(params.value), + chartParams.unitType ).join(' ') let desc = '' switch (params.dataIndex) { @@ -157,25 +157,25 @@ export default { break } return `${arr} (${desc})` - }, + } }, data: [ { name: 'P50', yAxis: this.chartData[0].aggregation.p50 ? this.chartData[0].aggregation.p50 - : 50, + : 50 }, { name: 'P90', yAxis: this.chartData[0].aggregation.p90 ? this.chartData[0].aggregation.p90 - : 90, - }, - ], + : 90 + } + ] } - } else if(this.chartData.length > 1){//有多条曲线 - this.handleLegendClick()//自定义legend的点击事件 + } else if (this.chartData.length > 1) { // 有多条曲线 + this.handleLegendClick()// 自定义legend的点击事件 } } return serie @@ -191,74 +191,74 @@ export default { value, index, a, - b, + b ) { return unitConvert(value, unitTypes.byte).join(' ') } this.chartOption.grid = { ...gridTemplate, top: gridTop, - left: 75, + left: 75 } } else { this.chartOption.grid = { ...gridTemplate, - top: gridTop, + top: gridTop } } this.loadEchart() }, - //点击前,高亮legend个数 - getSelectedNum(params){ + // 点击前,高亮legend个数 + getSelectedNum (params) { let selectedNum = 0 - let legendItem = params.selected - for(let name in legendItem){ - if(name === params.name){ - if(!legendItem[name]){ + const legendItem = params.selected + for (const name in legendItem) { + if (name === params.name) { + if (!legendItem[name]) { selectedNum = selectedNum + 1 } - }else { - if(legendItem[name]){ + } else { + if (legendItem[name]) { selectedNum = selectedNum + 1 } } } return selectedNum }, - //点击后:高亮legend个数 - getAfterSelectedNum(params){ + // 点击后:高亮legend个数 + getAfterSelectedNum (params) { let selectedNum = 0 - let legendItem = params.selected - for(let name in legendItem){ - if(legendItem[name]){ - selectedNum = selectedNum + 1 - } + const legendItem = params.selected + for (const name in legendItem) { + if (legendItem[name]) { + selectedNum = selectedNum + 1 + } } return selectedNum }, - //自定义legend的点击事件:此方法只处理多条曲线的情况(单条曲线正常切换legend和曲线) - handleLegendClick(){ + // 自定义legend的点击事件:此方法只处理多条曲线的情况(单条曲线正常切换legend和曲线) + handleLegendClick () { const self = this // legend点击事件 this.myChart.off('legendselectchanged') this.myChart.on('legendselectchanged', function (params) { - let legendNum = Object.keys(params.selected).length - let selectedNum = self.getSelectedNum(params) + const legendNum = Object.keys(params.selected).length + const selectedNum = self.getSelectedNum(params) - let legendItem = params.selected - if(selectedNum === legendNum){//点击前:全部曲线高亮 - for(let name in legendItem){ + const legendItem = params.selected + if (selectedNum === legendNum) { // 点击前:全部曲线高亮 + for (const name in legendItem) { if (name === params.name) { legendItem[name] = true - }else { + } else { legendItem[name] = false } } - }else if(selectedNum === 1 && !params.selected[params.name]){//点击前:多条曲线,且只有一条曲线高亮时 - for(let name in legendItem){ + } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前:多条曲线,且只有一条曲线高亮时 + for (const name in legendItem) { legendItem[name] = true } } @@ -268,28 +268,28 @@ export default { } }) - if(self.getAfterSelectedNum(params) === 1){//点击后只有一条曲线高亮 + if (self.getAfterSelectedNum(params) === 1) { // 点击后只有一条曲线高亮 const chartParams = self.chartInfo.params - //多条曲线,且只有一条曲线高亮时,显示P50 P90 分位值,不止一个时隐藏标线 + // 多条曲线,且只有一条曲线高亮时,显示P50 P90 分位值,不止一个时隐藏标线 let selectedName = '' - for(let name in legendItem){ - if(legendItem[name]){ + for (const name in legendItem) { + if (legendItem[name]) { selectedName = name } } - let serieArray = [] - self.chartOption.series.forEach((item,i) =>{ - if(item.name === selectedName){ - let markLine = { + const serieArray = [] + self.chartOption.series.forEach((item, i) => { + if (item.name === selectedName) { + const markLine = { silent: true, symbol: 'none', label: { distance: [-50, 0], - formatter(params) { + formatter (params) { const arr = unitConvert( - Number(params.value), - chartParams.unitType, + Number(params.value), + chartParams.unitType ).join(' ') let desc = '' switch (params.dataIndex) { @@ -305,43 +305,43 @@ export default { break } return `${arr} (${desc})` - }, + } }, data: [ { name: 'P50', yAxis: self.chartData[i].aggregation.p50 - ? self.chartData[i].aggregation.p50 - : 50, + ? self.chartData[i].aggregation.p50 + : 50 }, { name: 'P90', yAxis: self.chartData[i].aggregation.p90 - ? self.chartData[i].aggregation.p90 - : 90, - }, - ], + ? self.chartData[i].aggregation.p90 + : 90 + } + ] } item.markLine = markLine } serieArray.push(item) }) self.myChart.setOption({ - series:serieArray + series: serieArray }) - } else {//不止一条线高亮时隐藏标线 - let serieArray = [] - self.chartOption.series.forEach((item,i) =>{ + } else { // 不止一条线高亮时隐藏标线 + const serieArray = [] + self.chartOption.series.forEach((item, i) => { item.markLine = [] serieArray.push(item) }) self.myChart.setOption({ - series:serieArray + series: serieArray }) } }) } - }, + } }