vue echarts调整图表和标题的距离

矫情吗；* 2022-09-05 05:14 386阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

this.chart.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 10,
          containLabel: true,
        },
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1][]

this.chart.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 100,
          containLabel: true,
        },
    })

left：grid 组件离容器左侧的距离

`right`：grid 组件离容器右侧的距离

`bottom`：grid 组件离容器下侧的距离。

top：grid 组件离容器上侧的距离。

containLabel：区域是否包含坐标轴的刻度标签

[官网][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20220829/1df6cba704fc4b28bdbe686f87c4b303.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]: /images/20220829/5410260ceb7c4a4bb305d99e9b7ad8dc.png
[Link 1]: https://echarts.apache.org/zh/option.html#grid.containLabel

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 集成echarts 图表组件

第一步：本项目本地安装echarts cnpm install echarts -D 第二步：全局配置：项目/main.js 文件 // 引入echarts impor

桃扇骨/ 2023年10月18日 16:33/ 0 赞/ 180 阅读

相关 ECharts 图表标题(title)系列使用详解

title 说明：图表标题。 1 title.show 说明：是否显示标题组件。默认值：true。可选值：（1） true，显示标题。（2） fa

淡淡的烟草味﹌/ 2023年10月06日 13:17/ 0 赞/ 21 阅读

相关 ECharts 图表标题(title)系列设置

title:{ show:true,//false text:"图表标题",//主标题文本 textStyle:{

分手后的思念是犯贱/ 2023年10月05日 10:46/ 0 赞/ 22 阅读

相关 Vue+Echarts图表动态适配

目录前言一、问题背景二、解决方案 1.在Vue组件中引入Echarts 2.初始化图表 3.监听resize事件 4.销毁图表三、优化方案 1.防抖

太过爱你忘了你带给我的痛/ 2023年09月27日 20:03/ 0 赞/ 145 阅读

相关 Vue.js+ECharts：切换图表类型（图表工具栏）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

客官°小女子只卖身不卖艺/ 2023年06月30日 12:58/ 0 赞/ 29 阅读

相关 VUE + ECharts实现图表

因为这里演示了多种图表，使用的 echarts 引入方式是引入的所有组件，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。 1.安装echar

亦凉/ 2022年11月07日 14:34/ 0 赞/ 279 阅读

相关 vue echarts调整图表和标题的距离

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2N

矫情吗；*/ 2022年09月05日 05:14/ 0 赞/ 387 阅读

相关【备忘】EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

![这里写图片描述][70] 示例里工作一般情况是够用了，更复杂的可以查询教程： title 官方解说：http://echarts.baidu.com/option.ht

╰+哭是因爲堅強的太久メ/ 2022年05月19日 06:12/ 0 赞/ 1016 阅读

相关 Vue中使用echarts图表

一、安装引入echarts插件安装 npm install echarts -S 在main.js中配置引入 // 引入echarts i

水深无声/ 2022年05月19日 04:08/ 0 赞/ 313 阅读

相关 webpack+vue-cli生成echarts图表

之前在做毕设的时候生成过，可是过了很久了，都不太记得了，今天重新总结一下，方便以后用的时候直接有资料。 ![这里写图片描述][70] 这个是echarts中的玫瑰图 ![

淩亂°似流年/ 2022年05月17日 10:26/ 0 赞/ 254 阅读