echats 边距，间距。echart设置图表边距,间距

电脑版发表于：2022/12/9 11:52

**echart设置边距是使用grid**
```
//设置图标边距
grid: {
    top: '10%',
    left: '3%',
    right: '3%',
    bottom: '6%',
    containLabel: true
}
```

官方文档：
https://echarts.apache.org/zh/option.html#grid

**在整体当中的位置**
```
mounted() {
    this.testChart()
},
// 组件方法
methods: {
    testChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
        let option = {
            // 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', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        myChart.setOption(option);
    }
}
```

TeachingNote

echats 边距，间距。echart设置图表边距,间距

{{item.title}}