echarts实现3D立体堆叠柱状图
基于这篇博客的灵感，在其基础上做了一些改动；
echarts叠加3D立体柱状图_黑色的糖果的博客-CSDN博客_echarts立体柱状堆叠图
效果图
实现代码：
var legends = ['A相','B相','C相'];
var name = ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00'];
// 数据数组1
var data = [0.73,0.57,0.48,0.45,0.56,0.49,0.4,0.13,0.84,0.76,0.31,0.27,0.92];
// 数据数组2
var data2 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44];
var data3 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44];
var color = [
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#a7f8f3",
},
{
offset: 0.5,
color: "#a7f8f3",
},
{
offset: 0.5,
color: "#62ccc6",
},
{
offset: 1,
color: "#62ccc6",
},
],
},
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#fdb8b8",
},
{
offset: 0.5,
color: "#fdb8b8",
},
{
offset: 0.5,
color: "#f07070",
},
{
offset: 1,
color: "#f07070",
},
],
}, {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#0ffdbf",
},
{
offset: 0.5,
color: "#0ffdbf",
},
{
offset: 0.5,
color: "#8ffd86",
},
{
offset: 1,
color: "#8ffd86",
},
],
},
];
var barWidth = 30;
var constData = [];
var constData2 = [];
var showData = [];
var otherData = [];
for (var i = 0; i < data.length; i++) {
data[i] = Number(data[i]);
data2[i] = Number(data2[i]);
data3[i] = Number(data3[i]);
otherData[i] = data[i] + data2[i] + data3[i];
constData2[i] = data[i] + data2[i];
if (data[i] <= 0) {
constData.push(0);
showData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
} else {
constData.push(1);
if (data2[i] > 0) {
showData.push({
value: data[i],
itemStyle: {
normal: {
borderColor: "#fdb8b8",// 第二个柱子底部的颜色
borderWidth: 2,
color: "#fdb8b8",
},
},
});
} else {
showData.push({
value: data[i],
itemStyle: {
normal: {
borderColor: "#89e3ec",
borderWidth: 2,
color: "#89e3ec",
},
},
});
}
}
}
console.log(constData)
console.log(constData2)
console.log(otherData)
var option = {
tooltip: {
trigger: "axis",
formatter: function (params) {
return params[0].name + '
'
+ params[0].seriesName + ' : ' + (params[0].value).toFixed(2) + '
'
+ params[1].seriesName + ' : ' + (params[1].value).toFixed(2) + '
'
+ params[2].seriesName + ' : ' + (params[2].value).toFixed(2) + '
';
}
},
legend: {
data: legends,
selectedMode: false,//取消点击事件
show: true
},
grid: {
left: "3%", //图表距边框的距离
right: "3%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: {
data: name,
axisTick: {
show: false,
},
},
yAxis: {
name:'线损值/kWh',
axisTick: {
show: false,
}
},
series: [
{
z: 1,
name: legends[0],
type: "bar",
barWidth: barWidth,
stack: "总量",
color: color[0],
data: data,
},
{
z: 2,
name:legends[1],
type: "bar",
barWidth: barWidth,
stack: "总量",
color: color[1],
data: data2
},
{
z: 3,
name: legends[2],
type: "bar",
barWidth: barWidth,
stack: "总量",
color: color[2],
data: data3
},
{
z: 4,
name: "项目",
type: "pictorialBar",
data: constData,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color[0],
},
},
tooltip: {
show: false,
},
},
{
z: 5,
name: "项目",
type: "pictorialBar",
data: constData2,
symbolPosition: "end",
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color[2],
},
},
tooltip: {
show: false,
},
},
{
z: 6,
name: "项目",
type: "pictorialBar",
data: otherData,
symbol: "diamond",
symbolPosition: "end",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color[2],
},
},
tooltip: {
show: false,
},
},
{
z: 7,
name: "项目",
type: "pictorialBar",
symbolPosition: "end",
data: showData,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
tooltip: {
show: false,
},
},
],
};