在Vue中使用ECharts实现标注百分比的动态柱形图

摘要

在现代数据可视化领域，图表扮演着举足轻重的角色，它们不仅能够帮助我们更直观地理解数据，还能通过丰富的交互方式提升用户体验。本文将详细介绍如何在Vue项目中利用ECharts库创建具有百分比标注的动态柱形图，从而使数据展示更加生动和具有吸引力。

一、引言

在前端开发中，Vue.js因其响应式数据绑定和组件化开发的特性而广受欢迎。而ECharts则是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和强大的配置项，非常适合用于数据可视化项目的开发。本文将结合Vue和ECharts，实现一个能够动态展示数据并标注百分比的柱形图。

二、准备工作

1. 安装Vue和ECharts

首先，确保你的开发环境中已经安装了Vue.js和ECharts。可以通过npm或yarn来安装这些依赖：

	npm install vue echarts --save
	# 或者
	yarn add vue echarts

2. 创建Vue项目

如果你还没有创建Vue项目，可以使用Vue CLI来创建一个新的项目：

vue create my-chart-project

按照提示操作完成项目的创建。

3. 引入ECharts

在Vue组件中引入ECharts库：

码

import * as echarts from 'echarts';

三、实现动态柱形图

1. 模板结构

在Vue组件的模板部分，我们定义了两个用于绘制图表的容器：

	<template>
	<div class="content">
	<div id="chartV" class="chart-container"></div>
	<div id="chartTwoV" class="chart-container"></div>
	</div>
	</template>
	<style>
	.chart-container {
	width: 400px;
	height: 400px;
	margin: 20px;
	}
	</style>

2. 初始化图表

在Vue组件的mounted生命周期钩子中，我们初始化ECharts实例并配置图表选项：

	export default {
	data() {
	return {
	chart1: null,
	chart2: null,
	valueData: [10, 20, 30, 40, 50],
	percentData: ['10%', '20%', '30%', '40%', '50%']
	};
	},
	mounted() {
	this.initChart('chartV', this.valueData, this.percentData);
	this.initChart('chartTwoV', [20, 30, 40, 50, 60], ['20%', '30%', '40%', '50%', '60%']);
	},
	methods: {
	initChart(id, valueData, percentData) {
	const dom = document.getElementById(id);
	const myChart = echarts.init(dom);
	const option = {
	color: ['#4473FF', '#FFA01B', '#41D380'],
	xAxis: {
	type: 'category',
	data: ['A', 'B', 'C', 'D', 'E']
	},
	yAxis: {
	type: 'value'
	},
	series: [{
	data: valueData.map((value, index) => ({
	value,
	percent: percentData[index]
	})),
	type: 'bar',
	label: {
	show: true,
	position: 'top',
	formatter: '{c} ({d}%)'
	},
	tooltip: {
	formatter: function (params) {
	return `${params.name}: ${params.value} (${params.data.percent})`;
	}
	}
	}]
	};
	myChart.setOption(option);
	}
	}
	};

注意：在label.formatter中，我们使用了{c}来代表值，{d}%来代表百分比。然而，由于ECharts的默认formatter不支持直接访问data对象中的自定义属性（如percent），上述代码仅为示例，实际中需要通过params.data.value和params.seriesData[index].percent来访问值和百分比。但在ECharts的较新版本中，params.data可能直接包含自定义属性，具体取决于ECharts版本和配置。

3. 动态数据更新

如果你需要动态更新图表数据，可以在Vue组件中添加数据观察器或使用Vuex等状态管理库来管理数据。当数据变化时，调用setOption方法并传入新的配置选项来更新图表。

4. 完整项目代码

<template>
    <view class="content">

        <div id="chartV" class="logo"></div>

        <div id="chartTwoV" class="logo"></div>

    </view>
</template>

