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传入的
console.log(shape)
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 10, shape.y - 26];
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1] - 26];
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传入的
console.log(shape)
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x - 20, shape.y]
const c1 = [shape.x + 40, shape.y]
const c2 = [xAxisPoint[0] + 40, 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) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x + 40, shape.y ];
const c1 = [shape.x + 70, shape.y - 26];
const c2 = [xAxisPoint[0] + 70, xAxisPoint[1] - 26];
const c3 = [xAxisPoint[0]+ 40, 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) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const c0 = [shape.x - 20, shape.y]
const c1 = [shape.x + 40, shape.y]
const c2 = [shape.x + 70, shape.y - 26]
const c3 = [shape.x + 10, shape.y - 26 ]
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] + 40, xAxisPoint[1]];
const c2 = [xAxisPoint[0] + 70, xAxisPoint[1] - 26];
const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 26];
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: 'rgba(234, 162, 57, .46)'
}
},
{
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: 'rgba(234, 162, 57, .16)'
}
},
{
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: 'rgba(234, 162, 57, .66)'
}
},
{
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: 'rgba(234, 162, 57, .6)'
}
},
{
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: 'rgba(234, 162, 57, 1)'
}
},
]
}
},
data: valueList
},
]
}