echarts-bot[bot] commented on issue #20574: URL: https://github.com/apache/echarts/issues/20574#issuecomment-2533572166
@vipbo It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗 <details><summary><b>TRANSLATED</b></summary><br> **TITLE** [Bug] It is not possible to nest multiple small pillars in one large pillar. **BODY** ### 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: "Nested Column Chart", textStyle: { color: "#fff", }, }, tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, }, legend: { data: ["Total number of alarms", "Number of faults", "Number of alarms", "Alarm time"], 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: "Unit: times", axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: "#fff", }, }, }, { type: "value", name: "unit: h", axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: "#fff", }, }, }, ], series: [ { name: "Total number of alarms", type: "bar", data: [150, 180, 160, 170, 190, 140, 150], itemStyle: { color: "rgba(128, 128, 128, 0.6)", }, barWidth: "50%", // wide bar z: 1, // at the bottom }, { name: "Number of faults", type: "bar", data: [60, 70, 65, 75, 85, 50, 60], itemStyle: { color: "rgba(255, 69, 0, 0.8)", }, barGap: '-10%', barWidth: "20%", // Narrow bar z: 2, // on the upper level }, { name: "Number of alarms", 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%", // Narrow bar z: 2, // on the upper level }, { name: "Alarm time", type: "line", data: [10, 15, 12, 14, 18, 9, 11], yAxisIndex: 1, // use the second y-axis 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: chrome - Framework:vue ``` ### Any additional comments? It is impossible to realize one large pillar nesting multiple small pillars, and it is impossible to realize one large pillar nesting multiple small pillars. </details> -- 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]
