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

矫情吗；* 2022-09-05 05:14 327阅读 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 条评论，327人围观）

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

相关阅读

相关 Vue 集成echarts 图表组件

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

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

相关 Vue+Echarts图表动态适配

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

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

相关 VUE + ECharts实现图表

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

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

相关 Vue使用echarts制作好看的图表（一）

Apache ECharts，一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 ECharts安装与卸载 > 安装

快来打我*/ 2022年11月03日 11:15/ 0 赞/ 600 阅读

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2N

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

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

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

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

相关 Vue中使用echarts图表

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

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

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

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

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

相关 Echarts图表的使用

一次分享会上知道了Echarts这个插件，刚好需要用到就去了解了一下，可以很方便地生成各种图表，在这里简单分享一下如何生成饼状图和柱状图，如果你想要更好的呈现你的图，可以去[E

淡淡的烟草味﹌/ 2022年04月14日 04:37/ 0 赞/ 290 阅读

相关 Echarts图表制作

<1>常用到的参数 `1)-i`：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 `2)-o`：生成的 bundle 文件，可以是绝对路径或者基于当前命

雨点打透心脏的1/2处/ 2022年04月02日 03:02/ 0 赞/ 319 阅读