echarts中在柱狀圖上方顯示文字的示例代碼
更新時(shí)間:2024年01月15日 10:13:43 作者:有蟬
這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對大家的學(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)文章
如何用js獲取當(dāng)年周數(shù)列表以及當(dāng)前日期是第幾周
這篇文章主要介紹了如何獲取當(dāng)前年份的周數(shù)列表,并計(jì)算當(dāng)前日期是第幾周,代碼基于ISO8601標(biāo)準(zhǔn),計(jì)算每年的第一周從第一個(gè)星期四開始,需要的朋友可以參考下2024-11-11JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法,涉及JavaScript針對時(shí)間及狀態(tài)欄操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問題的方法分析
這篇文章主要介紹了JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問題的方法,結(jié)合實(shí)例形式分析了javascript浮點(diǎn)數(shù)運(yùn)算精度誤差的原因以及相關(guān)的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框
這篇文章主要介紹了javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框,需要的朋友可以參考下2014-05-05利用Three.js制作一個(gè)新聞聯(lián)播開頭動(dòng)畫
這篇文章主要為大家介紹了如何利用Three.js制作一個(gè)新聞聯(lián)播開頭動(dòng)畫,文中的實(shí)現(xiàn)步驟講解詳細(xì),對我們學(xué)習(xí)有一定幫助,需要的可以參考一下2022-05-05