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: [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]
