const offsetX = 18;
const offsetY =9;
// const MAX = [300, 300, 300, 300]
// 绘制左侧面
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();
},
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
const MAX = [800, 800, 800, 800]
const VALUE = [210.9, 260.8, 204.2, 504.9]
option = {
backgroundColor: 'rgba(17, 42, 62, 1)',//"#012366",
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
// formatter: function (params, ticket, callback) {
// const item = params[1]
// return item.name + ' : ' + item.value;
// }
// },
grid: {
left: 40,
right: 40,
bottom: 100,
top: 100,
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
// min: 0,
// max: 1200,
// interval: 200,
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: false,
},
},
// itemStyle:{
// borderWidth: 1,
// borderColor: "#fff",
// opacity: "1",
// color: 'transparent',
// },
series: [
{
type: 'custom',
label: {
show: true,
position: 'inside',
color: '#222',
fontSize: 14,
lineHeight: 20,
},
itemStyle: {
normal: {
borderWidth: 15,
borderColor: "#fff",
}
},
encode: {
x: 0,
y: [1, 2]
},
renderItem: (params, api) => {
console.log(params.dataIndex, api)
const location = api.coord([api.value(0), api.value(1)]);
var color = params.dataIndex == 0 ? new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: '#007190'
},
{
offset: 0.5,
color: '#013e5c'
},
{
offset: 1,
color: '#007190'
}
]) : params.dataIndex == 1 ? new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: '#00ad57'
},
{
offset: 0.5,
color: '#013e5c'
},
{
offset: 1,
color: '#00ad57'
}
]):params.dataIndex == 2 ? new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: '#645b2c'
},
{
offset: 0.05,
color: '#645b2c'
},
{
offset: 0.5,
color: '#013e5c'
},
{
offset: 0.95,
color: '#645b2c'
},
{
offset: 1,
color: '#645b2c'
}
]): new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{
offset: 0,
color: '#143f76'
},
{
offset: 0.5,
color: '#013e5c',
},
{
offset: 1,
color: '#143f76'
}
])
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: color,
},
},
{
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:color,
},
},
{
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: color
},
},
],
};
},
data: MAX
}, {
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
var color = params.dataIndex == 0 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#46edfa'
},
{
offset: 1,
color: '#007190'
}
]) : params.dataIndex == 1 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5bf49a'
},
{
offset: 1,
color: '#00ad57'
}
]):params.dataIndex == 2 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fad652'
},
{
offset: 1,
color: '#645b2c'
}
]): new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#468abc'
},
{
offset: 1,
color: '#143f76'
}
])
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: color
}
}, {
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: color
}
}, {
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: color
}
}]
}
},
data: VALUE
}, {
type: 'bar',
itemStyle: {
color: 'transparent',
},
tooltip: {
},
data: MAX
}]
}