echats设置x坐标从0开始，设置x坐标从原点开始。echart文档中的搜索

电脑版发表于：2022/12/9 15:03

在x坐标设置boundaryGap: false即可.

**官方文档：**
https://echarts.apache.org/zh/option.html#xAxis.boundaryGap

可以直接放到输入框搜索
![](https://img.tnblog.net/arcimg/notebook/fd03aeae5a9245b9a0bf948f244dddcd.png)

**完整代码**
```
mounted() {
    this.testChart()
},
// 组件方法
methods: {
    testChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
        let option = {
            // 图表颜色设置
            color: ['#409EFF', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
            // title: {
            //     text: '学习时长趋势（日时长）',
            //     textAlign: 'left',
            //     left: '27px',
            //     top: 10,
            //     textStyle: {
            //         fontSize: '16px',
            //         fontFamily: 'Microsoft YaHei'
            //     }
            // },
            grid: {
                top: '10%',
                left: '3%',
                right: '3%',
                bottom: '6%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu'],
                //****************不留白，从原点开始**************
                boundaryGap: false // 不留白，从原点开始
                //data: ['Mon', 'Tue', 'Wed', 'Thu',"1","3","5","7","8","9"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [32, 51, 41, 49],
                    //data: [32, 51, 41, 49,55,60,30,39,50,22],
                    type: 'line',
                    //显示出来折线图的面积
                    areaStyle: {
                        normal: {
                            // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(80,141,255,0.39)'
                            }, {
                                offset: 0.34,
                                color: 'rgba(56,155,255,0.25)'
                            }, {
                                offset: 1,
                                color: 'rgba(38,197,254,0.00)'
                            }])
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
}
```

TeachingNote

echats设置x坐标从0开始，设置x坐标从原点开始。echart文档中的搜索

{{item.title}}