echart柱图 柱子之间的间距、不显示X轴Y轴网格线

一、设置柱子之间的间距

series :[

  {

    name:'',

    type:'bar',

    //barWidth:20,   //设置柱子的宽度

    barGap:'0%',  /*多个并排柱子设置柱子之间的间距，不同系列的柱间距离，为百分比,此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效*/

    barCategoryGap:'0%',  /*多个并排柱子设置柱子之间的间距*/

    data:[],

  }

]

效果图

完整js代码

// import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');  //需要更改对应的id
var myChart = echarts.init(chartDom);
var option;
 
option = {
    title: { // 标题
        text: 'barCategoryGap',
        left: 'center',
        textStyle:{
            color:"#f00",
            fontWeight: 500
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barCategoryGap:'0%'
        },
        // {
        //     data: [120, 200, 150, 80, 70, 110, 130],
        //     type: 'bar',
        //     barGap:'0%'
        // }
    ]
};
 
option && myChart.setOption(option);复制

二、不显示X轴Y轴网格线

xAxis: {
        show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
yAxis: {
        axisTick:{
            show: false //不显示坐标轴刻度线
        },
        axisLine: {
            show: false, //不显示坐标轴线
        },
        axisLabel: {
            show: false, //不显示坐标轴上的文字
        },
        splitLine: {     //网格线
          "show": false
        }
}

效果图

完整js代码

不显示网络线时，只有光秃秃的几个柱子。略显单薄也不够直观，所以我把它们对应的值显示在了柱子上方。

// import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');  //需要更改对应的id
var myChart = echarts.init(chartDom);
var option;
 
option = {
    title: {  // 标题
        text: '不显示X轴Y轴网格线',
        left: 'center',
        textStyle:{
            color:"#f00",
            fontWeight: 500
        }
    },
    xAxis: {
        type: 'category',
        show:false,  // X轴隐藏
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisTick:{
            show: false //不显示坐标轴刻度线
        },
        axisLine: {
            show: false, //不显示坐标轴线
        },
        axisLabel: {
            show: false, //不显示坐标轴上的文字
        },
        splitLine: {  //网格线
            "show": false
        }
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            // 柱图对应的Y轴值
            label: {
                show: true,
                // rotate: 60, // 标签旋转，正值逆时针
                position: 'top' // 标签位置 值为方向词，不配置默认在中间
            }
        }
    ]
};
 
option && myChart.setOption(option);复制

 三、综合案例

需求：

1. 给每一个柱子设置不同的颜色
2. 柱子之间间距为0
3. 不显示X轴Y轴网格线
4. 在柱子上方显示值并带上单位（万）

 效果图

 完整代码

<template>
  <div class="box">
    <div id="main3" class="main3"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'; 
export default {
    methods: {
        fn(){
            var chartDom = document.getElementById('main3');
            var myChart = echarts.init(chartDom);
            var option;
 
            option = {
                title: {
                    text: '综合案例',
                    left: 'center',
                    textStyle:{
                        color:"#f00",
                        fontWeight: 500
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick:{
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                },
                yAxis: {
                    show: false
                },
                series: [
                    {
                        data:[  // 单独给每一个柱子设置颜色
                            {
                                value: 120,
                                name:"123",
                                itemStyle: {
                                    color: '#FF0000'
                                }
                            },
                            {
                                value: 200,
                                itemStyle: {
                                    color: '#FF7F00'
                                }
                            },
                            {
                                value: 150,
                                itemStyle: {
                                    color: '#FFFF00'
                                }
                            },
                            {
                                value: 80,
                                itemStyle: {
                                    color: '#00FF00'
                                }
                            },
                            {
                                value: 70,
                                itemStyle: {
                                    color: '#00FFFF'
                                }
                            },
                            {
                                value: 110,
                                itemStyle: {
                                    color: '#0000FF'
                                }
                            },
                            {
                                value: 130,
                                itemStyle: {
                                    color: '#8B00FF'
                                }
                            }
                        ],
                        type: 'bar',
                        barCategoryGap:'0%',  // 多个并排柱子设置柱子之间的间距
                        // 柱图对应的Y轴值
                        label: {
                            show: true,
                            position: 'top', // 标签位置 值为方向词，默认在中间
                            formatter:(row)=> row.value+'万'
                        }
                    },
                ]
            };
 
            option && myChart.setOption(option);
        }
    },
    mounted () {
        this.fn()
    }
}
</script>
 
<style scoped>
.box{
    margin: 0 auto;
    width: 666px;
    height: 400px;
    background-color: #eee;
}
.main3{
    height: 100%;
}
</style>复制