echarts怎么实现带百分比的横向柱状图

发布时间：2021-12-14 12:45:24 作者：iii
来源：亿速云阅读：603

# ECharts怎么实现带百分比的横向柱状图

## 前言

在数据可视化领域，横向柱状图是展示分类数据对比的常用图表类型。当需要在图表中直观显示完成率、占比等百分比数据时，带百分比的横向柱状图就成为理想选择。ECharts作为一款强大的开源可视化库，提供了丰富的配置项来实现这种需求。本文将详细介绍如何使用ECharts实现带百分比的横向柱状图，包含完整代码示例和分步讲解。

## 一、基础实现

### 1. 准备基础HTML结构

首先创建一个基本的HTML文件，引入ECharts库：

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>带百分比的横向柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 500px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        // ECharts代码将在这里编写
    </script>
</body>
</html>

2. 初始化图表实例

在script标签中初始化ECharts实例：

const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);

3. 准备示例数据

准备一组包含名称和值的示例数据：

const data = [
    { name: '项目A', value: 78 },
    { name: '项目B', value: 54 },
    { name: '项目C', value: 99 },
    { name: '项目D', value: 34 },
    { name: '项目E', value: 62 }
];

4. 基础配置项

创建基础配置项option：

const option = {
    title: {
        text: '项目完成率统计',
        subtext: '单位：百分比(%)',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        max: 100,
        axisLabel: {
            formatter: '{value}%'
        }
    },
    yAxis: {
        type: 'category',
        data: data.map(item => item.name)
    },
    series: [{
        name: '完成率',
        type: 'bar',
        data: data.map(item => item.value)
    }]
};

5. 显示图表

最后应用配置并显示图表：

myChart.setOption(option);

此时已经实现了一个基础的横向柱状图，但还没有显示百分比标签。

二、添加百分比标签

1. 在series中添加label配置

修改series配置，添加label属性：

series: [{
    name: '完成率',
    type: 'bar',
    data: data.map(item => item.value),
    label: {
        show: true,
        position: 'right',
        formatter: '{c}%'
    }
}]

2. 自定义标签样式

可以进一步美化标签样式：

label: {
    show: true,
    position: 'right',
    formatter: '{c}%',
    color: '#333',
    fontWeight: 'bold',
    fontSize: 14
}

三、进阶美化

1. 添加渐变色

为柱状图添加渐变色效果：

series: [{
    // ...其他配置
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#0077e6' }
        ])
    }
}]

2. 添加数据排序

使数据从高到低排序显示：

// 对数据进行排序
data.sort((a, b) => b.value - a.value);

// 更新yAxis的data
yAxis: {
    type: 'category',
    data: data.map(item => item.name)
},

3. 添加动画效果

配置动画效果使图表加载更生动：

series: [{
    // ...其他配置
    animationDuration: 2000,
    animationEasing: 'elasticOut'
}]

四、完整代码示例

以下是完整的实现代码：

const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);

// 准备数据
const data = [
    { name: '项目A', value: 78 },
    { name: '项目B', value: 54 },
    { name: '项目C', value: 99 },
    { name: '项目D', value: 34 },
    { name: '项目E', value: 62 }
];

// 排序数据
data.sort((a, b) => b.value - a.value);

const option = {
    title: {
        text: '项目完成率统计',
        subtext: '单位：百分比(%)',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: '{b}: {c}%'
    },
    grid: {
        left: '3%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        max: 100,
        axisLabel: {
            formatter: '{value}%'
        },
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    yAxis: {
        type: 'category',
        data: data.map(item => item.name),
        axisLine: {
            show: true
        },
        axisTick: {
            show: true
        }
    },
    series: [{
        name: '完成率',
        type: 'bar',
        data: data.map(item => item.value),
        label: {
            show: true,
            position: 'right',
            formatter: '{c}%',
            color: '#333',
            fontWeight: 'bold',
            fontSize: 14
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#0077e6' }
            ]),
            borderRadius: [0, 4, 4, 0]
        },
        barWidth: '60%',
        animationDuration: 2000,
        animationEasing: 'elasticOut'
    }]
};

myChart.setOption(option);

// 响应式调整
window.addEventListener('resize', function() {
    myChart.resize();
});

五、高级功能扩展

1. 添加进度条效果

实现类似进度条的背景效果：

series: [
    {
        name: '背景',
        type: 'bar',
        barGap: '-100%',
        data: data.map(() => 100),
        barWidth: '60%',
        itemStyle: {
            color: '#eee',
            borderRadius: [0, 4, 4, 0]
        },
        silent: true
    },
    {
        // 原有数据系列...
    }
]

2. 添加交互功能

实现点击柱状图高亮效果：

series: [{
    // ...其他配置
    emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}]

3. 自定义tooltip内容

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    },
    formatter: function(params) {
        const data = params[0];
        return `
            <div style="font-weight:bold">${data.name}</div>
            <div>完成率: ${data.value}%</div>
            <div>状态: ${data.value > 80 ? '优秀' : data.value > 50 ? '良好' : '待提升'}</div>
        `;
    }
},

六、常见问题解决

1. 标签显示不全

当标签文字较长时可能显示不全，解决方案：

grid: {
    left: '3%',
    right: '12%', // 增加右侧空间
    bottom: '3%',
    containLabel: true
},

2. 数据为0时不显示标签

label: {
    show: true,
    position: 'right',
    formatter: function(params) {
        return params.value > 0 ? params.value + '%' : '';
    }
}

3. 处理大数据量时的性能优化

series: [{
    // ...其他配置
    large: true,
    largeThreshold: 100
}]

七、总结

本文详细介绍了如何使用ECharts实现带百分比的横向柱状图，从基础实现到进阶美化，再到高级功能扩展，涵盖了实际开发中的各种需求。ECharts强大的配置能力让我们可以轻松创建专业级的数据可视化图表。通过合理运用这些技术，可以为用户提供更直观、更美观的数据展示效果。

在实际项目中，可以根据具体需求调整图表的样式和交互方式，例如添加更多数据系列、实现动态数据更新等。ECharts的官方文档提供了全面的API参考，是进一步学习的好资源。

希望本文能帮助您快速掌握带百分比横向柱状图的实现方法，为您的数据可视化项目增添亮点。 “`