echarts中如何在柱状图上⽅显⽰⽂字如何在柱状图上⽅显⽰⽂字？如下图所⽰
关键代码如下图所⽰
完整代码如下
let myChart = this.$echarts.ElementById("goodsChart"));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["管理⼈员出勤⼈数", "班组⼈员出勤⼈数"],
align: "left",
left: 10,
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
{
type: "category",
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: "#063374",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#00c7ff"
}
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}"
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "#063374"
textstyle}
}
}
],
series: [
{
name: "管理⼈员出勤⼈数",            type: "bar",
data: seriesData1,
barWidth: 10, //柱⼦宽度            barGap: 1, //柱⼦之间间距
itemStyle: {
normal: {
label: {
formatter: "{c}"+"⼈",                  show: true,
position: "top",
textStyle: {
fontWeight: "bolder",                    fontSize: "12",
color: "#fff"
},
color: new this.$aphic.LinearGradient(0, 0, 0, 1, [                  {
offset: 1,
color: "#3db0fe"
},
{
offset: 0,
color: "#0a81d4"
}
]),
opacity: 1
}
}
},
{
name: "班组⼈员出勤⼈数",
type: "bar",
data: seriesData2,
barWidth: 10,
barGap: 1,
itemStyle: {
normal: {
label: {
formatter: "{c}"+"⼈",
show: true,
position: "top",
textStyle: {
fontWeight: "bolder",
fontSize: "12",
color: "#fff"
}
},
color: new this.$aphic.LinearGradient(0, 0, 0, 1, [                  {
offset: 1,
color: "#4af0fc"
},
{
offset: 0,
color: "#03f2a3"
}
]),
opacity: 1
}
}
}
]
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。