示例代码均可直接粘贴到echarts官方示例替换预览 参考原文地址：blog.csdn.net/weixin_6977…
1.使用custom自定义绘制
const color = ['rgba(29, 230, 235,1)', 'rgba(7, 235, 251,1)'];
const category = ['1', '2', '3', '4', '5', '6'];
// 绘制左侧面
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 + 3.5, shape.y];
const c1 = [shape.x - 11.5, shape.y - 3];
const c2 = [xAxisPoint[0] - 11.5, xAxisPoint[1] - 6.5];
const c3 = [xAxisPoint[0] + 3.5, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
// @ts-ignore
.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 + 3, shape.y];
const c2 = [xAxisPoint[0] + 3, xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 12, xAxisPoint[1] - 7];
const c4 = [shape.x + 12, shape.y - 7];
ctx
.moveTo(c1[0], c1[1])
// @ts-ignore
.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 + 3.5, shape.y];
const c2 = [shape.x + 12.5, shape.y - 7.5]; //右点
const c3 = [shape.x - 2.5, shape.y - 10];
const c4 = [shape.x - 11.5, shape.y - 3];
ctx
.moveTo(c1[0], c1[1])
// @ts-ignore
.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);
// option
option = {
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'custom',
renderItem: (params, api) => {
let cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
// @ts-ignore
color: color[0]
},
{
offset: 1,
color: 'rgba(7, 20, 52,0.7)'
}
]);
let cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(7, 20, 52,1)'
},
{
offset: 1,
// @ts-ignore
color: color[0]
}
]);
let cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
// @ts-ignore
color: color[1] || color[0]
}
]);
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
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: cubeLeftStyle
}
},
{
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: cubeRightStyle
}
},
{
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: cubeTopStyle
}
}
]
};
},
data: [100, 200, 300, 400, 500, 600]
},
{
type: 'custom',
renderItem: (params, api) => {
let cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
// @ts-ignore
color: color[0]
},
{
offset: 1,
color: 'rgba(7, 20, 52,0.7)'
}
]);
let cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(7, 20, 52,1)'
},
{
offset: 1,
// @ts-ignore
color: color[0]
}
]);
let cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
// @ts-ignore
color: color[1] || color[0]
}
]);
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
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: cubeLeftStyle
}
},
{
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: cubeRightStyle
}
},
{
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: cubeTopStyle
}
}
]
};
},
data: [100, 200, 300, 400, 500, 600]
}
]
};
2.使用pictorialBar象形柱图添加多个面拼接3D效果
// 第一个柱子的值
const zzx1 = [100, 200, 300, 400, 500, 600]; // 实际值
// 第二个柱子的值
const wgx1 = [123, 456, 523, 652, 145, 236];
// 变量: 改变每个柱子的大小, 后期可将其设置为动态的?
const barWidth = 30;
// option
option = {
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: ['1', '2', '3', '4', '5', '6'],
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
// (0)第一个柱子 中间的正方形
{
type: 'pictorialBar', // 象型柱状
symbol: 'diamond',
symbolSize: [barWidth, 5], // 调整大小
// symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
symbolOffset: ['-55%', -3], // 图形相对于原本位置的偏移
symbolPosition: 'end',
z: 12,
color: '#2584e0',
data: zzx1
},
// (1)第二个柱子中间的正方形
{
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [barWidth, 8],
// symbolOffset: [13, -3],
symbolOffset: ['55%', -3],
symbolPosition: 'end',
z: 12,
color: '#07fdd3',
data: wgx1
},
// (2)第一个柱子 底部的正方形
{
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [barWidth, 5],
// symbolOffset: [-13, 3],
symbolOffset: ['-55%', 3],
z: 12,
color: '#355ba8',
data: zzx1
},
// (3)第二个柱子 底部的正方形
{
name: '',
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [barWidth, 5],
// symbolOffset: [13, 3],
symbolOffset: ['55%', 3],
color: '#2095a3',
z: 12,
data: wgx1
},
// (4)一个柱子, 下方有颜色填充的的柱子
{
name: '',
type: 'bar',
barWidth: barWidth,
barGap: '10%',
// zlevel: 2,
stack: '1',
itemStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.5,
color: 'rgba(44, 97, 188,0.7)'
// color: '#2c61bc',
},
{
offset: 0.5,
color: '#2584e0'
},
{
offset: 1,
color: '#214a87'
}
]),
// barBorderRadius: 0,
borderRadius: 0
},
// 是否在每个柱子显示 相应的值
label: {
show: true,
position: ['0', '-25'],
color: '#005dd9',
fontSize: 14,
fontWeight: 'bold'
},
data: zzx1
},
// (5)第二个柱子, 下方有颜色填充的的柱子
{
name: '',
type: 'bar',
stack: '2',
barWidth: barWidth,
itemStyle: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.5,
color: 'rgba(15, 182, 182,0.7)'
},
{
offset: 0.5,
color: '#0ccec7'
},
{
offset: 1,
color: '#0bddd0'
}
]),
// barBorderRadius: 0,
borderRadius: 0
},
// 是否在每个柱子显示 相应的值
label: {
show: true,
position: ['0', '-25'],
color: '#06e6f6',
fontSize: 14,
fontWeight: 'bold'
},
data: wgx1
}
]
};
