详解echarts条形图

一、echarts条形图是什么

echarts条形图是一种常用的数据可视化图表，它可以用于展示某一类别的数据在不同属性指标下的数量大小关系。条形图的主要特点是横轴表示类别，纵轴表示数量或比例。

下面是echarts条形图的基本示例代码：

    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        // 指定图表的配置项和数据
        var 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'
            }]
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    

二、echarts条形图降序排列

有时候，我们需要将条形图按照数量大小进行排序，使得数据更加清晰明了。可以通过设置数据进行排序，然后在option的series中添加sort属性。

示例代码如下：

    
        var data = [120, 200, 150, 80, 70, 110, 130];
        data.sort(function(a, b){return b-a}); // 降序排列
        
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar',
                sort: 'none' // 取消默认排序
            }]
        };
    

三、echarts条形图提示框

echarts条形图可以打开提示框，展示更详细的数据信息。可以通过设置tooltip属性来实现。

示例代码如下：

    
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            tooltip: { // 设置提示框
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
    

四、echarts条形图居中

有时候，我们需要让条形图在整个画布中居中显示。可以通过设置grid属性来实现。

示例代码如下：

    
        var option = {
            grid: {
                left: '20%',
                right: '20%',
                bottom: '20%',
                top: '20%',
                containLabel: true
            },
            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'
            }]
        };
    

五、echarts条形图之间的距离

默认情况下，echarts条形图之间的距离是由echarts自动计算的。如果需要手动设置echarts条形图之间的距离，可以通过设置barWidth属性和barGap属性实现。

示例代码如下：

    
        var 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',
                barWidth: 40, // 设置条形图宽度
                barGap: '50%' // 设置条形图之间的间隔
            }]
        };
    

六、echarts绘制条形图

echarts条形图可以通过设置不同的series来绘制多种效果、多种数据。例如水平条形图、堆积条形图、渐变色条形图等。

示例代码如下：

    
        var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                itemStyle: { // 设置渐变色
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [
                            {offset: 0, color: '#7FFFAA'},
                            {offset: 1, color: '#2E8B57'}
                        ]
                    )
                }
            }, {
                data: [220, 280, 250, 260, 270, 210, 230],
                type: 'bar',
                itemStyle: { // 设置渐变色
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [
                            {offset: 0, color: '#87CEFA'},
                            {offset: 1, color: '#1E90FF'}
                        ]
                    )
                }
            }]
        };
    

七、echarts条形图排序

除了通过设置数据进行排序以外，还可以通过设置visualMap属性来实现。visualMap是echarts中的一种可视化组件，用于控制不同颜色的映射关系，可以通过拖动滑块的方式来控制颜色的变化。

示例代码如下：

    
        var data = [120, 200, 150, 80, 70, 110, 130];
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar'
            }],
            visualMap: { // 设置visualMap
                type: 'continuous',
                dimension: 0,
                seriesIndex: 0,
                min: 0,
                max: 6,
                inRange: {
                    color: ['#F5DEB3', '#8B4513']
                }
            }
        };
    

八、echarts条形图线条加粗

如果需要让echarts条形图的线条更加粗细，可以通过设置lineStyle中的width属性来实现。

示例代码如下：

    
        var 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: {
                    borderWidth: 2, // 设置线宽
                    borderColor: '#333' // 设置线颜色
                },
                emphasis: { // 设置高亮
                    itemStyle: {
                        color: '#87CEFA',
                        borderColor: '#1E90FF', // 设置高亮颜色
                        borderWidth: 5 // 设置线宽
                    }
                }
            }]
        };
    

九、echarts菜鸟教程

如果您是初学者，可以通过echarts官网提供的菜鸟教程来了解更多关于echarts条形图的内容。菜鸟教程提供了完整的示例代码和详细的教程，可以帮助您快速入门。

示例代码如下：

    
        var 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'
            }]
        };
    

十、echarts饼图

如果您需要展示的数据是百分比形式，可以尝试使用echarts饼图来进行可视化展示。饼图可以非常直观地展示不同比例的数据占比。

示例代码如下：

    
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} 
{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 120, name: 'Mon'},
                        {value: 200, name: 'Tue'},
                        {value: 150, name: 'Wed'},
                        {value: 80, name: 'Thu'},
                        {value: 70, name: 'Fri'},
                        {value: 110, name: 'Sat'},
                        {value: 130, name: 'Sun'}
                    ]
                }
            ]
        };