如何让echarts中柱状图的柱子与坐标轴有一定的间距

最新推荐文章于 2024-06-25 15:34:07 发布

原创最新推荐文章于 2024-06-25 15:34:07 发布 · 2.6w 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts实现自定义柱状图柱子与坐标轴的间距

学习同时被 2 个专栏收录

2 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文介绍了如何在echarts中实现柱状图的柱子与坐标轴保持一定间距的方法。通过设置柱状图的stack属性，结合透明色的辅助柱状图，来创造出视觉上的间距效果。作者分享了具体的实现步骤和数据设置，并提到这适用于X轴作为数值轴的情况，可灵活调整适应不同需求。

实现echarts中柱状图的柱子与坐标轴有一定的间距，效果如下：

bar

因为第一次用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" style="width: 752px; height:470px; margin: 0 auto;"></div>

    <script>
        let myChart = echarts.init(document.getElementById('main'))
        let data = [100000, 0, 30000, 540000, 300050, 80060, 20070, 888080, 18890]
        let yAxisData = ['汉语拼音基础库', '汉语拼音基础库', '多音字姓氏库', '多音字词组库', '少数民族人名库', '外国人名词素库', '外国人名全称系统库', '外国人名全称用户库', '外国人名全称纠错库']
        let option = {
            title: {
                text: '自然人名库',
                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)'
                    },
                    emphasis: {
                        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: new echarts.graphic.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，还有很多地方不懂，如果用词有误或者描述不准确，欢迎指正，还请多多见谅~

一个正在成长的前端小白~