2023-08-29

···

// var option;
var large = 0.2;
// 步骤四：准备配置项
const data = [500, 500, 500, 500, 500, 800, 800];
const lineData = [150, 230, 224, 218, 135, 147, 260];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0);
const color = [];
option = {
color,
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
type: 'category',
show: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: {
type: 'value',
max: max
},
series: [
{
name: 'Email',
data: [120, 132, 101, 134, 90, 230, 210],
barWidth: 20,
type: 'bar',
stack: 'ad',
itemStyle: {
normal: {
color: function (d) {
let a = 6 * 10;
return rgba(34,95,219,${( (100 - a + d.dataIndex * 5) / 100 ).toFixed(2)});
}
}
}
},
{
name: 'Union',
data: [220, 182, 191, 234, 290, 330, 310],
barWidth: 20,
type: 'bar',
stack: 'ad'
},
{
xAxisIndex: 1,
itemStyle: {
color: 'rgba(18, 18, 18, 0)'
},
data: data.map(() => max),
barWidth: 30,
emphasis: {
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(180, 180, 180, 0.25)'
}
]
}
}
},
type: 'bar'
}
]
};

···