perf: 代码format
This commit is contained in:
chenjinsong
@@ -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
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user