You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "vipbo (via GitHub)" <gi...@apache.org> on 2024/12/11 03:54:46 UTC
[I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
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: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
Posted by "MatthiasMert (via GitHub)" <gi...@apache.org>.
MatthiasMert commented on issue #20574:
URL: https://github.com/apache/echarts/issues/20574#issuecomment-2536078046
This can be achieved by using multiple [xAxis](https://echarts.apache.org/en/option.html#xAxis).
[Example](https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=MYewdgzgLgBAJgQygmBeGBtAjAJgAwA0M-hMWArKQBykDspWWDAzHgLoDcAUFyAA5QAluDQwA3lxgwAHgEFpgiAC5MkqeLXqYUAJ58ApioDkwJPoDmIAE46jBTesTIVGIwFlwdmEYAqAV30vIwB1fTggnwALPyCAMStBIIBlJGS_MCM2BwBfey0JLSldA2NTKAtrWzzCiEiQAHcVADMEABsIfRzqtmqdeUUVAvViw28ANzaAozVctQ6E_WVVfIcivVGjACMEKztV-CQEFScEaq1BcoBbJN1W0bEYUFbrY1bBc0iocyt9WxhZwowbZWYKCOBQSLGSgAUmmWgB6iGWhGxmBe0BJ2OhwAdJcEHwABQTVpoAB8MGJMAAtMQ8ABKM7qOQKCAASTAcH00hUWEZUmBoPBkO8-FhXQcSOG61RO3RhUxB2QuPxRLaZIpapplAZ-2ZinZnO5ZD5QJ2gohxlFcqk2TUWWyHCAA)
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia closed issue #20574: [Bug] 实现不了一个大柱子嵌套多个小柱子
URL: https://github.com/apache/echarts/issues/20574
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
Posted by "vipbo (via GitHub)" <gi...@apache.org>.
vipbo commented on issue #20574:
URL: https://github.com/apache/echarts/issues/20574#issuecomment-2533574696
```
<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>
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 实现不了一个大柱子嵌套多个小柱子 [echarts]
Posted by "vipbo (via GitHub)" <gi...@apache.org>.
vipbo commented on issue #20574:
URL: https://github.com/apache/echarts/issues/20574#issuecomment-2533572910
barGap属性设置后只能统一生效，不能单个系列设置
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org