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柱状图上方显示文字的资料请关注脚本之家其它相关文章!

相关文章

  • Bootstrap表格和栅格分页实例详解

    Bootstrap表格和栅格分页实例详解

    这篇文章主要介绍了Bootstrap表格和栅格分页的相关资料,具有参考借鉴价值,特此分享到脚本之家平台供大家参考,需要的朋友可以参考下
    2016-05-05
  • JS实现网页时钟特效

    JS实现网页时钟特效

    这篇文章主要为大家详细介绍了JS实现网页时钟特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

    javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

    这篇文章主要介绍了javaScript生成二维码,改造jquery.qrcode.js,使之支持中文,能带logo的二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS实现代码雨特效

    JS实现代码雨特效

    这篇文章主要为大家详细介绍了JS实现代码雨特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JavaScript中this的绑定你知道几种?

    JavaScript中this的绑定你知道几种?

    this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰,导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗
    2023-02-02
  • 利用select实现年月日三级联动的日期选择效果【推荐】

    利用select实现年月日三级联动的日期选择效果【推荐】

    关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了。本文将对日期选择效果进行详细介绍。需要的朋友一起来看下吧
    2016-12-12
  • JavaScript ECMA-262-3 深入解析.第三章.this

    JavaScript ECMA-262-3 深入解析.第三章.this

    在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字
    2011-09-09
  • es6 super关键字的理解与应用实例分析

    es6 super关键字的理解与应用实例分析

    这篇文章主要介绍了es6 super关键字的理解与应用,结合实例形式分析了es6 super关键字的功能、原理、用法及相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • JS全角与半角转化实例(分享)

    JS全角与半角转化实例(分享)

    下面小编就为大家带来一篇JS全角与半角转化实例(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下
    2019-03-03

最新评论