笔记：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";
                  }
                }
              }
            }
          },
]