如图,本来是一条折线,但是出现的重叠,一个横坐标上多个Y值。
检查了数据也是没问题的
<template>
<div class="chart" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import monitorMixin from './mixin.js'
import { micrometerHandle } from '@/utils/tool.js'
export default {
name: 'K8sChart',
mixins: [monitorMixin],
props: {
mulChartData: {
type: Array
},
type: {
type: String
}
},
data() {
return { myChart: null }
},
mounted() {
this.draw()
window.addEventListener('resize', this.resizeChart)
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeChart)
},
computed: {
_mulChartData() {
return this.mulChartData
}
},
methods: {
setYAxis() {
const obj = {
type: 'value',
boundaryGap: [0, '100%'],
axisLabel: {
formatter: (value) => {
// return this.formatChartYData(value, this.type)
return micrometerHandle(value)
}
}
}
if (
[
'mysql_global_status_com_update',
'mysql_global_status_slow_queries_per_second',
'mysql_global_status_created_tmp_files_per_second'
].indexOf(this.type) !== -1
) {
return Object.assign(obj, {
minInterval: 1
// interval: 1, // 步长
// min: 1 // 起始
})
} else {
return obj
}
},
resizeChart() {
this.myChart && this.myChart.resize()
},
draw() {
const chartDom = this.$refs.chart
this.myChart = echarts.init(chartDom)
const option = {
grid: {
top: 20,
bottom: 10,
left: 23,
right: 23,
containLabel: true
},
color: [
'rgba(250, 131, 52, 1)',
'rgba(250, 173, 21, 0.8)',
'rgba(245, 33, 45, 1)',
'rgba(44, 141, 255, 1)',
'rgba(250, 219, 20, 1)',
'rgb(82, 196, 26)',
'rgb(36, 11, 12)',
'rgb(24, 144, 255)',
'rgba(0, 0, 0, 0.08)'
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
formatter: (params, ticket, callback) => {
const str = params
.map((o) => {
return `
${o.seriesName}:${o.value[1]}
`
})
.join('<br/>')
return `
${dayjs(params[0].value[0]).format('MM/DD HH:mm:ss')}
<br/>
${str}
`
},
position: 'left'
},
legend: {
orient: 'vertical',
right: '20px',
top: '26px'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
formatter: (value) => {
return dayjs(+value)
.format('MM/DD HH:mm:ss')
.split(' ')
.join('\r\n')
}
}
},
yAxis: this.setYAxis(),
series: this._mulChartData.map((o) => {
return {
name: this.findLabelFromValue(o.metric.pod || o.metric.__name__ || o.metric.job, this.k8sTargetList),
type: 'line',
smooth: true,
symbol: 'circle',
// sampling: 'lttb',
symbolSize: 1,
data: o.values.map((v) => {
return [v[0] * 1000, this.formatY(o.metric.pod || o.metric.__name__ || o.metric.job, v[1])]
})
}
})
}
option && this.myChart.setOption(option, true)
},
formatY(type, v) {
if (v == null) {
return null
}
v = Number(v)
return Number.isInteger(v) ? v : v.toFixed(2)
}
}
}
</script>
<style lang="scss" scoped>
.chart {
height: 100%;
}
</style>