echarts 柱状图顶部添加白色14号字体label

echarts yekong

echarts 柱状图顶部需要添加label用来显示数字,我们需要修改一下代码。

无label效果

无label效果

有label效果

echarts 柱状图顶部添加白色14号字体label

在ECharts中,你可以通过设置label属性的colorfontSize来改变顶部标签的颜色和字体大小。以下是一个相关的示例:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        label: {
            show: true,
            position: 'top',
            color: '#fff',  // 设置标签颜色为白色
            fontSize: 14    // 设置标签字体大小为14
        }
    }]
};

在这个示例中,我们在series中设置了label属性,使得每个柱子的顶部都显示了对应的数据值。我们设置showtrue使得标签可见,设置position为'top'使得标签显示在柱子的顶部。我们还将color设置为'#fff'使得标签颜色为白色,将fontSize设置为14使得标签字体大小为14。

完整实例代码

<template>
  <div class="echarts1" ref="echarts">
  </div>
</template>
<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      xData: ['在岗', '不在岗', '离退休'],
      yData1: [10, 20, 30],
      yData2: [10, 20, 30],
      yData3: [10, 20, 30],
    }
  },
  watch: {},
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  methods: {
    drawEcharts() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts)
      var option = {
        grid: {
          top: '50px',
          bottom: '10px',
          left: '20px',
          right: '20px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 174, 0, 0.1)'
              }, {
                offset: 1,
                color: 'rgba(255, 174, 0, 0.5)'
              }], false),
            }
          }
        },

        legend: {
          top: 10,
          right: 20,
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          textStyle: {
            color: 'rgba(157, 185, 233, 1)',
            fontSize: '12'
          },
        },
        xAxis: [{
          data: this.xData,
          axisLabel: {
            margin: 10,
            interval: 0,
            color: '#b8c8e8',
            textStyle: {
              fontSize: 11
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(49, 119, 214, 1)',
              width: 1
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(39, 76, 129, 0.26)',
              width: 1,
            }
          },
          axisTick: {
            show: false
          },
        }],

        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            axisLabel: {
              color: 'rgba(181, 217, 255, 1)',
              textStyle: {
                fontSize: 12
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(49, 119, 214, 1)',
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 76, 129, 0.26)',
                width: 1,
              }
            }
          }],
        series: [
          {
            name: '校内教职工',
            type: 'bar',
            data: this.yData1,
            barWidth: '15%',
            label: {
              show: true,
              position: 'top',
              color: '#fff',  // 设置标签颜色为白色
              fontSize: 14,    // 设置标签字体大小为14
              fontFamily:'DIN-Bold'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(171, 70, 251, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(112, 0, 201, 0.50)'
                }], false),
              }
            },
          },

          {
            name: '外聘教师',
            type: 'bar',
            data: this.yData2,
            barWidth: '15%',
            label: {
              show: true,
              position: 'top',
              color: '#fff',  // 设置标签颜色为白色
              fontSize: 14,    // 设置标签字体大小为14
              fontFamily:'DIN-Bold'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255, 201, 11, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(255, 201, 11, 0.40)'
                }], false),
              }
            },
          },
          {
            name: '服务人员',
            type: 'bar',
            data: this.yData3,
            barWidth: '15%',
            label: {
              show: true,
              position: 'top',
              color: '#fff',  // 设置标签颜色为白色
              fontSize: 14,    // 设置标签字体大小为14
              fontFamily:'DIN-Bold'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(2, 255, 186, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(12, 224, 167, 0.40)'
                }], false),
              }
            },
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

喜欢