tnblog
首页
视频
资源
登录

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

7312人阅读 2022/12/9 11:52 总访问:891532 评论:0 收藏:0 手机
分类: 前端

echart设置边距是使用grid

  1. //设置图标边距
  2. grid: {
  3. top: '10%',
  4. left: '3%',
  5. right: '3%',
  6. bottom: '6%',
  7. containLabel: true
  8. }

官方文档:
https://echarts.apache.org/zh/option.html#grid

在整体当中的位置

  1. mounted() {
  2. this.testChart()
  3. },
  4. // 组件方法
  5. methods: {
  6. testChart() {
  7. // 基于准备好的dom,初始化echarts实例
  8. let myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))
  9. let option = {
  10. // title: {
  11. // text: '学习时长趋势(日时长)',
  12. // textAlign: 'left',
  13. // left: '27px',
  14. // top: 10,
  15. // textStyle: {
  16. // fontSize: '16px',
  17. // fontFamily: 'Microsoft YaHei'
  18. // }
  19. // },
  20. //****************设置图标边距**************
  21. grid: {
  22. top: '10%',
  23. left: '3%',
  24. right: '3%',
  25. bottom: '6%',
  26. containLabel: true
  27. },
  28. xAxis: {
  29. type: 'category',
  30. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  31. },
  32. yAxis: {
  33. type: 'value'
  34. },
  35. series: [
  36. {
  37. data: [150, 230, 224, 218, 135, 147, 260],
  38. type: 'line'
  39. }
  40. ]
  41. };
  42. myChart.setOption(option);
  43. }
  44. }

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

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

在x坐标设置boundaryGap: false即可. 官方文档:https://echarts.apache.org/zh/option.html#xAxis.boundaryGap 可以直接...

生成通用的边距样式边距、内边距全局样式。字体大小全局样式。通用全局样式封装vue公共样式封装

样式代码如下: <style lang="scss"> /* 外边距、内边距全局样式 ------------------------------- ...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框据输入动态加载数据 jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页.net core分部页

.net分部页的三种方式第一种:@Html.Partial("_分部页")第二种:@{ Html.RenderPartial("分部页");}...

css中单位pxemrem和vh/vw的理解

>px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式iis设置mime类型iis配置支持的类型

webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现无视文件大小上传以及datatables基本用法

首先明白js是客户带执行代码,c#是服务器上执行代码。本地文件需要用到js处理,服务器端接受c#代码处理1.HTML页面,文件信...

如何使用图标像使用文字一样使用文本图标的方法

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标;注意:每个类型的图标会大小不...

使用七牛云的cdn服务提高图片的加载速度

CDN介绍CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,...

通俗易懂什么是.NET?什么是.NET Framework?什么是.NET Core?

朋友圈@蓝羽 看到一篇文章写的太详细太通俗了,搬过来细细看完,保证你对.NET有个新的认识理解原文地址:https://www.cnblo...

JS监听input、keydown有输入法时打字完成后触发事件

在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到c...

修改了css后让浏览器从缓存中更新

当我们修改了css后,如果不做一些操作,浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...
这一生多幸运赶上过你.
排名
8
文章
243
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术