const offsetX = 17; //bar宽
const offsetY = 6; //倾斜角度
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
// console.log(shape);
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 c3 = [shape.x, shape.y - offsetY * 2];
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", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["中国境内", "新加坡", "香港", "英国", "美国"];
let seriesData = [100, 200, 300, 400, 300];
let seriesData2 = [120, 200, 300, 400, 300];
let colorArr = [
["#12D5AF"],
["#0BC19D", "rgba(13,8,16,0)"],
["#68EFD4", "rgba(14,185,151,0)"]
];
let colorArr2 = [
["#12D5"],
["#0BC", "rgba(13,8,16,0)"],
["#68EF", "rgba(14,185,151,0)"]
];
option = {
backgroundColor: "#0c2d55",
legend: {
show: true,
right: 30,
top: 10,
itemGap: 30,
itemWidth: 20,
itemHeight: 10,
textStyle: {
fontSize: 18,
color: "#ffffff"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
},
grid: {
left: "10%",
right: "10%",
top: "15%",
bottom: "20%",
containLabel: true
},
xAxis: {
type: "category",
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#2B7BD6"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 14,
color: "#fff",
fontFamily: "siyuan",
margin: 15,
fontWeight: "bold",
// padding: [0,60,0,0]
}
},
yAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#2B7BD6"
}
},
splitLine: {
show: false,
lineStyle: {
color: "#153D7D"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#fff'
}
// boundaryGap: ['20%', '20%'],
},
series: [
{
name:'未使用',
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
const xAxisPoint = api.coord([api.value(0), 0]);
const distance = 80;
return {
type: "group",
x: 50,
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]]
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[1][0]
},
{
offset: 1,
color: colorArr[1][1]
}
])
}
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]]
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[2][0]
},
{
offset: 1,
color: colorArr[2][1]
}
])
}
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]]
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[0][0]
},
{
offset: 1,
color: colorArr[0][0]
}
])
}
}
]
};
},
data: seriesData
},
{
name:'已使用',
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
x: 20,
children: [
{
type: "CubeLeft",
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: colorArr2[1][0]
},
{
offset: 1,
color: colorArr2[1][1]
}
])
}
},
{
type: "CubeRight",
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: colorArr2[2][0]
},
{
offset: 1,
color: colorArr2[2][1]
}
])
}
},
{
type: "CubeTop",
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: colorArr2[0][0]
},
{
offset: 1,
color: colorArr2[0][0]
}
])
}
}
]
};
},
data: seriesData2
},
// {
// type: "bar",
// // label: {
// // normal: {
// // show: true,
// // position: "top",
// // formatter: e => {
// // // return e.value + '次';
// // return e.value;
// // },
// // fontSize: 24,
// // color: "#fff",
// // fontFamily: "siyuan",
// // fontWeight: "bold",
// // offset: [0, -15]
// // }
// // },
// itemStyle: {
// color: "transparent"
// },
// tooltip: {},
// data: seriesData
// }
]
};