在现代数据可视化领域，图表扮演着举足轻重的角色，它们不仅能够帮助我们更直观地理解数据，还能通过丰富的交互方式提升用户体验。本文将详细介绍如何在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
码
| 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方法并传入新的配置选项来更新图表。<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前端技术交流：
