grid设置怎么改(分享echarts如何调整边距)

网站编辑01 2022-07-28 17:25:52 阅读:32

  前端玉面在使用echarts进行可视化开发时,会遇到调整四周边距的需求,这时候我们可以通过添加grid属性来调整边距,下面我给大家介绍下echarts如何调整边距

  1.打开编辑器,在编辑器中新建一个test.html,用来讲解今天的内容

  2.在test.html头部引入echarts插件:echarts.min.js,插件可以去去echarts官网进行下载

  3.在body标签内定义一个div,用来作为图表的容器,并且在标签上给div设置宽高(宽高必须设置,不然图表显示不出来)

grid设置怎么改(分享echarts如何调整边距)

  4.在script标签内通过获取div,然后生成一个柱状图

  5.添加grid属性,通过改变grid属性内的top,left,right,bottom四个属性的值来调整图表的边距

  6.代码写好后,在浏览器中打开页面,会发现图表四周会多出来空白,这就是grid属性设置后的效果了。

二维码