echarts中在柱状图上方显示文字的示例代码
更新时间:2024年01月15日 10:13:43 作者:有蝉
这篇文章给大家介绍了在echarts中如何在柱状图上方显示文字,文中给出了完整的示例代码,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
如何在柱状图上方显示文字?如下图所示
关键代码如下图所示
完整代码如下
let myChart = this.$echarts.init(document.getElementById("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 }, 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: "管理人员出勤人数", 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: "班组人员出勤人数", 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中在柱状图上方显示文字的示例代码的详细内容,更多关于echarts柱状图上方显示文字的资料请关注脚本之家其它相关文章!
相关文章
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
这篇文章主要介绍了javaScript生成二维码,改造jquery.qrcode.js,使之支持中文,能带logo的二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-01-01JavaScript ECMA-262-3 深入解析.第三章.this
在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字2011-09-09
最新评论