Echart 柱形图：标注百分比的秘诀，让数据更具魅力！

ECharts柱形图：如何优雅地标注百分比，让你的数据图表更生动

在前端开发中，数据可视化一直是一个重要的环节。ECharts作为一款开源的JavaScript可视化库，因其丰富的图表类型和灵活的定制选项，深受开发者的喜爱。其中，柱形图（Bar Chart）作为一种直观展示数据的图表类型，在数据分析、报表展示等场景中应用广泛。

当我们使用柱形图展示数据时，有时不仅需要展示每个柱子的具体数值，还需要展示其相对于总数据的百分比。这有助于观众更快速地理解数据的分布和比例。在ECharts中，我们可以通过一些技巧，优雅地标注这些百分比数据。

效果图如下：

一、基本思路

通常，我们可能会想到通过计算每个柱子数据的百分比来标注。但是，这样做有一个缺点：当数据变化时，我们需要重新计算百分比，这可能会增加代码的复杂性。为了解决这个问题，我们可以考虑使用一个额外的数组来存储百分比数据，然后在ECharts的配置中引用这个数组。

二、实现步骤

准备数据

首先，我们需要准备两组数据：一组是柱子的实际数值，另一组是对应的百分比数据。

let valueData = [10, 20, 30, 40, 50]; // 柱子的实际数值

let percentData = ['10%', '20%', '30%', '40%', '50%']; // 对应的百分比数据

配置ECharts

在ECharts的配置中，我们将valueData作为series.data的value，将percentData作为series.data的一个自定义属性。然后，在tooltip或label的formatter函数中引用这个自定义属性来显示百分比。

let option = {

xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E'] // x轴的数据},

yAxis: {

type: 'value'

},

series: [{

data: valueData.map((value, index) => ({

value,percent: percentData[index] // 将百分比数据作为自定义属性

})),

type: 'bar',

label: {

show: true,

position: 'top',

formatter: function(params) {

return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比

}

},

tooltip: {

formatter: function(params) {

return params.name + ': ' + params.value + ' (' + params.data.percent +')'; // 在提示框中显示数值和百分比

}

}

}]

};

初始化ECharts实例并设置配置

最后，我们使用echarts.init方法初始化一个ECharts实例，并使用setOption方法设置上述配置。

let myChart = echarts.init(document.getElementById('chartV'));myChart.setOption(option);

完整代码如下：

import echarts from '../../static/h5/echarts.min.js'

export default {data() {return {title: 'Hello'}},onLoad() {

let myThis = this;this.$nextTick(() => {// 在这里可以安全地访问或操作更新后的 DOM myThis.fillChartV();

});

},methods: {

fillChartV() {

let colorArr = ["#4473FF", "#FFA01B", "#41D380"];

let valueData = [10, 20, 30, 40, 50]; // 柱子的实际数值 let percentData = ['10%', '20%', '30%', '40%', '50%']; // 对应的百分比数据let option = {color: colorArr,xAxis: {

type: 'category',data: ['A', 'B', 'C', 'D', 'E'] // x轴的数据 },yAxis: {

type: 'value'},series: [{

data: valueData.map((value, index) => ({

value,

percent: percentData[index] // 将百分比数据作为自定义属性

})),

type: 'bar',

label: {

show: true,

position: 'top',

formatter: function(params) {

return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比

}

},

tooltip: {

formatter: function(params) {

return params.name + ': ' + params.value + ' (' + params.data.percent +')'; // 在提示框中显示数值和百分比

}

}

}]

};

let myChart = echarts.init(document.getElementById('chartV'));

myChart.setOption(option);

}}}

.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}

.logo {height: 400px;width: 96vw;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}

.text-area {display: flex;justify-content: center;}

.title {font-size: 36rpx;color: #8f8f94;}

三、效果展示

通过上述步骤，我们就可以在柱形图的每个柱子上方标注百分比数据了。同时，当鼠标悬停在柱子上时，也会显示一个包含数值和百分比的提示框。这样，观众就可以更直观地理解数据的分布和比例了。

四、总结

通过使用ECharts的灵活配置和自定义属性功能，我们可以轻松地实现柱形图上的百分比标注。这不仅让数据图表更加生动和直观，也提高了观众对数据的理解和分析能力。希望本文对你有所帮助，如果你还有其他关于ECharts或其他前端技术的问题，欢迎随时交流。

完整代码下载地址：