gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style：调整chart tooltip的显示

Browse Source
This commit is contained in:
zhangyu
2021-04-06 18:54:38 +08:00
parent 65b1eb40a5
commit 2b61063b44
2 changed files with 546 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -760,9 +760,8 @@ export default {
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
str += '<div style="padding-left: 10px;">'
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
str += '</div>'
if (previousItem) {
str += '<div style="padding-left: 10px;">'
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
@@ -777,9 +776,13 @@ export default {
}
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
str += '</div>'
str += '</span>'
} else if (tip.alias.indexOf('Previous ') !== -1) {
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
str += '</span>'
}
str += '</div>'
str += '</div>'
})
if (self.data.type === 'stackArea' || self.isStackArea) {
if (!self.stackTotalColor || self.stackTotalColor == '') {
@@ -1195,6 +1198,27 @@ export default {
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName} </div>`
str += '<div style="padding-left: 10px;">'
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
if (previousItem) {
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
}
let minusVal = 0
if (previousval <= val) {
minusVal = val - previousval
str += '+'
} else {
minusVal = previousval - val
str += '-'
}
str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
str += '</span>'
} else if (tip.alias.indexOf('Previous ') !== -1) {
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
str += '</span>'
}
str += '</div>'
if (previousItem) {
str += '<div style="padding-left: 10px;">'

31
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -17,16 +17,16 @@
</template>
<script>
import * as echarts from 'echarts'
import chartDataFormat from '../../../charts/chartDataFormat'
import loading from '../../../common/loading'
import chartConfig from './chartConfig'
import bus from '../../../../libs/bus'
import EleResize from '../../../common/js/divResize'
import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
// import * as mapGeoJson from "../../../common/js/world";
import * as echarts from 'echarts'
import chartDataFormat from '../../../charts/chartDataFormat'
import loading from '../../../common/loading'
import chartConfig from './chartConfig'
import bus from '../../../../libs/bus'
import EleResize from '../../../common/js/divResize'
import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
// import * as mapGeoJson from "../../../common/js/world";
export default {
export default {
name: 'chart',
components: {
loading: loading
@@ -437,11 +437,9 @@
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}: </div>`
str += '<div style="padding-left: 10px;">'
str += chartDataFormat.getUnit(this.unit).compute(val, null, 2)
str += '</div>'
const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
if (previousItem) {
str += '<div style="padding-left: 10px;">'
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
if (previousval === 0) {
previousval = Number(item.data[1]).toExponential(2)
@@ -456,9 +454,14 @@
}
str += chartDataFormat.getUnit(this.unit).compute(minusVal, null, 2)
str += '</div>'
str += '</span>'
} else if (alias.indexOf('Previous ') !== -1) {
str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
str += '</span>'
}
str += '</div>'
str += '</div>'
})
str += '</div>'
return str
@@ -594,7 +597,7 @@
EleResize.off(this.$el, this.resize, this.chartType); */
}
}
}
}
</script>
<!--<style>
@import "../../../charts/chart.scss";