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

fix： 修改 Y轴显示

Browse Source
This commit is contained in:
zhangyu
2021-12-23 18:35:29 +08:00
parent 551d3288ab
commit 8128de517f
4 changed files with 124 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -10,6 +10,7 @@
:chart-data="chartData"
:chart-info="chartInfo"
:legends="legends"
:series="series"
:is-fullscreen="isFullscreen"
></chart-legend>
</div>
@@ -41,7 +42,8 @@ export default {
data () {
return {
stackTotalColor: null,
isStack: false
isStack: false,
series: []
}
},
computed: {
@@ -70,15 +72,17 @@ export default {
methods: {
initChart (chartOption = this.chartOption) {
this.legends = []
chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
if (this.isNoData) {
return
}
const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
const { minTime, maxTime, minValue, maxValue, copies, unit, dot } = this.getMinMaxFromData(this.chartData, this.chartInfo.unit) // 此处时间是秒
chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒
chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
chartOption.tooltip.position = this.tooltipPosition
chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue)
chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, dot)
chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
if (chartOption.toolbox.feature) {
chartOption.toolbox.feature.myStack.iconStyle.borderColor = this.isStack ? this.toolboxIconColor.active : this.toolboxIconColor.inactive
chartOption.toolbox.feature.myStack.onclick = this.stackEvent() // 自定义stack事件
@@ -91,7 +95,7 @@ export default {
this.isInit = false
}, 200)
},
getMinMaxFromData (originalDatas) {
getMinMaxFromData (originalDatas, chartUnit = 2) {
let minTime = null
let maxTime = null
let minValue = null
@@ -113,7 +117,27 @@ export default {
maxTime = timeSorted.length ? timeSorted[timeSorted.length - 1][0] : ''
minValue = valueSorted.length ? valueSorted[0][1] : ''
maxValue = valueSorted.length ? valueSorted[valueSorted.length - 1][1] : ''
return { minTime, maxTime, minValue, maxValue }
const unit = chartDataFormat.getUnit(chartUnit)
maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii) // 取最大值后 需要对其进行取整
let oldValue = maxValue
let dot = 0
if (oldValue == 1) {
dot++
}
if (oldValue > 10) {
while (oldValue > 10) {
oldValue = oldValue / 10
}
} else if (oldValue < 1 && maxValue !== 0) {
while (oldValue < 1 && oldValue > 0) {
oldValue = oldValue * 10
dot++
}
maxValue = Math.floor(oldValue) / Math.pow(10, dot)
dot++
}
const copies = chartDataFormat.copies(oldValue, unit.type)
return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
},
xAxisLabelFormatter (minTime, maxTime) {
return function (val, index) {
@@ -232,25 +256,25 @@ export default {
return str
}
},
yAxisLabelFormatter (minValue, maxValue) {
yAxisLabelFormatter (minValue, maxValue, copies, unit, dot) {
const self = this
return function (val, index) {
const value = formatScientificNotation(val, 2)
let chartUnit = self.chartInfo.unit
chartUnit = chartUnit || 2
const unit = chartDataFormat.getUnit(chartUnit)
// TODO 弄清楚dot逻辑
/* if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
// dot是判断最大值是否 小于1 大于1 默认是2 小于1 需要判断最大值是小数点后面几位
if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) { // 当其小于1 且 dot < 2 默认給2 如 0.9 dot为1
dot = 2
}
if (dot == 0) {
dot = 1
if (!dot) { // 默认是2
dot = 2
}
dot = bus.countDecimals(value)
if (dot < self.chartDot) {
if (dot < self.chartDot) { // 根据具体值计算
dot = self.chartDot
} */
return unit.compute(value, index, -1, 2)
}
return unit.compute(value, index, -1, dot)
}
},
stackEvent () {

82
nezha-fronted/src/components/chart/chart/legend.vue
View File

@@ -39,13 +39,15 @@
<script>
import lodash from 'lodash'
import { getChart } from '@/components/common/js/common'
import chartDataFormat from '@/components/charts/chartDataFormat'
export default {
name: 'chartLegend',
props: {
chartInfo: Object,
chartData: Array,
legends: Array,
isFullscreen: Boolean
isFullscreen: Boolean,
series: Array
},
data () {
return {
@@ -100,8 +102,86 @@ export default {
})
this.$set(this.isGrey, index, !this.isGrey[index])
}
// 处理点击后的 Y轴
const chartInfo = this.chartInfo
const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.copies
const unit = maxValueCopies.unit
const option = {
yAxis: {
minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
}
}
if (!maxValueCopies.copies) {
option.yAxis.min = 0
option.yAxis.max = 1
} else {
option.yAxis.max = undefined
}
if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
delete option.yAxis.maxInterval
}
getChart(this.chartId) && getChart(this.chartId).setOption({
yAxis: {
...option.yAxis
}
})
}
},
getMaxValue (dataArg, chartInfo) {
let maxValue = 0
let minValue = 0
if (chartInfo.unit && dataArg.length > 0) {
maxValue = 0
minValue = 0
for (let j = 0; j < dataArg.length; j++) {
for (let i = 0; i < dataArg[j].data.length; i++) {
if (!isNaN(dataArg[j].data[i][1])) {
maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
}
}
}
}
const chartUnit = chartInfo.unit ? chartInfo.unit : 2
const unit = chartDataFormat.getUnit(chartUnit)
minValue = minValue > 0 ? 0 : minValue
maxValue = maxValue - minValue
maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
let oldValue = maxValue
let dot = 0
if (maxValue == 1) {
dot++
}
if (oldValue > 10) {
while (oldValue > 10) {
oldValue = oldValue / 10
}
} else if (oldValue < 1 && maxValue !== 0) {
while (oldValue < 1 && oldValue > 0) {
oldValue = oldValue * 10
dot++
}
maxValue = Math.floor(oldValue) / Math.pow(10, dot)
dot++
}
const copies = chartDataFormat.copies(oldValue, unit.type)
let oldDot = 2
if (maxValue <= 1) {
oldDot = dot > 6 ? 6 : dot
}
return {
maxValue,
dot,
copies,
minValue,
unit,
oldDot
}
},
},
watch: {
legends (n) {

6
nezha-fronted/src/components/chart/chart/tools.js
View File

@@ -159,11 +159,11 @@ export function getLayoutPosition (arr) {
export function initColor (colorNum = 20) {
const colorList = [
'#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
'#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
'#3685FF', '#00DCA2', '#00BFD0', '#954Eff',
'#FFCB01', '#f65A96', '#FF9094', '#00CCF5',
'#FF8BEA', '#4D7693', '#72577C', '#99D750',
'#DD8270', '#C475EE', '#7E83FB', '#7EB090',
'#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
'#CF6684', '#4E55FF', '#FF8D00', '#FF5200'
]
for (let i = 0; i < colorNum - 20; i++) {
colorList.push(randomcolor())

2
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -227,7 +227,7 @@
</li>
<!-- 最开始的input框-->
<li class="select_input" v-if="change_sreach_show">
<input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" :id="'one-input' + position" @keydown="clear_search_list" :placeholder="placeholder">
<input type="text" autocomplete="off" @click="read_input" v-model="no_condition" @keyup="enter_one" :id="'one-input' + position" @keydown="clear_search_list" :placeholder="placeholder">
</li>
</ul>
</el-scrollbar>