//自定义的堆叠，根据群里的意见有两个思路，一个是数据的堆叠，一个是自定义中的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 = "" + params1[0].name + "" + "
"; for (var i = 0; i < params1.length; i++) { if (params1[i].componentIndex == 0) { html += ''; html += params1[i].seriesName + ":" + "" + params1[i].value + "" + "
"; } else if (params1[i].componentIndex == 1) { html += ''; html += params1[i].seriesName + ":" + "" + params.value2[params1[i].dataIndex] + "" + "
"; } else if (params1[i].componentIndex == 2) { html += ''; html += params1[i].seriesName + ":" + "" + params.value3[params1[i].dataIndex] + "" + "
"; } } 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, };

自定义的堆叠图