子弹图一维

  const line11Engine = new EchartLine({
    container: line1.value,
    xAxisName: '北斗(GHz)',
    seriesData: [[0.5, 0.5], [1, 0.5], null, [2.5, 0.5], [4, 0.5]]
  })

import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
export default class EchartLine {
  constructor(opt) {
    this.myChart = echarts.init(opt.container)
    this.xAxisName = opt.xAxisName
    opt.seriesColor && (this.seriesColor = opt.seriesColor)
    opt.seriesData && (this.seriesData = opt.seriesData)

    this.setOptions(opt.container)
  }

  xAxisName = ''
  seriesColor = '#24b035'
  seriesData = [[0.5, 0.5], [1, 0.5], null, [2.5, 0.5], [4, 0.5]]
  setOptions(container) {
    const containerRect = container.getBoundingClientRect()
    // 设置宽度 保证刻度的长度一致
    // 获取多维数组的最大值
    const maxValue = Math.max.apply(null, this.seriesData.flat(Infinity))
    const option = {
      height: 50,
      width: Math.max(maxValue * 80, Math.ceil(containerRect.width)),
      grid: {
        top: 10,
        bottom: 0,
        containLabel: false,
        left: 100,
        right: 0
      },

      xAxis: {
        type: 'value',
        name: this.xAxisName,
        nameLocation: 'start',
        nameTextStyle: {
          color: '#ffffff',
          height: 50,
          verticalAlign: 'bottom',
          lineHeight: 50
        },
        boundaryGap: false,
        min: 0,
        max: Math.max(maxValue, Math.ceil(containerRect.width) / 80),
        interval: 1,
        axisTick: {
          inside: true
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        max: 1,
        min: 0,
        splitNumber: 2,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      series: [
        {
          data: this.seriesData,
          type: 'line',
          lineStyle: {
            width: 20,
            color: this.seriesColor
          },
          symbolSize: 0.1,
          label: {
            normal: {
              formatter: a => {
                return a.data[0]
              },
              color: '#ffffff',
              show: true,
              position: 'top',
              distance: 10
            }
          },
          smooth: true
        }
      ]
    }

    this.myChart.setOption(option)
  }
  resize() {
    this.myChart.resize()
  }
}