echarts 可以设置的echarts单位的偏移位置吗？

之前是知道echarts的X和Y是可以设置单位的。

但是设置单位的位置一直不好调整。

现在有时间，我们会回答一下上面标题的问题？

echarts 可以设置X和Y轴单位的偏移位置吗？答案是可以的。

通过 nameTextStyle 这个属性来处理

echarts柱状图Y轴上设置单位

yAxis: [{

  type: 'value',

  name: '(个)', //单位

  nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)

  //单位的样式设置

  nameTextStyle: {

      color: "green", //颜色

      padding: [15, 20, 15, 0], //间距分别是 上 右 下 左

  },

}]

当我们设置后，就会出现下面图的样式



为什么上面这两张图单位间距不一样

细心的小伙伴发现了。这两张图的间距是不一样的。

第一张的距离左边间距小。第二张图距离左侧间距较大。

那是什么原因导致两张图的间距不一样的呢？

有的小伙伴，可能会说：是你设置的间距不一样？

我可以很负责的说：不是的。设置的是同样的间距。

有些小伙伴可能会说：有没有可能是Y轴的数据不一样导致的？

恭喜这位小伙伴，猜对了。就是Y轴的数据大小不同而导致间距不一样的。

那有没有办法让单位距离左侧的间距是一样的呢

我在看echarts官方文档的时候（https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle.align）

发现了 align 属性。但是使用这个属性后 align:'left' 仍然是不可以办到的。

也就是说：单位距离左侧的间距是一样？ 这个是办不到的。

Y轴数据较小的情况

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>

<div style="width: 600px;height: 400px;background:#ccc"></div>

<script>

var mCharts = echarts.init(document.querySelector('div'))

var option = {

  tooltip: {

    trigger: 'axis',

    axisPointer: {

      type: 'shadow'

    }

  },

  grid: {

    left: '3%',

    right: '4%',

    bottom: '3%',

    containLabel: true

  },

    xAxis: [{

      type: 'category',

      data: ['1111', '2232', '2332', '2123'],

      axisTick: {

          alignWithLabel: true

      },

    }],

    yAxis: [{

      type: 'value',

      // 新增单位

      name: '(个)',

      nameLocation: 'end', // 在头部(也就是在在X轴的最底部)

      //间距

      nameTextStyle: {

          // align: 'center',

          color: "green",

          // verticalAlign: 'top',

          // 这个间距  分别是 上下右左

          padding: [15, 20, 15, 0],

      },

    }],

    series: [{

        name: '直接访问',

        type: 'bar',

        barWidth: '60%',

        data: [11, 41, 51, 16, 71]

    }]

};

mCharts.setOption(option)

</script>

</body>

</html>

Y轴数据较大的情况

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>

  <div style="width: 600px;height: 400px;background:#ccc"></div>

  <script>

    var mCharts = echarts.init(document.querySelector('div'))

    var option = {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

          type: 'shadow'

        }

      },

      grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

      },

      xAxis: [{

        type: 'category',

        data: ['1111', '2232', '2332', '2123'],

        axisTick: {

          alignWithLabel: true

        },

      }],

      yAxis: [{

        type: 'value',

        // 新增单位

        name: '(个)',

        nameLocation: 'end', // 在头部(也就是在在X轴的最底部)

        //间距

        nameTextStyle: {

          // align: 'center',

          color: "green",

          // verticalAlign: 'top',

          padding: [15, 20, 15, 0],

        },

      }],

      series: [{

        name: '直接访问',

        type: 'bar',

        barWidth: '60%',

        data: [11123, 41123, 51123, 16122, 712341]

      }]

    };

    mCharts.setOption(option)

  </script>

</body>

</html>

