js
复制代码
const offsetX = 18;
const offsetY = 10;
[0, 0].forEach((customOffset, index) => {
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - offsetX, shape.y - offsetY];
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
}
});
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
const c4 = [shape.x + offsetX, shape.y - offsetY];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
}
});
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY];
const c3 = [shape.x, shape.y - offsetX];
const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
}
});
echarts.graphic.registerShape('CubeLeft' + index, CubeLeft);
echarts.graphic.registerShape('CubeRight' + index, CubeRight);
echarts.graphic.registerShape('CubeTop' + index, CubeTop);
});
const value1 = [100, 220, 100, 160];
const value2 = [200, 180, 180, 210];
const value3 = [180, 230, 90, 90];
const value4 = [240, 190, 60, 253];
let max = 200;
value1.forEach((v, i) => {
const sum = v + value2[i] + value3[i] + value4[i];
max = sum > max ? sum : max;
});
max = Math.ceil(max / 200) * 200;
option = {
backgroundColor: '#012366',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: '10%',
containLabel: true
},
legend: {
type: 'scroll',
orient: 'horizontal',
top: 'top',
itemWidth: 20, // 底部label的宽度
itemHeight: 12, // 设置高度
textStyle: {
height: 12,
color: '#FFFFFF'
},
data: [
{
name: '出国',
icon: 'roundRect1',
itemStyle: {
color: '#FFE814'
}
},
{
name: '就业',
icon: 'roundRect1',
itemStyle: {
color: '#FF8A00'
}
},
{
name: '考公',
icon: 'roundRect1',
itemStyle: {
color: '#19C0C7'
}
},
{
name: '升学',
icon: 'roundRect1',
itemStyle: {
color: '#3C88F6'
}
}
]
},
xAxis: {
type: 'category',
data: ['2024级', '2023级', '2022级', '2021级'],
axisLine: {
show: true,
lineStyle: {
width: 2,
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
color: '#FFFFFF',
fontSize: 14
}
},
yAxis: {
type: 'value',
min: 0,
max: max,
interval: 200,
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 0.7)'
}
},
series: [
{
name: '出国',
type: 'custom',
itemStyle: {
color: '#FFE814'
},
renderItem: function (params, api) {
const index = params.dataIndex;
const location = api.coord([
api.value(0),
api.value(1) + value1[index] + value2[index] + value3[index]
]);
return {
type: 'group',
children: [
{
type: 'CubeLeft1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
value1[index] + value2[index] + value3[index]
])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,205,6, 1)'
},
{
offset: 1,
color: 'rgba(255,205,6, .7)'
}
])
}
},
{
type: 'CubeRight1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
value1[index] + value2[index] + value3[index]
])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,244,140, 1)'
},
{
offset: 1,
color: 'rgba(255,244,140, .8)'
}
])
}
},
{
type: 'CubeTop1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(255,232,20, .9)`
}
}
]
};
},
data: value4
},
{
name: '就业',
type: 'custom',
itemStyle: {
color: '#FF8A00'
},
renderItem: function (params, api) {
const index = params.dataIndex;
const location = api.coord([
api.value(0),
api.value(1) + value1[index] + value2[index]
]);
return {
type: 'group',
children: [
{
type: 'CubeLeft1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
value1[index] + value2[index]
])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,138,0, 1)'
},
{
offset: 1,
color: 'rgba(255,138,0, .5)'
}
])
}
},
{
type: 'CubeRight1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([
api.value(0),
value1[index] + value2[index]
])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,165,61, 1)'
},
{
offset: 1,
color: 'rgba(255,165,61, .6)'
}
])
}
},
{
type: 'CubeTop1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(255,138,0, .9)`
}
}
]
};
},
data: value3
},
{
name: '考公',
type: 'custom',
itemStyle: {
color: '#19C0C7'
},
renderItem: function (params, api) {
const index = params.dataIndex;
const location = api.coord([
api.value(0),
api.value(1) + value1[index]
]);
return {
type: 'group',
children: [
{
type: 'CubeLeft1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), value1[index]])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25,192,199, 1)'
},
{
offset: 1,
color: 'rgba(25,192,199, .5)'
}
])
}
},
{
type: 'CubeRight1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), value1[index]])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(142,211,242, 1)'
},
{
offset: 1,
color: 'rgba(142,211,242, .6)'
}
])
}
},
{
type: 'CubeTop1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(142,211,242, .9)`
}
}
]
};
},
data: value2
},
{
name: '升学',
type: 'custom',
itemStyle: {
color: '#3C88F6'
},
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
{
type: 'CubeLeft1',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(60,136,246, 1)'
},
{
offset: 1,
color: 'rgba(60,136,246, .5)'
}
])
}
},
{
type: 'CubeRight1',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(121,178,241, 1)'
},
{
offset: 1,
color: 'rgba(121,178,241, .6)'
}
])
}
},
{
type: 'CubeTop1',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(121,178,241, .9)`
}
}
]
};
},
data: value1
}
]
};
