echarts中x轴与x轴网格线不对应问题

安装导入echarts

npm install echarts --save

引入并设置echarts容器

<template>
    <!--图表内容区域，必须给 ECharts 容器本身指定高度。不然它会使用默认高度-->
    <div class = "chart">
      <div id = "echarts" style = "height: 17.5rem"></div>
    </div>
</template>

  <script>
  import echarts from 'echarts/lib/echarts'
  import 'zrender/lib/svg/svg'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/candlestick'
  import chartUtil from '../../utils/chartUtil'

  export default {
    name: 'quotation',
    data () {
      return {
        chart: null,
      }
    },
    mounted () {
      //初始化 ECharts 实例，不能在created生命周期内初始化，因为那时候DOM还没有渲染，是找不到元素的
      this.initChart()
    },
    beforeDestroy () {
      //组件销毁前先销毁 ECharts 实例
      if (!this.chart) { return }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart () {
        // 基于准备好的dom，初始化echarts实例,移动端建议使用 svg模式
        this.chart = echarts.init(document.getElementById('echarts'), 'light', {renderer: 'svg'})
        this.chart.setOption(chartUtil.lineOption())

        //图标根据窗口大小自动缩放
        // window.addEventListener("resize", this.chart.resize);
      },
    },
  }
</script>

echarts在vue中使用详细文档请见： 在 VUE 项目中使用 ECharts 画 K 线图和面积图，并且可切换

设置echarts配置项

let option = {
  //grid直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
  grid: {
    top: 10,
    bottom: 20,
    left: 25,
    right: 25,
  },
  //xAxis直角坐标系 grid 中的 x 轴
  xAxis: {
    type: 'category',//类型分为类目轴：category，数值轴：value,时间轴：time,对数值:log
    splitNumber: 6,//坐标轴分割段数，在类目轴无效
    boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样,设置false x轴与网格线对齐
    data:['周一','周二','周三','周四','周五','周六','周一','周二','周三','周四','周五','周六'],
    scale: true,
    gridIndex:0,
    //axisLabel:坐标轴刻度标签的相关设置。
    axisLabel: {
      color: '#A0A0A0',
      fontSize: 10,
      interval:'auto',
    },
    //axisLine:坐标轴轴线相关设置
    axisLine: {
      show:false,
      lineStyle: {
        color: '#A0A0A0',
      },
    },
    //刻度线
    axisTick:{
      show:false
    },
    //网格线
    splitLine: {
      show:true,
      lineStyle: {
        color: '#EEEEEE',
      },
    },
  },
  yAxis: {
    show : false,//是否显示y轴
    scale: true,//只在数值轴中有效
    // position: 'right',//坐标轴显示的位置
    axisLabel: {
      color: '#A0A0A0',
      fontSize: 10,
      inside: true,
    },
    axisLine: {
      show:false,
      lineStyle: {
        color: '#A0A0A0',
      },
    },
    splitLine: {
      show:false,
      lineStyle: {
        color: '#EEEEEE',
      },
    },
  },
  series:{
    type:'line',
    data:[120, 132, 101, 134, 90, 230,120, 132, 101, 134, 90, 230],
    smooth:true,
    itemStyle:{
      color:'#c8a7ff',
      opacity:0.1
    },
    lineStyle:{
      width:2,
      color:'#c8a7ff'
    },
  },
};
export default class chartUtil {
  static lineOption = (chartData) => {
    return option
  }
}

未设置xAxis.boundaryGap时图表显示x轴也x轴网格线未对齐

设置xAxis.boundaryGap ：false时图表显示x轴与z轴线对应