echarts柱状图的宽度详解

一、如何设置echarts柱状图的宽度

在echarts中，可以通过设置series中的itemStyle.normal.barWidth属性来调整柱状图的宽度。该属性的值可以是一个数值，也可以是一个百分数。如果设置为某个数值，则所有柱子的宽度都将被设置为该值；如果设置为一个百分数，则柱子的宽度将按照屏幕宽度进行缩放。

option = {
    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',
        itemStyle: {
            normal: {
                barWidth: 30 // 设置柱子宽度为30
            }
        }
    }]
};

二、如何设置echarts柱状图的边框

设置柱状图的边框可以在itemStyle.normal中设置borderColor和borderWidth属性，分别代表边框颜色和边框宽度。

option = {
    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',
        itemStyle: {
            normal: {
                borderColor: 'red', // 设置边框颜色为红色
                borderWidth: 2 // 设置边框宽度为2
            }
        }
    }]
};

三、如何让echarts柱状图倾斜

可以通过设置label.normal.rotate属性，将柱状图倾斜。该属性的值为一个角度值，如果值为正数则代表逆时针旋转，否则代表顺时针旋转。

option = {
    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',
        label: {
            normal: {
                rotate: -30 // 将标签旋转30度
            }
        }
    }]
};

四、如何调整echarts柱状图的宽度和间距

可以通过系列间距和柱间距来控制柱状图的宽度和间距。系列间距可以在grid中设置，柱间距可以在xAxis中设置。它们的值都是一个百分数。

option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: -30 // 将标签旋转30度
        },
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        boundaryGap: true, // 首尾柱子是否留白
        barGap: '30%', // 设置柱间距为系列宽度的30%
        barCategoryGap: '20%' // 设置系列间距为柱的20%
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#D9D9D9'
            }
        }
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '50%', // 设置柱宽为系列宽度的50%
        itemStyle: {
            normal: {
                color: '#54C0B0'
            }
        }
    }]
};

五、如何更好的呈现echarts柱状图的数据格式

可以通过给柱状图添加标签，来更好地呈现数据格式。既可以在xAxis中设置axisLabel.show属性为false，然后在series中设置label.normal.show属性为true，也可以在xAxis中设置axisLabel.show属性为true，然后在series中设置label.normal.position属性来控制标签的位置。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            show: false // 不显示标签
        },
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        boundaryGap: true, // 首尾柱子是否留白
        barGap: '30%', // 设置柱间距为系列宽度的30%
        barCategoryGap: '20%' // 设置系列间距为柱的20%
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#D9D9D9'
            }
        }
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '50%', // 设置柱宽为系列宽度的50%
        itemStyle: {
            normal: {
                color: '#54C0B0'
            },
            emphasis: {
                color: '#76D7C4'
            } // 鼠标悬停时的颜色
        },
        label: {
            normal: {
                show: true, // 显示标签
                position: 'top' // 标签位置设置为顶部
            }
        }
    }]
};

六、如何设置echarts横向柱状图的间距

横向柱状图的间距设置和竖向柱状图类似，不同的只是xAxis和yAxis的设置。其中，xAxis代表y轴，yAxis代表x轴。

option = {
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: -30 // 将标签旋转30度
        },
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        boundaryGap: true, // 首尾柱子是否留白
        barGap: '30%', // 设置柱间距为系列宽度的30%
        barCategoryGap: '20%' // 设置系列间距为柱的20%
    },
    xAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#D9D9D9'
            }
        }
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '50%', // 设置柱宽为系列宽度的50%
        itemStyle: {
            normal: {
                color: '#54C0B0'
            },
            emphasis: {
                color: '#76D7C4'
            } // 鼠标悬停时的颜色
        },
        label: {
            normal: {
                show: true, // 显示标签
                position: 'right' // 标签位置设置为右侧
            }
        }
    }]
};

七、如何选取echarts柱状图数据过多的情况下的数据

在数据过多的情况下，可以通过xAxis中的axisLabel.interval属性来设置显示步长。如果数据比较密集，可以适当调小步长，如果数据比较稀疏，可以适当调大步长。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: -30 // 将标签旋转30度
        },
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        boundaryGap: true, // 首尾柱子是否留白
        barGap: '30%', // 设置柱间距为系列宽度的30%
        barCategoryGap: '20%' // 设置系列间距为柱的20%
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999999'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#D9D9D9'
            }
        }
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '50%', // 设置柱宽为系列宽度的50%
        itemStyle: {
            normal: {
                color: '#54C0B0'
            },
            emphasis: {
                color: '#76D7C4'
            } // 鼠标悬停时的颜色
        },
        label: {
            normal: {
                show: true, // 显示标签
                position: 'top' // 标签位置设置为顶部
            }
        }
    }]
};