echarts数据可视化实现多个柱状堆叠图顶部显示总数示例

 更新时间:2023年07月19日 10:38:04   作者:Smith  
这篇文章主要为大家介绍了echarts实现多个柱状堆叠图顶部显示总数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

效果图

左边的柱状图顶部显示所有堆叠图数据的总和 右边柱状图顶部也显示所有堆叠数据的总和

方法思路

好多博主用的都是echarts中 barGap 为 '-100%' 让两个系列的柱子重叠 从而实现顶部显示总数 但是这种方法只适合 这一个X轴 只有一个堆叠柱状图 我的需求是一个X轴项 有两个堆叠柱状图 用了这种方法后并不适用该项目,这种方法的思路是单独出一个数据 然后移动该数据的位置 从而实现重叠显示,既然这种思路不适用该项目 转变思路 直接改变他显示的lable不就可以了 有想法了就去实践

首先顶部显示数字

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,// 显示label
            position: "top", // 显示的label的位置
          }
        },
        data: [],//数据
      }

显示出来label后 只需要修改label的显示就可以了

修改label的显示

label提供了一个formatter 方法 来对显示的文字进行处理,、只需要在你堆叠柱状图的最后一个数据上这么处理就可以修改他的显示label 但是他的data数据不要改变  这样就不会影响到他的柱状高度的显示 同时label进行了修改

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,
            position: "top",
        // 首先把所有项的总和都算出来按照固定的顺序方法zonghe这个数组中  
          然后在方法中用下标对应上总和方法 return出来就可以改变他的label现实文字
            formatter: function (params) {
              var index = params.dataIndex;
              return zonghe[index]
            },      
          }


        },

        data: [],
      }

 这样基本完事  后面的第二个柱状图也是这样  只要放到zonghe这个数组中的数据跟你显示的数据能一一对应上 数据就不会错 鼠标悬浮上显示的tooltip数据也不会错

假如你想在鼠标悬浮时tooltip中不显示某一项

在echarts的option中 tooltip设置项

tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            var res = params[0].name
            for (var i = 0; i < params.length; i++) {
              if (this.adStackArr[params[i].seriesIndex].name != null) {  
            // 这行代码就是判断语句 具体情况 具体分析  自己打印params 来实现自己的判断
                res += `<div >
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
                    params[i].color,
                  ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data}
                </div>`;
              }
            }
            return res; //最后返回的数据得一个字符串 并且支持html css 显示我用的都是行内式样式 拼接成一个字符串 给最后显示 数遍悬浮的样式也是在这里设置 你的字符串是什么样式  渲染出来就是什么样的
          }
        },

至此 大功告成

以上就是echarts实现多个柱状堆叠图顶部显示总数示例的详细内容,更多关于echarts柱状堆叠图顶显总数的资料请关注脚本之家其它相关文章!

相关文章

  • es6 javascript对象Object.values() , Object.entries()示例详解

    es6 javascript对象Object.values() , Object.entr

    这篇文章主要介绍了es6 javascript对象Object.values() , Object.entries()的示例代码,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • TypeScript实现状态模式的示例代码

    TypeScript实现状态模式的示例代码

    本文主要介绍了TypeScript实现状态模式的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-06-06
  • 常见JS前端接口校验方式总结

    常见JS前端接口校验方式总结

    作为一名优秀的接口调用工程师,对接口的返回信息进行校验是必不可少的,本文整理的是一些常用的校验方式,希望能够对大家有所帮助
    2023-05-05
  • 基于Echarts实现绘制立体柱状图的示例代码

    基于Echarts实现绘制立体柱状图的示例代码

    这篇文章主要为大家详细介绍了如何基于Echarts实现绘制立体柱状图的功能,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2023-02-02
  • JS格式化字符串的两种方法(反引号与String.prototype)

    JS格式化字符串的两种方法(反引号与String.prototype)

    本文一共介绍了两种实现方式,使用反引号或自定义方法实现,需要的朋友可以参考下
    2023-06-06
  • JS提交form表单实例分析

    JS提交form表单实例分析

    这篇文章主要介绍了JS提交form表单的方法,结合实例形式简单分析了页面加载时提交表单及通过链接提交表单的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JS定时器如何实现提交成功提示功能

    JS定时器如何实现提交成功提示功能

    这篇文章主要介绍了JS定时器如何实现提交成功提示功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的体积,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • js实现的捐赠管理完整实例

    js实现的捐赠管理完整实例

    这篇文章主要介绍了js实现的捐赠管理完整实例,包括了html页面、js脚本及css样式的完整实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 利用js动态添加删除table行的示例代码

    利用js动态添加删除table行的示例代码

    本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论