const colors = [
{
'left': 'rgba(234, 162, 57, .16)',
'right': 'rgba(234, 162, 57, .6)',
'top': 'rgba(234, 162, 57, 1)',
'bottom': 'rgba(234, 162, 57, .46)',
'front': 'rgba(234, 162, 57, .66)',
},
{
'left': 'rgba(63, 198, 139, .16)',
'right': 'rgba(63, 198, 139, .6)',
'top': 'rgba(63, 198, 139, 1)',
'bottom': 'rgba(63, 198, 139, .46)',
'front': 'rgba(63, 198, 139, .66)',
},
{
'left': 'rgba(14, 252, 255, .16)',
'right': 'rgba(14, 252, 255, .6)',
'top': 'rgba(14, 252, 255, 1)',
'bottom': 'rgba(14, 252, 255, .46)',
'front': 'rgba(14, 252, 255, .66)',
},
{
'left': 'rgba(175, 111, 255, .16)',
'right': 'rgba(175, 111, 255, .6)',
'top': 'rgba(175, 111, 255, 1)',
'bottom': 'rgba(175, 111, 255, .46)',
'front': 'rgba(175, 111, 255, .66)',
},
{
'left': 'rgba(251, 195, 226, .16)',
'right': 'rgba(251, 195, 226, .6)',
'top': 'rgba(251, 195, 226, 1)',
'bottom': 'rgba(251, 195, 226, .46)',
'front': 'rgba(251, 195, 226, .66)',
},
]
const maxList = [90, 90, 90, 90, 90];
const valueList = [20, 53, 47, 65, 29];
// 注册5个面图形:左侧、前面、右面、上面、下面
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
const CubeLeft_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x - 2, shape.y - 14];
const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 20, 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 CubeFront_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 18, shape.y];
const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 20, 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_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x + 18, shape.y];
const c1 = [shape.x + 36, shape.y - 14];
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] + 18, 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 CubeTop_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 18, shape.y];
const c2 = [shape.x + 36, shape.y - 14];
const c3 = [shape.x - 2, shape.y - 14];
ctx.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath()
}
});
const CubeBottom_1 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
const c1 = [xAxisPoint[0] + 18, xAxisPoint[1]];
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
ctx.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath()
}
});
echarts.graphic.registerShape('CubeLeft_1', CubeLeft_1)
echarts.graphic.registerShape('CubeFront_1', CubeFront_1)
echarts.graphic.registerShape('CubeRight_1', CubeRight_1)
echarts.graphic.registerShape('CubeTop_1', CubeTop_1)
echarts.graphic.registerShape('CubeBottom_1', CubeBottom_1)
option = {
backgroundColor: 'rgba(16, 60, 117, 1)',
grid: {
left: 40,
right: 40,
bottom: 100,
top: 100,
containLabel: true
},
xAxis: {
type: 'category',
data: ['星期一', '星期一', '星期一', '星期一', '星期一'],
axisLine: {
show: false,
},
offset: 10,
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 16,
align: 'left'
},
},
yAxis: {
min: 0,
max: 100,
interval: 20,
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, .16)'
}
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: 'rgba(255, 255, 255, .16)'
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
fontSize: 16,
color: '#fff'
},
},
series: [
//阴影部分
{
type: 'custom',
renderItem: function (params, api) {
console.log(api)
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [
{
type: 'CubeBottom_1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(103, 180, 233, .16)'
}
},
{
type: 'CubeLeft_1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(103, 180, 233, .04)'
}
},
{
type: 'CubeFront_1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(103, 180, 233, .16)'
}
},
{
type: 'CubeRight_1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(103, 180, 233, .08)',
}
},
{
type: 'CubeTop_1',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(103, 180, 233, .26)',
}
},
]
}
},
data: maxList
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5cc4eb'
},
{
offset: 0.8,
color: '#21658c'
}
])
return {
type: 'group',
children: [
{
type: 'CubeBottom_1',
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: colors[params.dataIndexInside]['bottom']
}
},
{
type: 'CubeLeft_1',
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: colors[params.dataIndexInside]['left']
}
},
{
type: 'CubeFront_1',
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: colors[params.dataIndexInside]['front']
}
},
{
type: 'CubeRight_1',
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: colors[params.dataIndexInside]['right']
}
},
{
type: 'CubeTop_1',
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: colors[params.dataIndexInside]['top']
}
},
]
}
},
data: valueList
},
]
}