当前位置：首页 > news >正文

使用echarts绘制立体柱状图

news 2025/8/2 0:08:02

1.如图样式

2.关键代码

 series: [// 主柱体（正面）{name: "年度任务数",type: "custom",data: wcsData,//数组数据自行更改barWidth: fontSize(25),showBackground: true,itemStyle: {color: '#009cf5',},renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)]);const topBasicsYAxis = basicsCoord[1];const basicsXAxis = basicsCoord[0] - 20;const bottomYAxis = api.coord([api.value(0), 0])[1];return {type: "group",children: [// 左侧{type: "polygon",shape: {points: [[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis - 10, bottomYAxis - 2],[basicsXAxis, bottomYAxis],[basicsXAxis, topBasicsYAxis]]},style: {fill: '#009cf5'}},// 右侧{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis - 2],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: '#24afff'}},// 顶部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: '#2eb3ff'}},//底部{type: "polygon",shape: {points: [[basicsXAxis, bottomYAxis],[basicsXAxis - 10, bottomYAxis - 4],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis - 4]]},style: {fill: '#2eb3ff'}},]};}},{name: "完成数",type: "custom",data: wclData,//数组数据自行更改barWidth: fontSize(25),showBackground: true,itemStyle: {color: '#32fcf9',},renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)]);const topBasicsYAxis = basicsCoord[1];//y轴坐标const basicsXAxis = basicsCoord[0] + 10;//x轴坐标const bottomYAxis = api.coord([api.value(0), 0])[1];return {type: "group",children: [// 左侧{type: "polygon",shape: {points: [[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis - 10, bottomYAxis - 2],[basicsXAxis, bottomYAxis],[basicsXAxis, topBasicsYAxis]]},style: {fill: '#32fcf9'}},// 右侧{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis - 2],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: '#0edbd8'}},// 顶部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: '#77fffd'}},//底部{type: "polygon",shape: {points: [[basicsXAxis, bottomYAxis],[basicsXAxis - 10, bottomYAxis - 4],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis - 4]]},style: {fill: '#77fffd'}},]};}},]

（注意：fontSize(xx)是我封装的响应式适配不同屏幕尺寸）

查看全文

http://www.dtcms.com/a/305162.html