echarts实现多3D立体柱状图
效果图：
实现代码：
// 立体多柱状图
function getSolidOption(data1, data2, data3) {
// 月份坐标轴
var nowMonth = new Date().getMonth() + 1;
var lineXAxisData = [];
for (var i = 5; i >= 0; i--) {
var month = nowMonth - i;
if (month < 1) {
lineXAxisData.push(month + 12 + "月");
} else {
lineXAxisData.push(month + "月");
}
}
var colors = [
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#27afc7",
},
{
offset: 0.5,
color: "#27afc7",
},
{
offset: 0.5,
color: "#50d9cf",
},
{
offset: 1,
color: "#50d9cf",
},
],
},
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#41affa",
},
{
offset: 0.5,
color: "#41affa",
},
{
offset: 0.5,
color: "#80d2fa",
},
{
offset: 1,
color: "#80d2fa",
},
],
},
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#a6a0fa",
},
{
offset: 0.5,
color: "#a6a0fa",
},
{
offset: 0.5,
color: "#bbbbf9",
},
{
offset: 1,
color: "#bbbbf9",
},
],
},
];
var barWidth = 15;
var constData1 = [];
var showData1 = [];
data1.filter(function (item) {
if (item) {
constData1.push(1);
showData1.push(item);
} else {
constData1.push(0);
showData1.push(
{
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
}
);
}
});
var constData2 = [];
var showData2 = [];
data2.filter(function (item) {
if (item) {
constData2.push(1);
showData2.push(item);
} else {
constData2.push(0);
showData2.push(
{
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
}
);
}
});
var constData3 = [];
var showData3 = [];
data3.filter(function (item) {
if (item) {
constData3.push(1);
showData3.push(item);
} else {
constData3.push(0);
showData3.push(
{
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
}
);
}
});
return {
tooltip: {
trigger: "axis",
formatter: function (params) {
var str = params[0].axisValue + "：";
params.filter(function (item) {
if (item.componentSubType == "bar") {
str += "
" + item.seriesName + "：" + item.value;
}
});
return str;
},
},
legend: {
selectedMode: false,
data: ["新增", "删除", "修改"],
},
grid: {
left: "3%", //图表距边框的距离
right: "3%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: {
data: lineXAxisData,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
series: [
{
z: 1,
name: "新增",
type: "bar",
barWidth: barWidth,
barGap: "0%",
data: data1,
itemStyle: {
normal: {
color: colors[0],
},
},
},
{
z: 2,
name: "新增",
type: "pictorialBar",
data: constData1,
symbol: "diamond",
symbolOffset: ["-100%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: colors[0],
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "新增",
type: "pictorialBar",
symbolPosition: "end",
data: showData1,
symbol: "diamond",
symbolOffset: ["-135%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderColor: "#8bead4",
borderWidth: 2,
color: "#8bead4",
},
},
tooltip: {
show: false,
},
},
{
z: 1,
name: "删除",
type: "bar",
barWidth: barWidth,
data: data2,
itemStyle: {
normal: {
color: colors[1],
},
},
},
{
z: 2,
name: "删除",
type: "pictorialBar",
data: constData2,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: colors[1],
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "删除",
type: "pictorialBar",
symbolPosition: "end",
data: showData2,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderColor: "#96dfff",
borderWidth: 2,
color: "#96dfff",
},
},
tooltip: {
show: false,
},
},
{
z: 1,
type: "bar",
name: "修改",
barWidth: barWidth,
data: data3,
itemStyle: {
normal: {
color: colors[2],
},
},
},
{
z: 2,
name: "修改",
type: "pictorialBar",
data: constData3,
symbol: "diamond",
symbolOffset: ["100%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: colors[2],
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "修改",
type: "pictorialBar",
symbolPosition: "end",
data: showData3,
symbol: "diamond",
symbolOffset: ["135%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderColor: "#d5d2ff",
borderWidth: 2,
color: "#d5d2ff",
},
},
tooltip: {
show: false,
},
},
],
};
}
调用：
var changeBar = echarts.init(document.getElementById("changeBar"));
changeBar.setOption(
getSolidOption(
[0, 0, 260, 30, 30, 30],
[0, 182, 191, 30, 0, 30],
[0, 182, 191, 0, 40, 40]
)
);
注：getSolidOption方法中柱状图的柱宽barWidth给了一个固定的值，若改变这个值时图形可能会有些变形，此时只需要调整series[1]、series[2]、series[4]、series[5]、series[7]、series[8]中symbolOffset的值即可。此案例中列举了三种柱状图，其中series数组中前3个元素为新增柱状图，中间三个为删除柱状图，最后三个为修改柱状图，由于每个柱子都由上中下三部分组成，因此series需要定义的元素较多。对于新增柱状图来说series[0]为柱子的主体部分，series[1]为柱子的底部，series[2]为柱子的顶部，以此类推。为了达到整体性的效果，每个柱状图的三部分颜色需要达到统一。
此处介绍的是多3D立体柱状图，若想要了解单个柱子的3D柱状图，请参考《echarts实现单3D立体柱状图》，文章地址：https://blog.csdn.net/Dalin0929/article/details/110188346