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属性onresize

    浅谈javascript属性onresize

    这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript中函数的四种调用方式总结

    JavaScript中函数的四种调用方式总结

    这篇文章主要为大家详细介绍了JavaScript中函数的四种调用方式,文中的示例代码讲解详细,对我们深入掌握JavaScript有一定的帮助,需要的可以参考下
    2023-10-10
  • 前端使用Blob下载文件的几种方式

    前端使用Blob下载文件的几种方式

    这篇文章主要介绍了前端使用Blob下载文件的几种方式,分别是直接返回文件的网络地址和返回文件流,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • js模仿java的Map集合详解

    js模仿java的Map集合详解

    这篇文章主要介绍了js模仿java的Map集合的相关资料,Java中某些最常用的集合类是List和Map,感兴趣的小伙伴们可以了解一下
    2016-01-01
  • ng-options和ng-checked在表单中的高级运用(推荐)

    ng-options和ng-checked在表单中的高级运用(推荐)

    AngularJS是当前非常的流行的前端框架,它的语法糖非常多,也极大的方便了前端开发者。这篇文章主要介绍了ng-options和ng-checked在表单中的高级运用,需要的朋友可以参考下
    2017-01-01
  • JavaScript Function函数类型介绍

    JavaScript Function函数类型介绍

    在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法
    2015-04-04
  • JS如何获取对象键值对中key值的方法

    JS如何获取对象键值对中key值的方法

    这篇文章主要介绍了JS如何获取对象键值对中key值的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Prototype框架详解

    Prototype框架详解

    Prototype是一个JavaScript框架,旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js,本文给大家介绍prototype框架,感兴趣的朋友一起学习吧
    2015-11-11
  • js一维数组、多维数组和对象的混合使用方法

    js一维数组、多维数组和对象的混合使用方法

    这篇文章主要介绍了js一维数组、多维数组和对象的混合使用方法,需要的朋友可以参考下
    2016-04-04
  • CocosCreator学习之模块化脚本

    CocosCreator学习之模块化脚本

    这篇文章主要介绍了Cocos Creator 模块化脚本,想加深学习CocosCreator脚本的同学,一定要看一下
    2021-04-04

最新评论