// 柱状图的宽度，y是x的一半
const offsetX = 14
const offsetY = 7
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
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 CubeCenter = 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] + 2, xAxisPoint[1] - 1]
const c4 = [shape.x + 2, shape.y - 1]
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()
}
})
// // 绘制底面
const CubeBottom = echarts.graphic.extendShape({
shape: {
x: 10,
y: 10
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
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)
echarts.graphic.registerShape('CubeBottom', CubeBottom)
echarts.graphic.registerShape('CubeCenter', CubeCenter)
const dataX = ['HTML','CSS','JS','Vue','React','ThreeJs']
const barData = [233, 400, 460, 655, 132, 133]
const rlColorFill = {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{
offset: 0,
color: "#49FFFE00",
},
{
offset: .1,
color: "#49FFFE20",
},
{
offset: 1,
color: "#49FFFE",
},
],
}
const rlColorFill2 = {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{
offset: 0,
color: "#FF8F1F00",
},
{
offset: .1,
color: "#FF8F1F20",
},
{
offset: 1,
color: "#FF8F1F",
},
],
}
option = {
//你的代码
backgroundColor: '#284376',
color: ['#49FFFE', '#FF8F1F'],
grid: {
top: '5%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
legend: {
right: '10%',
top: "2%",
textStyle: {
color: "#fff"
}
},
xAxis: {
type: 'category',
data: dataX,
axisLabel: {
fontSize: 20,
color: "#fff",
fontWeight: 600
},
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// splitLine: {
// show: true,
// lineStyle: {
// type: 'dashed',
// color: '#BDBDBD'
// }
// }
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 20,
color: "#fff",
fontWeight: 600
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#BDBDBD5a'
}
}
},
series: [
{
name: 'S02',
type: 'custom',
z:9999,
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
x: -30,
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: rlColorFill,
}
},
{
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: rlColorFill,
}
},
{
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: rlColorFill.colorStops[2].color,
stroke: 'rgba(3, 25, 63, .1)', //边框颜色
}
},
{
type: 'CubeCenter',
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: rlColorFill,
}
},
]
}
},
data: barData
},
{
name: '烟尘',
type: 'custom',
z:9999,
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: 30,
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: rlColorFill2,
}
},
{
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: rlColorFill2,
}
},
{
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: rlColorFill2.colorStops[2].color,
stroke: 'rgba(3, 25, 63, .1)', //边框颜色
}
},
{
type: 'CubeCenter',
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: rlColorFill2,
}
},
]
}
},
data: barData.map((v) => v / 2)
},
]
}