笔记：echarts柱状图 每个柱子顶部显示数据

本文主要是介绍笔记：echarts柱状图 每个柱子顶部显示数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

废话不多说直接起飞

✈✈✈ 在每条series里面个每一条bar单独增加字段itemStyle就OK啦

series: [{name: "新增算法路数",type: "bar",barWidth: "20%",// data: [150, 200, 600, 500, 450, 300, 350, 150, 200, 600, 500, 450, 300],data: this.AddTotal.dataY.taskCount,barGap: "5%",
//-----------------主要看这里---------------------
//-----------------主要看这里---------------------
//-----------------主要看这里---------------------itemStyle: {normal: {// 每根柱子上面显示对应的值-------👇👇👇-----label: {formatter: data => {// console.log(data);if (data.data > 0) {return `${data.data}路`;}return "";},show: true,position: "top",textStyle: {fontWeight: "bolder",fontSize: "12",color: "#8c8c8c"}},// 每根柱子上面显示对应的值-------👆👆👆-----
//-----------------主要看这里---------------------
//-----------------主要看这里---------------------
//-----------------主要看这里---------------------// 修改柱子圆角barBorderRadius: [0, 0, 0, 0],// color: "#2db7f5"color: data => {// 没有选择的时候if (this.logo) {if (data.dataIndex == this.dataIndex) {// 根据点击事件产生的index来判断，设置背景色return "#2db7f5";}return "#eeeef0";} else {// 默认输出颜色return "#2db7f5";}}}}},
]

这篇关于笔记：echarts柱状图 每个柱子顶部显示数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---