echarts设置单位的偏移的更多相关文章

  1. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  2. WPF canvas设置旋转角度和偏移位置

    /// <summary> /// 设置旋转角度和位置 /// </summary> /// <param name="Angle">角度< ...

  3. echarts设置toolTip大小和样式问题

    最近研究echarts,发现提示框太大,位置不合适问题, 用jq,css选中div的tooltip设置大小有时候不管用: 查了官网文档 http://echarts.baidu.com/option. ...

  4. echarts设置线条粗细

    series: [ { name:"buy", type:'line', data:[], itemStyle: { normal: { color: '#6cb041', lin ...

  5. Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

    需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些.     其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...

  6. Echarts 设置 图标 默认平铺 数据为零时绘画

    好久没写了 最近接了一个统计的功能  以前写的都是一些最基础的统计 废话少说  我先把自己遇到的问题列出来 仅供参考 __________________我是分割线__________________ ...

  7. echarts设置柱状图颜色渐变及柱状图粗细大小

    series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...

  8. echarts 设置默认选中，单选

    默认选中 和 不选中 传送门

  9. Echarts 设置Y轴 || X轴的刻度只显示整数

    目前的效果如下:(有小数) 想要的效果如下:(整数) 解决方案: 在配置项的yAxis或者xAxis对象中添加属性:minInterval: 1,表示将刻度的最小间距设置为1 注意: minInter ...

  10. echarts设置小图标位置

    // <!-- 左上角小图标 --> toolbox: { show : true, // orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // // ...

随机推荐

  1. 8种图数据库对 NULL 属性值支持情况

    摘要:在语义网等图模型中,遵循开放世界假设,对于数据中未包含的事实,都认为是未知的而非假的. 本文分享自华为云社区<图数据库对 NULL 属性值支持情况>,原文作者:你好_TT . NUL ...

  2. 看火山引擎DataLeap如何做好电商治理（一）：挑战与痛点

    现在人们的日常生活中,网购已经成为人们生活中不可或缺的购物形式.根据中国电子商会发布的<中国社交电商行业发展白皮书(2022)>的数据显示,2022年社交电商市场交易规模达到28542.8 ...

  3. Office 看不了激活更改产品密钥

    Office 看不了激活更改产品密钥 解决方案: PatchOffice.rar - 蓝奏云 将文件解压到桌面 >>> 右击,以管理员方式运行或双击运行均可 >>> ...

  4. 使用 Diffusers 通过 DreamBooth 来训练 Stable Diffusion.md

    邀请参与我们的 DreamBooth 微调编程马拉松活动! DreamBooth 是一种使用专门的微调形式来训练 Stable Diffusion 的新概念技术.一些人用他仅仅使用很少的他们的照片训练 ...

  5. STM32CubeMX教程15 ADC - 多重ADC转换

    1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK ...

  6. C#开源免费的Blazor图表库

    前言 今天分享一款基于ApexCharts.js封装的.C#开源免费的Blazor图表库:Blazor-ApexCharts. 10款值得推荐的Blazor UI组件库 全面的ASP.NET Core ...

  7. 【django-vue】课程表数据录入 课程分类接口 所有课程接口 课程详情接口 所有章节接口 课程列表前端 课程详情前端

    目录 上节回顾 APSchudler 双写一致性 今日内容 1 课程表数据录入 2 课程分类接口 2.1 路由 2.2 序列化类 2.3 视图类 3 所有课程接口(过滤,排序) 3.1 表模型 3.2 ...

  8. GitHub CEO发文：严格限制俄罗斯获取侵略性军事能力所需要的技术

    前几天,在微信群里就有小伙伴发了一些关于GitHub将限制俄罗斯开发人员使用开源软件的消息,引起程序员圈子的热烈讨论. 就在不久前,GitHub CEO在GitHub官方博客发文阐述了对乌克兰战争的回 ...

  9. POJ：1511 Invitation Cards（双向搜索最短路径）

    POJ :1511 http://poj.org/problem?id=1511 思路 求1号点到其他点的最短路 + 其他点到1号点的最短. 结果用long long. 用快读可以加快时间 代码 sp ...

  10. CF：706B. Interesting drink （二分查找）

    题意:不同奶茶店里同样的奶茶价格不同,问在当天Yuki持有的零钱能在几家店购买 思路:对价格数组排序,先优先判断是否会比较最大值和最小值,然后二分查找 #include<bits/stdc++. ...