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. 教你从零搭建Web漏洞靶场OWASP Benchmark

    摘要:Owasp benchmark 旨在评估安全测试工具的能力(准确率.覆盖度.扫描速度等等),量化安全测试工具的扫描能力,从而更好得比较各个安全工具优缺点. 本文分享自华为云社区<Web漏洞 ...

  2. 10倍！BoostKit鲲鹏全局缓存3大创新技术助力Ceph性能提升

    摘要:本文从四个方面阐述了BoostKit鲲鹏全局缓存技术,该技术针对Ceph开源存储方案存在的痛点,采用三大创新技术,有效的提高了Ceph的性能,最高可以将Ceph性能提升10倍. 本文分享自华为云 ...

  3. Solon2 接口开发: 了解 LoadBalance

    上一文的代码 HttpUtils.http(sevName, ctx.path()) (来自 "solon.cloud.httputils" 插件的工具类),内部是通过 sevNa ...

  4. Solon2 开发之插件，一、插件

    Solon Plugin 是框架的核心接口,简称"插件".其本质是一个"生命周期"接口.它可让一个组件类参与程序的生命周期过程(这块看下:<应用启动过程与 ...

  5. 解密Prompt系列23.大模型幻觉分类&归因&检测&缓解方案脑图全梳理

    上一章我们主要聊聊RAG场景下的幻觉检测和解决方案,这一章我们单独针对大模型的幻觉问题,从幻觉类型,幻觉来源,幻觉检测,幻觉缓解这四个方向进行整理.这里就不细说任意一种方法了,因为说不完根本说不完,索 ...

  6. Github 自建一个 Helm Charts 库

    前言 在构建私有的 charts 仓库之前,有几个先决条件: Helm 已经安装,版本号是 v3 拥有一个 Github 账号 初始化仓库 在 github 仓库上新建一个仓库,我这里命名为 helm ...

  7. AliAGC 自动增益控制算法：解决复杂场景下的音量问题

    音视频会议,直播连麦以及短视频已经成为人们工作.教学以及娱乐的一部分,其背后都离不开音视频实时通信等关键技术的广泛应用.音频方面,可预见的是客户业务形式的多样性,环境的复杂性,以及接入设备的差异性会带 ...

  8. c中常用的字符串操作

    c中常用的字符串操作 头文件:<string.h> 1.strchr()查找某字符在字符串中首次出现的位置 strchr() 用来查找某字符在字符串中首次出现的位置,其原型为: char ...

  9. 【C++第三方库】Windows下编译和使用 WebSocket++/WebSocketpp

    应用场景: 使用C++开发一个支持websocket协议的服务进程,可与HTML5(浏览器js文件)通信.来实现替换基于firebreath框架的跨浏览器插件开发. 当前,讲述websocketpp开 ...

  10. 【每日一题】35. [CQOI2009]中位数图 (前缀和，贡献值计算)

    补题链接:Here 算法涉及:前缀和,贡献值计算 经典中位数计数问题,记得以前百度之星也出过类似的题,这道题有一个限定范围是要奇数区间的 我们很容易想到,奇数下标到偶数下标或者偶数下标到奇数下标的长度 ...