echarts设置单位的偏移
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设置单位的偏移的更多相关文章
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- WPF canvas设置旋转角度和偏移位置
/// <summary> /// 设置旋转角度和位置 /// </summary> /// <param name="Angle">角度< ...
- echarts设置toolTip大小和样式问题
最近研究echarts,发现提示框太大,位置不合适问题, 用jq,css选中div的tooltip设置大小有时候不管用: 查了官网文档 http://echarts.baidu.com/option. ...
- echarts设置线条粗细
series: [ { name:"buy", type:'line', data:[], itemStyle: { normal: { color: '#6cb041', lin ...
- Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...
- Echarts 设置 图标 默认平铺 数据为零时绘画
好久没写了 最近接了一个统计的功能 以前写的都是一些最基础的统计 废话少说 我先把自己遇到的问题列出来 仅供参考 __________________我是分割线__________________ ...
- echarts设置柱状图颜色渐变及柱状图粗细大小
series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...
- echarts 设置默认选中，单选
默认选中 和 不选中 传送门
- Echarts 设置Y轴 || X轴的刻度只显示整数
目前的效果如下:(有小数) 想要的效果如下:(整数) 解决方案: 在配置项的yAxis或者xAxis对象中添加属性:minInterval: 1,表示将刻度的最小间距设置为1 注意: minInter ...
- echarts设置小图标位置
// <!-- 左上角小图标 --> toolbox: { show : true, // orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // // ...
随机推荐
- 全文手敲代码，教你用Java实现扫雷小游戏
摘要:本程序共封装了五个类,分别是主类GameWin类,绘制底层地图和绘制顶层地图的类MapBottom类和MapTop类,绘制底层数字的类BottomNum类,以及初始化地雷的BottomRay类和 ...
- 火山引擎DataTester：AB实验平台未来演进趋势是怎样的？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,DataFun联合行行AI举办第四届"数据智能创新与实践人工智能大会,火山引擎DataTester ...
- 火山引擎DataLeap下Notebook 系列文章一：技术选型之路
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Notebook 是一种支持 REPL 模式的开发环境.所谓「REPL」,即「读取-求值-输出」循环:输入一段代码 ...
- Word 文档怎么保留修改前和修改后的内容--审阅 修订
如果启用了修订内容后,对文档的内容进行了相关的修改后.则文档可以同时显示被修改的内容和修改后的内容.下面,本文通过举例具体介绍如何使用修订功能. 点击选中文档内容,然后依次点击[审阅]-[修订]-[修 ...
- Java 获取当前天是一年中的第几天
Java 获取当前天是一年中的第几天 @Test void dayofweed() throws Exception { System.out.println("2023-01-01 第 & ...
- xv6book阅读 chapter2
一个操作系统至少应该满足三个需求:多路复用.隔离.交互.本章主要介绍如何组织操作系统来实现以上的三个需求,本文关注的是一种围绕单核进行设计的方法,这种设计是被许多uinx操作系统所使用的.Xv6运行在 ...
- AI 视频云 VS 窄带高清，谁是视频时代的宠儿
随着网络技术的逐渐改善,各类视频消息成为媒体传播的主要选择手段.但其实支撑着视频传播的并不单单是网络技术,还有视频转码与压缩技术.这类技术下分很多,比如曾经被频繁提到的 H.265,比如时下热门的窄带 ...
- WebSoket 的广泛应用
目前大多数网站都在使用的传统 HTTP 协议,即由 Web 服务器通过 HTTP 接收并响应来自客户端的消息,整个发起请求与响应的过程类似我们点外卖,由以下 2 部分构成: 下订单(发起请求):用户( ...
- 【ToolChains】| CMake 技巧
判断 CMake 编译环境 编译类型 CMAKE_BUILD_TYPE 可取值为:Debug, Release, RelWithDebInfo, MinSizeRel 等预设值 if (CMAKE_B ...
- excel如何自动获取本周工作日的日期显示作为标题（周一至周五）
一.背景: 每周发周报的标题格式为:本周一到本周五的日期内容,如下:但是每隔一周发送的时候需要改一下周报标题里面的日期,比较麻烦目前的需求是通过函数自动化生成,根据当前的日期去定位出本周一的日期以及本 ...