echarts数据可视化实现多个柱状堆叠图顶部显示总数示例
作者：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柱状堆叠图顶显总数的资料请关注脚本之家其它相关文章！