<script>
    import echarts from '../../static/h5/echarts.min.js'

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

            let myThis = this;

            this.$nextTick(() => {
                // 在这里可以安全地访问或操作更新后的 DOM  
                myThis.fillChartV();
                //  实现多项数据标注
                myThis.fillChartFZV();

            });

        },
        methods: {

            fillChartFZV() {

                let res = {
                    "data": [{
                        "klevel": "A1",
                        "perRatioAddUp": "3.46%",
                        "perRatio": "3.46%",
                        "perSum": 3
                    }, {
                        "klevel": "A2",
                        "perRatioAddUp": "4.1%",
                        "perRatio": "3.64%",
                        "perSum": 3
                    }, {
                        "klevel": "A3",
                        "perRatioAddUp": "36.99%",
                        "perRatio": "35.89%",
                        "perSum": 36
                    }, {
                        "klevel": "A4",
                        "perRatioAddUp": "4.63%",
                        "perRatio": "4.64%",
                        "perSum": 4
                    }, {
                        "klevel": "A5",
                        "perRatioAddUp": "5.91%",
                        "perRatio": "3.28%",
                        "perSum": 4
                    }, {
                        "klevel": "A6",
                        "perRatioAddUp": "7.55%",
                        "perRatio": "6.64%",
                        "perSum": 6
                    }, {
                        "klevel": "A7",
                        "perRatioAddUp": "8.37%",
                        "perRatio": "6.82%",
                        "perSum": 7
                    }],
                    "count": "122人"
                }
                const totalCount = res.count;
                console.log('kum返回数据 = ' + JSON.stringify(res));

                let kumArr = [];
                let perSumArr = [];
                let perRatioArr = [];
                let perRatioAddUpArr = [];

                if (res.data) {

                    for (let s of res.data) {

                        kumArr.push(s.klevel);
                        perSumArr.push(s.perSum);
                        perRatioArr.push(s.perRatio);
                        perRatioAddUpArr.push(s.perRatioAddUp);

                    }

                }

                let dom = document.getElementById("chartTwoV");
                let myChart = echarts.init(dom);
                let option;
                let colorArr = ["#4473FF","#41D380"];

                option = {
                    color: colorArr,
                    silent: false, //取消点击高亮
                    title: {
                        text: '总计：' + totalCount,
                        subtext: '',
                        left: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['数量'],
                        left: 'right'
                    },
                    grid: {
                        left: '2%',
                        right: '20%',
                        bottom: '2%',
                        containLabel: true
                    },
                    yAxis: {
                        name: '人才等级',
                        type: 'category',
                        data: kumArr,
                        axisLabel: {

                            fontSize: 10
                        },
                    },
                    xAxis: {
                        name: '数量',
                        type: 'value',
                        axisLabel: {

                            fontSize: 10
                        },

                    },
                    series: [{
                            name: '数量',
                            type: 'bar',
                            barMaxWidth: 30,
                            stack: 'total',
                            label: {
                                show: true,
                                fontSize: 10,
                                position: "right",
                                formatter: function(params) {

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

                                }
                                // formatter: (params) => "占比" + ((params.value) / 100).toFixed(2) + '%'
                            },
                            data: perSumArr.map((value, index) => ({

                                value,
                                perRatio: perRatioArr[index], // 将百分比数据作为自定义属性  
                                perRatioAddUp: perRatioAddUpArr[index]

                            }))
                        }

                    ]
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }

            },

            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'
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    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);

            }
        }
    }
</script>

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

    .logo {
        height: 340px;
        width: 96vw;
        margin-top: 10rpx;
        margin-left: auto;
        margin-right: auto;
    }

    .text-area {
        display: flex;
        justify-content: center;
        font-size: 36rpx;
        color: blue;
        font-weight: 550;
        height: 32px;
    }
</style>

四、结论

通过以上步骤，我们成功在Vue项目中利用ECharts创建了一个具有百分比标注的动态柱形图。这种图表不仅展示了数据的具体数值，还通过百分比标注增强了数据的可读性和理解度。此外，ECharts的灵活配置和丰富的API使得我们能够轻松地实现各种复杂的图表效果，满足不同的数据可视化需求。

希望这篇技术博客能够帮助你更好地理解和应用Vue和ECharts进行数据可视化开发。

插件地址

https://ext.dcloud.net.cn/plugin?id=19690

前端技术交流：