options: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: 'transparent',
textStyle: {
color: '#fff',
},
formatter: function (params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value;
}
relVal += '<br/>' + '完成率:' + (params[0].data?.rate ?? 0) + '%';
return relVal;
},
},
legend: {
show: true,
data: ['已确认完成任务数', '按时完成任务数'],
x: 'center',
textStyle: {
color: 'white',
fontSize: 12,
},
},
color: ['#55c9d3', '#0099c8'],
grid: {
left: '0%',
right: '1%',
bottom: '10%',
top: '15%',
containLabel: true,
},
xAxis: {
type: 'category',
data: [],
triggerEvent: true,
axisTick: {
length: 5,
},
axisLabel: {
textStyle: { color: '#ffffff' },
interval: 0,
},
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: 'white',
},
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
series: [
{
type: 'bar',
stack:'number',//实现堆叠的关键
name: '已确认完成任务数',
data: [],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(85,201,211,1)' }, //柱图渐变色
{ offset: 1, color: 'rgba(85,201,211,0)' }, //柱图渐变色
]),
},
// emphasis: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(6,181,215,1)' }, //柱图渐变色
// { offset: 1, color: 'rgba(6,181,215,1)' }, //柱图高亮渐变色
// ]),
// },
},
label: {
show: true,
},
large: true,
barWidth: 30,
},
{
type: 'bar',
stack:'number',
name: '按时完成任务数',
data: [],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0,153,200,1)' }, //柱图渐变色
{ offset: 1, color: 'rgba(0,153,200,0)' }, //柱图渐变色
]),
},
// emphasis: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(3,149,195,1)' }, //柱图渐变色
// { offset: 1, color: 'rgba(3,149,195,1)' }, //柱图高亮渐变色
// ]),
// },
},
label: {
show: true,
},
large: true,
barWidth: 30,
},
],
},
echarts柱状图两种颜色上下堆叠增加而不是重合
于 2023-03-10 17:07:32 首次发布