// 柱状图的宽度，y是x的一半
const offsetX = 20 //
const offsetY = 10
// 绘制左侧面
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 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)
const dataX = [1, 2, 3, 4, 5]
const seriesData1 = [22, 33, 24, 55, 66]
const seriesData2 = [22, -33, 44, 55, 66]
const seriesData3 = [22, 33, -4, 55, 66]
option = {
backgroundColor: '#031a40',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: 'rgba(0, 0, 0, 0.8)',
textStyle: {
color: '#fff'
},
formatter: function (params, ticket, callback) {
const item = params[1]
return item.name + ' : ' + item.value + '万元'
}
},
grid: {
left: '2%',
top: '15%',
right: '0',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: dataX,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(239, 247, 253, .1)'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
color: '#E7FCFF',
margin: 20
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: '#0f3451'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#87baf8'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#87baf8'
},
fontSize: 16
}
},
series: [
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
const _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: '#f6c95c'
},
{
offset: 1,
color: '#f6c95c'
}
])
}
},
{
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: '#dcb14a'
},
{
offset: 1,
color: '#dcb14a'
}
])
}
}
]
if (api.value(1) >= 0) {
_children.push({
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: '#dcb14a'
},
{
offset: 1,
color: '#dcb14a'
}
])
}
})
} else {
_children.push({
type: 'CubeBottom',
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: '#dcb14a'
},
{
offset: 1,
color: '#dcb14a'
}
])
}
})
}
return {
type: 'group',
x: -(offsetX * 2),
y: 0,
children: _children
}
},
data: seriesData1
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
const _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: '#08fcff'
},
{
offset: 1,
color: '#08fcff'
}
])
}
},
{
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: '#03bdbf'
},
{
offset: 1,
color: '#03bdbf'
}
])
}
}
]
if (api.value(1) >= 0) {
_children.push({
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: '#00e8eb'
},
{
offset: 1,
color: '#00e8eb'
}
])
}
})
} else {
_children.push({
type: 'CubeBottom',
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: '#00e8eb'
},
{
offset: 1,
color: '#00e8eb'
}
])
}
})
}
return {
type: 'group',
x: offsetY,
y: 0,
children: _children
}
},
data: seriesData2
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
const _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: '#1898e2'
},
{
offset: 1,
color: '#1898e2'
}
])
}
},
{
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: '#097dc0'
},
{
offset: 1,
color: '#097dc0'
}
])
}
}
]
if (api.value(1) >= 0) {
_children.push({
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: '#097dc0'
},
{
offset: 1,
color: '#097dc0'
}
])
}
})
} else {
_children.push({
type: 'CubeBottom',
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: '#097dc0'
},
{
offset: 1,
color: '#097dc0'
}
])
}
})
}
return {
type: 'group',
x: offsetX * 2 + offsetY * 2,
y: 0,
children: _children
}
},
data: seriesData3
},
// 下面两个数据是柱状图上方的数组
{
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
fontSize: 24,
color: '#fff',
offset: [25, -25],
},
},
itemStyle: {
color: 'transparent',
},
tooltip: {},
data: seriesData1,
},
{
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
fontSize: 24,
color: '#fff',
offset: [10, -25],
},
},
itemStyle: {
color: 'transparent',
},
tooltip: {},
data: seriesData2,
},
{
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
fontSize: 24,
color: '#fff',
offset: [0, -25],
},
},
itemStyle: {
color: 'transparent',
},
tooltip: {},
data: seriesData3,
},
]
}