echart2 用单独空数据求总和 & 用背景条求总和_echart tooltip 获取单个数据和总量-优快云博客

本文链接：https://blog.youkuaiyun.com/YangBingX/article/details/54019487

本文介绍了如何使用Echarts通过背景条和空数据项来展示柱状图的总和。提供了两个示例，分别是利用背景条求总和的'粗剪进度'图表和用单独空数据项展示总和的'费用统计'图表，详细配置了Echarts的选项，包括series、xAxis、yAxis等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用背景条求总和

hideBarOption4 = {
title: {
text: '粗剪进度',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 110,
x2: 50,
y2: 10,
y: 100,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['进度：', ]
},
//辅助x轴
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['进度：',]
}
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: 'rgb(217,86,82)',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 个'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [
{
value: 45,
},
]
},
{
name: '',
type: 'bar',
barWidth: 20,
yAxisIndex: 1,
itemStyle: {
normal:
{
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgb(217,86,82)',
label: {
show: true,
position: 'right',
formatter: function (params) {
for (var i = 0, l = hideBarOption4.yAxis[0].data.length; i < l; i++) {
if (hideBarOption4.yAxis[0].data[i] == params.name) {
return hideBarOption4.series[0].data[i].value + ' %';
}
}
},
textStyle: {
color: '#d5d5d5'
}
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
},
},
data: [100, ]
},
]
};
myChartHideBar4.setOption(hideBarOption4);

2. 利用一条空数据求总和

hideBarOption3 = {
title: {
text: '费用统计',
x: 'center',
textStyle: {
baseline: 'middle',//文字位置
fontSize: '19',//文字大小
color: '#d5d5d5',
fontFamily: '微软雅黑',
fontWeight: 700
}
},
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
x: 100,
x2: 50,
y2: 40,
y: 50,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: '微软雅黑',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: ['1：', '2：', '3：', '4：', '5：', ]
},

],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
stack: '1',
itemStyle: {
normal: {
color: '#a4a4a4',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [52,56,37,23,52]
},

{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: '#a4a4a4',
label: {
show: true,
position: 'insideRight',
formatter: '{c} 元'
}
},
emphasis: {
color: 'rgba(0,0,0,0)',
barBorderWidth: 1,
barBorderColor: 'rgba(0,0,0,0)',
}
},
data: [78, 55, 63, 54,
85,
]
},
{
name: '',
type: 'bar',
stack: '1',
itemStyle: {
normal:
{
label: {
show: true,
position: 'right',
formatter: function (params) {
//计算汇总值
var name = params.name;
var index; //x轴序列顺序
for (var i = 0; i < hideBarOption3.yAxis[0].data.length; i++) {
if (name == hideBarOption3.yAxis[0].data[i]) {
index = i;
break;
}
}
var total = 0;
for (var i = 0; i < hideBarOption3.series.length; i++) {
if (hideBarOption3.series[i].stack == params.series.stack) {
total += hideBarOption3.series[i].data[index];
}
}
return 100 * hideBarOption3.series[0].data[index] / total + '%';
},
textStyle: {
color: '#d5d5d5'
}
}
}
},
data: [0, 0, 0, 0, 0, ]
},
]
};
myChartHideBar3.setOption(hideBarOption3);

requre进来

可对比不同之处