echarts custom 實現立體柱狀圖綜合代碼

效果圖：

 

 

 

 

 

const myshape={
x: 0,
y: 0,
width: 20, //柱寬
zWidth: 10, //陰影折角寬
zHeight: 8 //陰影折角高
};
const color = ['rgb(112,173,71)','#47ad7e',
'rgb(255,255,0)','#EEDC82',
'rgb(255,0,0)','#8B3A3A'

];
//顏色兩個一對，先高亮淺色，后陰影深色，然后第二個

const MyShape = echarts.graphic.extendShape({shape:myshape,

buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([0, shape.xValue]);
ctx.rect(xAxisPoint[0], shape.y-shape.width/2,shape.x-xAxisPoint[0],shape.width);
ctx.closePath();
}
});
const MyShadow = echarts.graphic.extendShape({
shape:myshape,
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([0, shape.xValue]);

ctx.moveTo(xAxisPoint[0],shape.y+shape.width/2);
ctx.lineTo(shape.x,shape.y+shape.width/2);

ctx.lineTo(shape.x,shape.y-shape.width/2);

ctx.lineTo(shape.x+shape.zHeight,shape.y-shape.width/2+shape.zWidth);

ctx.lineTo(shape.x+shape.zHeight,shape.y+shape.width/2+shape.zWidth);

ctx.lineTo(xAxisPoint[0],shape.y+shape.width/2+shape.zWidth);

ctx.lineTo(xAxisPoint[0],shape.y+shape.width/2);

ctx.closePath();
}
});

echarts.graphic.registerShape('MyShape', MyShape);
echarts.graphic.registerShape('MyShadow', MyShadow);

const myshapeinserve={
x: 0,
y: 0,
width: 20, //柱寬
zWidth: 10, //陰影折角寬
zHeight: 8 //陰影折角高
};

//顏色兩個一對，先高亮淺色，后陰影深色，然后第二個

const MyShapeInserve = echarts.graphic.extendShape({shape:myshapeinserve,

buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([0, shape.xValue]);
ctx.rect(xAxisPoint[0], shape.y-shape.width/2,shape.x-xAxisPoint[0],shape.width);
ctx.closePath();
}
});
const MyShadowInserve = echarts.graphic.extendShape({
shape:myshapeinserve,
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([0, shape.xValue]);

ctx.moveTo(xAxisPoint[0],shape.y+shape.width/2);
ctx.lineTo(shape.x,shape.y+shape.width/2);

ctx.lineTo(shape.x,shape.y-shape.width/2);

ctx.lineTo(shape.x-shape.zHeight,shape.y-shape.width/2+shape.zWidth);

ctx.lineTo(shape.x-shape.zHeight,shape.y+shape.width/2+shape.zWidth);

ctx.lineTo(xAxisPoint[0],shape.y+shape.width/2+shape.zWidth);

ctx.lineTo(xAxisPoint[0],shape.y+shape.width/2);

ctx.closePath();
}
});

echarts.graphic.registerShape('MyShapeInserve', MyShapeInserve);
echarts.graphic.registerShape('MyShadowInserve', MyShadowInserve);
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} '
},

grid: {
left:'-10%',
containLabel: true
},

xAxis: {
// type: 'value',
inverse: true ,//反轉坐標軸
show:true,

splitLine:{ show:false }
},
yAxis: {
show:true,
splitLine:{ show:false },
data: ['one', 'two','three','four','five']
},

series: [
{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShape',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]-myshape.width
},
style: {
fill: color[0]
}
},
{
name:"item1",
type:'MyShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]-myshape.width
},
style: {
fill: color[1]
}
}]
}
},
data: [-10, -20,-15,-25,-8]
},
{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShape',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: color[2]
}
},
{
name:"item1",
type:'MyShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: color[3]
}
}]
}
},
data: [-12, -20,-10,-15,-10]
},
{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShape',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]+myshape.width
},
style: {
fill: color[4]
}
},
{
name:"item1",
type:'MyShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]+myshape.width
},
style: {
fill: color[5]
}
}]
}
},
data: [-10, -20,-15,-25,-8]
},

{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShapeInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]-myshapeinserve.width
},
style: {
// fill:'#5AD8A6',
fill: color[0]
}
},
{
name:"item1",
type:'MyShadowInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]-myshapeinserve.width
},
style: {
fill: color[1],
// fill:'#2DCF8E',
}
}]
}
},
data: [20,15,25]
},
{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShapeInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
// fill:'#5AD8A6',
fill: color[2]
}
},
{
name:"item1",
type:'MyShadowInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: color[3],
// fill:'#2DCF8E',
}
}]
}
},
data: [10, 20,25]
},
{
type: 'custom',

renderItem: function (params, api) {
let location = api.coord([api.value(0), api.value(1)]);

return {
type: 'group',
children: [
{
name:"item1",
type:'MyShapeInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]+myshapeinserve.width
},
style: {
// fill:'#5AD8A6',
fill: color[4]
}
},
{
name:"item1",
type:'MyShadowInserve',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]+myshapeinserve.width
},
style: {
fill: color[5],
// fill:'#2DCF8E',
}
}]
}
},
data: [15,25,8]
}

]
};