echarts 堆叠柱状图label显示总和
记录一下使用echart的柱状图堆叠时，需要在柱状图顶部显示总计数值的问题。参考文章的实现，再堆叠一个透明的柱状图来显示总和数据标签，最后就是在触发legend切换时，更换option.缺点是切换legend触发事件时需要重新设置option并更改总计数值的逻辑。
chartRender(dom, Xdata, Ydata) {
let that = this;
let ledata = [];
// let total = []
Ydata.forEach(element => {
ledata.push(element.name);
});
let sum = []
//循环计算总和
for (let i = 1; i < Ydata[0].data.length; i++)
sum.push(
JSON.parse(Ydata[0].data[i]) +
JSON.parse(Ydata[1].data[i]) +
JSON.parse(Ydata[2].data[i]) +
JSON.parse(Ydata[3].data[i]) +
JSON.parse(Ydata[4].data[i])
);
this.chart = echarts.init(dom);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
bottom: 10,
data: ledata,
itemWidth: 7,
itemHeight: 7,
icon: 'circle',
textStyle: {
fontSize: 12
}
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
yAxis: [
{
type: 'value',
name: '单位：个',
nameTextStyle: {
align: 'right',
color: '#555B6B'
},
axisLine: {
show: true,
lineStyle: {
color: '#E3E7EF'
}
},
axisLabel: {
color: '#555B6B'
}
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#E3E7EF'
}
}
}
],
xAxis: {
type: 'category',
axisLabel: {
interval: 0
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: Xdata.slice(1)
},
series: [
{
name: Ydata[0].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[0].data.slice(1)
},
{
name: Ydata[1].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[1].data.slice(1)
// label: {
// show: true,
// precision: 1,
// position: 'top'
// },
},
{
name: Ydata[2].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[2].data.slice(1)
// label: {
// show: true,
// precision: 1,
// position: 'top'
// },
},
{
name: Ydata[3].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[3].data.slice(1)
// label: {
// show: true,
// precision: 1,
// position: 'top'
// },
},
{
name: Ydata[4].name,
type: 'bar',
stack: 'total',
barWidth: '22',
emphasis: {
focus: 'series'
},
barWidth: '17px',
data: Ydata[4].data.slice(1)
},
{
name: '总量',
type: 'bar',
stack: 'total',
data: sum,
color: 'transparent',
label: {
position: 'insideBottom',
show: true,
color: '#666666',
formatter: function (param) {
return param.value;
}
}
}
]
};
this.chart.setOption(option);
//监听切换legend事件legendselectchanged，重新计算总和
this.chart.on('legendselectchanged', function (obj) {
var selected = obj.selected;
sum = [];
let isT = [];
Object.keys(selected).forEach((element, index) => {
if (selected[element]) isT.push(index);
});
for (let i = 1; i < Ydata[0].data.length; i++) {
let iSum =0
isT.forEach(element => {
iSum += JSON.parse(Ydata[element].data[i])
});
sum[i-1] = iSum
console.log('iSum',iSum);
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
bottom: 10,
data: ledata,
itemWidth: 7,
itemHeight: 7,
icon: 'circle',
textStyle: {
fontSize: 12
}
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
yAxis: [
{
type: 'value',
name: '单位：个',
nameTextStyle: {
align: 'right',
color: '#555B6B'
},
axisLine: {
show: true,
lineStyle: {
color: '#E3E7EF'
}
},
axisLabel: {
color: '#555B6B'
}
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#E3E7EF'
}
}
}
],
xAxis: {
type: 'category',
axisLabel: {
interval: 0
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: Xdata.slice(1)
},
series: [
{
name: Ydata[0].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[0].data.slice(1)
},
{
name: Ydata[1].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[1].data.slice(1)
},
{
name: Ydata[2].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[2].data.slice(1)
// label: {
// show: true,
// precision: 1,
// position: 'top'
// },
},
{
name: Ydata[3].name,
type: 'bar',
stack: 'total',
barWidth: '17px',
emphasis: {
focus: 'series'
},
data: Ydata[3].data.slice(1)
// label: {
// show: true,
// precision: 1,
// position: 'top'
// },
},
{
name: Ydata[4].name,
type: 'bar',
stack: 'total',
barWidth: '22',
emphasis: {
focus: 'series'
},
barWidth: '17px',
data: Ydata[4].data.slice(1)
},
{
name: '总量',
type: 'bar',
stack: 'total',
data: sum,
color: 'transparent',
label: {
position: 'insideBottom',
show: true,
color: '#666666',
formatter: function (param) {
return param.value;
}
}
}
]
};
that.chart.setOption(option);
});
}
实现效果：
echarts 堆叠柱状图label显示总和相关推荐
- 关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题 平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
- echarts 堆叠柱状图 在顶部显示数据总数
项目需求: 在堆叠柱状图顶部显示该柱条所有数据的总和. 效果图: 代码实现: //原有堆叠柱状图数据 let series = [{name: '优秀',type: 'bar',stack: 'x', ...
- echarts 堆叠柱状图
methods: {// 堆叠柱状图显示总数drawHistorygram() {const myChart = echarts.init(this.$refs.historygramEchart)/ ...
- echarts堆叠柱状图加折线图详细介绍
先介绍一下成品图 这个图形主要就是采用echarts,直接上代码. <!DOCTYPE html> <html> <head><meta charset=&q ...
- echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星 官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
- ECharts堆叠柱状图动态数据label显示总和和this指向问题
1.当数据为动态渲染时,获取series的数据,然后在最后一项添加label对象 let option; // 图标参数配置 let xData = []; let legendData = []; ...
- echarts的饼图label显示缺失
今天画echarts的图的时候出现了一个非常奇怪的问题,就是在饼图上的label有一个不显示,数据是这样的: 但是画出来的图是这样的: 非常的奇怪,就是"柴油"这一项不显示标签,但 ...
- echarts堆叠柱状图计算总数
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...
- echarts，柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
最新文章
- Micropython开发实例之TPYBoard v702GPRS功能测试
- STL的deque容器
- 【C语言】switch中无break的情况
- android menu菜单 实现点击后不消失_教你修改Windows万年不变的黄色文件夹，让文件也不枯燥...
- leetcode235. 二叉搜索树的最近公共祖先
- LVM逻辑卷管理命令
- mysql 主从同步，双主同步，如果服务器意外挂机，不同步怎么办
- Tomcat引起的中文乱码问题
- html给图片设置编剧,漫画简明编剧教程【4】如何设计角色
- 计算机系统优化的方法.,20种优化电脑开机速度方法！
- boostrap中lg,md,sm,xs
- 开发人员必备的四象限壁纸
- 关于PAT报错：warning: ignoring return value of ‘scanf’, declared with attribute warn_unused_result
- python n个list如何组成矩阵_使用Python并行框架Dask处理和分析大规模时空数据
- I'm coming now.
- Hie with the Pie (状压 DP)
- 微信公众平台开发——新增素材
- flask+echarts地图制作心得
- Android电池矫正方法
- 李宏毅老师《机器学习》课程笔记-5 Transformer
热门文章
- 数据指标体系之战略指标
- 浅谈晶振作用功能、晶体和晶振、外部时钟和内部时钟、分频倍频预分频后分频、定时器和计数器
- 【王卓】数据结构与算法图(九)
- 关于Windows10服务中没有SNMP Service问题以及SNMP没有安全选项的问题
- RT-Thread--片上 flash作 U 盘
- openssh升级流程
- 【踩坑专栏】NoSuchBeanDefinitionException: No qualifying bean of type ‘xxx.xxxMapper
- 网页设计技巧：如何做好图片与文字的配合？
- 计算机二级学校有名单吗,文管二级和计算机二级有啥区别？
- 马云退休后首次演讲！听众是全球1500名校长