Echarts x轴数据第一个值与坐标轴原点重合

Echarts x轴数据第一个值与坐标轴原点重合

vue 项目中Echarts避坑系列

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、官方demo,想要实现的样子？

二、我遇到的问题

我的代码

initChart () {
        this.myChartOne = this.$echarts.init(document.getElementById('myChart'))
        const option = {
          title: {
            text: '异常数据趋势'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2021-01-08', '2021-01-09', '2021-01-10', '2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14'] // x轴数据
          },
          yAxis: {
            type: 'value',
            splitLine: {show: false}
          },
          series: [
            {
              name: '异常数据',
              type: 'bar',
              stack: '总量',
              data: [0, 0, 0, 0, 0, 0, 0]// y轴数据
            }
          ]
        }
        this.myChartOne.setOption(option)
      },

三、具体解决

把数据格式也打印出来了，网上也找了很多例子，还是没有解决，最终我只能把官方demo的代码从头到尾copy到我的组件中，问题解决。
代码如下（示例）：

title: {
      text: '7天内总异常数据趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xData.reverse()
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: yData.reverse(),
      type: 'bar'
    }]

---

总结

copy是个好东西，有时候避坑。