如何让echarts中柱状图的柱⼦与坐标轴有⼀定的间距 实现echarts中柱状图的柱⼦与坐标轴有⼀定的间距，效果如下： 因为第⼀次⽤echarts，⼀开始下意识想官⽅应该有这个属性，就⼀直在柱状图的属性中反复，后⾯实在不到类似的属性，索性就不 了。既然此路不通，那就换⼀条路试试。但是不管怎么说，就算没有这个属性，效果还是要想办法实现的，要不然产品和测试那⾥怎么过得
去嘛。
虽说查了很多遍的官⽅⽂档也没到，但是也并不是没有收获，在看⽂档的过程发现柱状图有⼀个stack的属性，这个属性按我的理解就
是，在⼀个容器中设置两个或两个以上的柱状图时，在每个柱状图的series中都加上stack属性，且它们的值都设置成⼀样的，这个值可以 ⾃⼰随便⾃定义，接受的类型为string，如何两个柱状图的stack属性值是⼀样的话，那么这两个柱状图的柱⼦的值就会相加，显⽰的还是 ⼀个柱⼦。想到这⾥，好像到了⼀点感觉，如果我们建⽴两个柱状图，同时把它们的stack属性设置成⼀样的值，然后把其中⼀个柱状图
的所有效果取消掉，柱⼦的颜⾊设置成透明，data根据整个柱状图的坐标轴刻度的⼤⼩设置成合适的，⽐如我例⼦中X轴的每个刻度是
200000，Y轴共有9类，那么我就可以把所有data设置成[25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000,
25000]，这样柱⼦距离Y轴就是0.125个X轴的刻度长，这个间距主要还是要看你数值轴的⼀个刻度⼤⼩，然后进⾏⾃定义设定。ok，⼜
说的有点偏了，回到刚才，这样设置完后，就可以把这个柱状图当成⼀个辅助的功能，在另⼀个柱状图中的data写我们需要显⽰的数据。
让柱⼦与坐标轴有⼀定间距的效果就实现了，当然，我例⼦⾥做的是X轴当数值轴，即做刻度，可以根据需求不同进⾏调整，这个都是⼩问
题。
滑水鞋
ok，下⾯把代码简单的上⼀下吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引⼊ ECharts ⽂件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
<script>
let myChart = echarts.ElementById('main'))
let data = [100000, 0, 30000, 540000, 300050, 80060, 20070, 888080, 18890]
let yAxisData = ['汉语拼⾳基础库', '汉语拼⾳基础库', '多⾳字姓⽒库', '多⾳字词组库', '少数民族⼈名库', '外国⼈名词素库', '外国⼈名全称系统库', '外国⼈名全称⽤ let option = {
title: {
left: 18,
top: 10,
textStyle: {
color: '#282828',
fontSize: 16
}
},
color: ['#3398DB'],
fontSize: 14,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指⽰器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }
},
grid: {
left: '3%',
containLabel: true
},
xAxis: [{
type: 'value',
splitLine: {
show: false
},
max: 1400000,
splitNumber: 8,
axisTick: {
alignWithLabel: true,
inside: true,
lengt: 6
},
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: '#5A5A5A',
fontSize: 14
}测井设备
}
}],
yAxis: [{
type: 'category',
data: yAxisData,
axisTick: {
alignWithLabel: true,
inside: true
},
axisLabel: {
textStyle: {
color: '#5A5A5A',
fontSize: 14
}
}
}],
series: [{
name: 'assist',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
tooltip: {
trigger: 'none'
},
data: [25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000]
}, {
name: '总条数',
type: 'bar',
stack: '1',
barWidth: 18, // 柱⼦宽度
itemStyle: {
normal: {
label: {
formatter: '{c}' + '条', // ⾃定义柱顶显⽰内容
show: true,
position: 'right',
color: '#5A5A5A',
fontSize: 14
},
color: aphic.LinearGradient( // 五个参数，前四个参数分别对应“右/下/左/上”，渐变开始的位置 0, 0, 1, 0, [{
offset: 0,
color: '#7DD7F1'防臭鞋
}, {
offset: 0.25,
color: '#70C2F5'
}, {
offset: 0.5,
color: '#62ADF8'
}, {
offset: 0.75,
color: '#5598FC'
}, {
offset: 1,
color: '#4783FF'封装盒
}]
)
}
},
data: data
}]
}
myChart.setOption(option)
粽子机
</script>
</body>
</html>
第⼀次⽤echarts，还有很多地⽅不懂，如果⽤词有误或者描述不准确，欢迎指正，还请多多见谅~
淋幕机
⼀个正在成长的前端⼩⽩~
