echarts中在柱狀圖上方顯示文字的示例代碼
更新時(shí)間：2024年01月15日 10:13:43 作者：有蟬
這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
如何在柱狀圖上方顯示文字？如下圖所示
關(guān)鍵代碼如下圖所示
完整代碼如下
let myChart = this.$echarts.init(document.getElementById("goodsChart"));
// 繪制圖表
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["管理人員出勤人數(shù)", "班組人員出勤人數(shù)"],
align: "left",
left: 10,
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
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"
}
}
}
],
series: [
{
name: "管理人員出勤人數(shù)",
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.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "#3db0fe"
},
{
offset: 0,
color: "#0a81d4"
}
]),
opacity: 1
}
}
},
{
name: "班組人員出勤人數(shù)",
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.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "#4af0fc"
},
{
offset: 0,
color: "#03f2a3"
}
]),
opacity: 1
}
}
}
]
});以上就是echarts中在柱狀圖上方顯示文字的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于echarts柱狀圖上方顯示文字的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了淺談javascript屬性onresize的詳細(xì)使用方法，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
JavaScript中函數(shù)的四種調(diào)用方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的四種調(diào)用方式,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握J(rèn)avaScript有一定的幫助,需要的可以參考下2023-10-10
這篇文章主要介紹了前端使用Blob下載文件的幾種方式,分別是直接返回文件的網(wǎng)絡(luò)地址和返回文件流,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了js模仿java的Map集合的相關(guān)資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下2016-01-01
ng-options和ng-checked在表單中的高級(jí)運(yùn)用(推薦)
AngularJS是當(dāng)前非常的流行的前端框架，它的語法糖非常多，也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級(jí)運(yùn)用,需要的朋友可以參考下2017-01-01
JavaScript Function函數(shù)類型介紹
在JS中,Function(函數(shù))類型實(shí)際上是對(duì)象;每個(gè)函數(shù)都是Function類型的實(shí)例;而且都與其他引用類型一樣具有屬性和方法2015-04-04
這篇文章主要介紹了JS如何獲取對(duì)象鍵值對(duì)中key值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Prototype是一個(gè)JavaScript框架，旨在簡化動(dòng)態(tài)Web應(yīng)用程序的開發(fā)。原型被稱為作為一個(gè)單一的文件分發(fā)的prototype.js，本文給大家介紹prototype框架，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
js一維數(shù)組、多維數(shù)組和對(duì)象的混合使用方法
這篇文章主要介紹了js一維數(shù)組、多維數(shù)組和對(duì)象的混合使用方法,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了Cocos Creator 模塊化腳本，想加深學(xué)習(xí)CocosCreator腳本的同學(xué)，一定要看一下2021-04-04