vipbo opened a new issue, #20574: URL: https://github.com/apache/echarts/issues/20574
### Version ^5.5.0 ### Link to Minimal Reproduction http://localhost:8080/#/ ### Steps to Reproduce <template> <div class="chart-container"> <div id="chart" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; require('echarts/theme/shine') // echarts theme export default { name: "NestedBarChart", data() { return { chart: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { this.chart = echarts.init(document.getElementById("chart")); const option = { title: { text: "嵌套柱状图", textStyle: { color: "#fff", }, }, tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, }, legend: { data: ["报警总数", "故障数", "告警数", "报警时间"], textStyle: { color: "#fff", }, }, xAxis: { type: "category", data: ["11/21", "11/22", "11/23", "11/24", "11/25", "11/26", "11/27"], axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: "#fff", }, }, }, yAxis: [ { type: "value", name: "单位: 次", axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: "#fff", }, }, }, { type: "value", name: "单位: h", axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: "#fff", }, }, }, ], series: [ { name: "报警总数", type: "bar", data: [150, 180, 160, 170, 190, 140, 150], itemStyle: { color: "rgba(128, 128, 128, 0.6)", }, barWidth: "50%", // 宽柱子 z: 1, // 在底层 }, { name: "故障数", type: "bar", data: [60, 70, 65, 75, 85, 50, 60], itemStyle: { color: "rgba(255, 69, 0, 0.8)", }, barGap: '-10%', barWidth: "20%", // 窄柱子 z: 2, // 在上层 }, { name: "告警数", type: "bar", data: [20, 30, 25, 35, 45, 20, 25], stack: 'nested2', itemStyle: { color: "rgba(255, 165, 0, 0.8)", borderWidth: 1, borderColor: '#ffffff', }, barGap: '-50%', barCategoryGap: '50%', barWidth: "20%", // 窄柱子 z: 2, // 在上层 }, { name: "报警时间", type: "line", data: [10, 15, 12, 14, 18, 9, 11], yAxisIndex: 1, // 使用第二个 y 轴 itemStyle: { color: "#fff", }, }, ], backgroundColor: "#1b1b1b", }; this.chart.setOption(option); }, resizeChart() { if (this.chart) { this.chart.resize(); } }, }, beforeDestroy() { if (this.chart) { this.chart.dispose(); } }, }; </script> <style scoped> .chart-container { width: 100%; height: 100%; } .chart { width: 100%; height: 400px; } </style> ### Current Behavior <img width="348" alt="5656" src="https://github.com/user-attachments/assets/0b33070c-90be-4d64-9667-605275eeb99e";> ### Expected Behavior <img width="529" alt="561561" src="https://github.com/user-attachments/assets/b8f59ae0-a7b5-4e2f-937d-f42c2e3fd3e8";> ### Environment ```markdown - OS:5.5.0 - Browser: chrom - Framework:vue ``` ### Any additional comments? 实现不了一个大柱子嵌套多个小柱子， 实现不了一个大柱子嵌套多个小柱子 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
