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>