//自定义的堆叠，根据群里的意见有两个思路，一个是数据的堆叠，一个是自定义中的y的堆叠，由于项目时间比较紧急，
//所以我选择了数据的堆叠，然后修改渐变的方式，对于自定义的堆叠，思路就是计算y，通过拿第一组数据的y，然后第二组就把y=第一组的高，这样的方式进行操作
const series = [];
const params = {
xAxis: ['2022年夏', '2022年秋', '2023年冬', '2023年春', '2023年夏'],
isshowxAxis: false,
unit: '万kWh',
value1: [1,2,3,4,5],
value2: [1,2,3,4,5],
value3: [1,2,3,4,5],
series: [
{
name:'测试1',
value:[1,2,3,4,5]
},
{
name:'测试2',
value: [2,4,6,8,10],
},
{
name:'测试3',
value:[3,6,9,12,15]
},
],
};
const colorleft = [
['rgba(219,92,60,0.7)', 'rgba(219,92,60,0.5)', 'rgba(219,92,60,0)'],
['rgba(219,141,27,0.7)', 'rgba(219,141,27,0)', 'rgba(219,141,27,0)'],
['rgba(39,202,174,0.7)', 'rgba(39,202,174,0)', 'rgba(39,202,174,0)'],
['rgba(46,167,188,0.7)', 'rgba(46,167,188,0)', 'rgba(46,167,188,0)'],
];
const colorright = [
['rgba(219,92,60,0.35)', 'rgba(219,92,60,0.25)', 'rgba(219,92,60,0)'],
['rgba(219,141,27,0.35)', 'rgba(219,141,27,0)', 'rgba(219,141,27,0)'],
['rgba(39,202,174,0.35)', 'rgba(39,202,174,0)', 'rgba(39,202,174,0)'],
['rgba(46,167,188,0.35)', 'rgba(46,167,188,0)', 'rgba(46,167,188,0)'],
];
const colortop = [
'#eabc96',
'#eeaaa2'
];
const colorline = [
'#9b4a16',
'#df3d2e'
];
const colorlineareaS = [
['rgba(155,74,22,0.5)', 'rgba(155,74,22,0)'],
['rgba(220,88,54,0.5)', 'rgba(220,88,54,0)']
]
let toolTims = null;
const offsetX = 25;
const offsetX1 = 14;
const offsetY = 8;
// 绘制左侧面
const CubeLeft3 = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y]; // 左侧面 右上点
const c1 = [shape.x - offsetX, shape.y]; // 左侧面 左上点
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
console.log(c1,'c1')
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
},
});
// 绘制右侧面
const CubeRight3 = 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] + 5]; //右侧面 左下点
const c3 = [xAxisPoint[0] + offsetX1, xAxisPoint[1] - offsetY + 5]; //右侧面 右下点
const c4 = [shape.x + offsetX1, shape.y + offsetY + 5]; //右侧面 右上点
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 c3 = [shape.x, shape.y - offsetY * 2];
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("CubeLeft3", CubeLeft3);
echarts.graphic.registerShape("CubeRight3", CubeRight3);
echarts.graphic.registerShape("CubeTop", CubeTop);
params.series.forEach((item, index) => {
series.push(
{
name: item.name,
type: "custom",
// stack: "Ad",
z: 4 - index,
renderItem: (params, api) => {
const location = api.coord([
api.value(0),
api.value(1),
]);
return {
type: "group",
// x: -25 + (index * 50),
// y:index * 50,
children: [
{
type: "CubeRight3",
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: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: colorright[index][0],
},
{
offset: index == 0 ? 0.5 : index == 1 ? 0.5 : 0.5,
color: colorright[index][1],
},
{
offset: 1,
color: colorright[index][2],
},
]
),
},
},
{
type: "CubeLeft3",
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: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: colorleft[index][0],
},
{
offset: index == 0 ? 0.5 : index == 1 ? 0.5 : 0.4,
color: colorleft[index][1],
},
{
offset: 1,
color: colorleft[index][2],
},
]
),
},
},
],
};
},
data: item.value,
},
)
})
option = {
//你的代码
background:'#fff',
color: [colorleft[0][0], colorleft[1][0], colorleft[2][0], colorleft[3][0]],
grid: {
top: "25%",
left: "1%",
right: "1%",
bottom: "5%",
containLabel: true,
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: params.fontSize || 24
},
formatter: function (params1) {
console.log(params1, "params");
console.log(params, "params");
let name = ''
var html =
"<span>" + params1[0].name + "</span>" + "<br>";
for (var i = 0; i < params1.length; i++) {
if (params1[i].componentIndex == 0) {
html +=
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
params1[i].color +
';"></span>';
html +=
params1[i].seriesName +
":" +
"<span style='font-weight:600;'>" +
params1[i].value +
"</span>" +
"<br>";
} else if (params1[i].componentIndex == 1) {
html +=
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
params1[i].color +
';"></span>';
html +=
params1[i].seriesName +
":" +
"<span style='font-weight:600;'>" +
params.value2[params1[i].dataIndex] +
"</span>" +
"<br>";
} else if (params1[i].componentIndex == 2) {
html +=
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
params1[i].color +
';"></span>';
html +=
params1[i].seriesName +
":" +
"<span style='font-weight:600;'>" +
params.value3[params1[i].dataIndex] +
"</span>" +
"<br>";
}
}
return html;
},
},
legend: {
show: true,
top: "2%",
// right: 40,
textStyle: {
fontSize: 27,
color: "#4b2e1c",
padding: [0, 0, 0, 12],
},
// itemGap: 70,
itemWidth: 21,
itemHeight: 20,
// data: ["9月", "10月", "11月"],
},
xAxis: {
type: "category",
data: params.xAxis,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
width: 1,
color: "#4c2e1c",
},
},
axisLabel: {
show: true,
color: "#4b2e1c",
fontSize: 26,
interval: 0,
margin: 30,
// margin: [30,0,0,0],
// fontFamily: 'sszhjt',
},
z: 10,
},
yAxis: {
// name: "单位：万kWh",
type: "value",
// show: false,
// nameGap: 50,
nameTextStyle: {
color: "rgba(75,46,28,0.7)",
fontSize: 26,
padding: [0, 0, 43, 20],
},
splitLine: {
show: true,
lineStyle: {
width: 2,
type: "dashed",
color: "rgba(76,46,28,0.5)",
},
},
axisLabel: {
color: "#4b2e1c",
fontSize: 31,
show: false,
// fontFamily: 'sszhjt',
},
axisLine: {
show: false,
},
},
series: series,
};