echarts的折线图重叠问题?

image.png
如图,本来是一条折线,但是出现的重叠,一个横坐标上多个Y值。
检查了数据也是没问题的image.png

<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>
阅读 2.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题