echarts 柱状图顶部需要添加label用来显示数字,我们需要修改一下代码。
无label效果
有label效果
在ECharts中,你可以通过设置label
属性的color
和fontSize
来改变顶部标签的颜色和字体大小。以下是一个相关的示例:
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',
label: {
show: true,
position: 'top',
color: '#fff', // 设置标签颜色为白色
fontSize: 14 // 设置标签字体大小为14
}
}]
};
在这个示例中,我们在series
中设置了label
属性,使得每个柱子的顶部都显示了对应的数据值。我们设置show
为true
使得标签可见,设置position
为'top'使得标签显示在柱子的顶部。我们还将color
设置为'#fff'使得标签颜色为白色,将fontSize
设置为14使得标签字体大小为14。
完整实例代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
name: 'echarts1',
components: {},
data() {
return {
xData: ['在岗', '不在岗', '离退休'],
yData1: [10, 20, 30],
yData2: [10, 20, 30],
yData3: [10, 20, 30],
}
},
watch: {},
mounted() {
var that = this;
const viewElem = document.body;
// 监听窗口变化,重绘echarts
const resizeObserver = new ResizeObserver(() => {
setTimeout(() => {
that.drawEcharts();
}, 300)
});
resizeObserver.observe(viewElem);
},
methods: {
drawEcharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.echarts)
var option = {
grid: {
top: '50px',
bottom: '10px',
left: '20px',
right: '20px',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 174, 0, 0.1)'
}, {
offset: 1,
color: 'rgba(255, 174, 0, 0.5)'
}], false),
}
}
},
legend: {
top: 10,
right: 20,
itemWidth: 10,
itemHeight: 10,
icon: 'circle',
textStyle: {
color: 'rgba(157, 185, 233, 1)',
fontSize: '12'
},
},
xAxis: [{
data: this.xData,
axisLabel: {
margin: 10,
interval: 0,
color: '#b8c8e8',
textStyle: {
fontSize: 11
},
},
axisLine: {
lineStyle: {
color: 'rgba(49, 119, 214, 1)',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
},
axisTick: {
show: false
},
}],
yAxis: [
{
type: 'value',
splitNumber: 2,
axisLabel: {
color: 'rgba(181, 217, 255, 1)',
textStyle: {
fontSize: 12
},
},
axisLine: {
lineStyle: {
color: 'rgba(49, 119, 214, 1)',
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
}
}],
series: [
{
name: '校内教职工',
type: 'bar',
data: this.yData1,
barWidth: '15%',
label: {
show: true,
position: 'top',
color: '#fff', // 设置标签颜色为白色
fontSize: 14, // 设置标签字体大小为14
fontFamily:'DIN-Bold'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(171, 70, 251, 1)'
}, {
offset: 1,
color: 'rgba(112, 0, 201, 0.50)'
}], false),
}
},
},
{
name: '外聘教师',
type: 'bar',
data: this.yData2,
barWidth: '15%',
label: {
show: true,
position: 'top',
color: '#fff', // 设置标签颜色为白色
fontSize: 14, // 设置标签字体大小为14
fontFamily:'DIN-Bold'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 201, 11, 1)'
}, {
offset: 1,
color: 'rgba(255, 201, 11, 0.40)'
}], false),
}
},
},
{
name: '服务人员',
type: 'bar',
data: this.yData3,
barWidth: '15%',
label: {
show: true,
position: 'top',
color: '#fff', // 设置标签颜色为白色
fontSize: 14, // 设置标签字体大小为14
fontFamily:'DIN-Bold'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(2, 255, 186, 1)'
}, {
offset: 1,
color: 'rgba(12, 224, 167, 0.40)'
}], false),
}
},
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: 100%;
}
</style>