Vue2集成Apex Charts消除异常竖线问题求助

问题修复方案 #

1. 解决x轴冲突导致的竖线问题

你的代码中x轴同时配置了type: "datetime"和手动设置categories，这会导致ApexCharts坐标解析混乱，是出现奇怪竖线的核心原因。datetime类型的x轴不需要手动指定categories，框架会自动解析series中每个数据点的x值。

修改步骤：

• 删除chartOptions.xaxis中的categories: []配置
• 删除prepareChartData方法中的this.chartOptions.xaxis.categories = categories;这一行

2. 修复颜色获取函数的错误

getColorsFromData方法中未使用this.data，导致无法正确读取传入的颜色配置，堆叠区域因此无法应用指定纯色：

getColorsFromData() {
  return this.data ? Object.values(this.data).map(item => item.config.color) : [];
}

3. 优化填充与线条配置，确保纯色堆叠

为让堆叠区域完全显示为纯色，调整以下配置：

• 在chartOptions.chart中明确指定图表类型为area：type: "area"
• 将stroke.curve改为"straight"，避免平滑曲线导致区域边缘出现缝隙；同时设置stroke.lineCap: "square"让边缘更规整
• 保留fill配置的type: "solid"和opacity: 1，确保填充完全不透明

修改后的chartOptions关键部分：

chart: {
  id: "chart1",
  type: "area",
  toolbar: {
    show: false,
    tools: {
      reset: true
    }
  },
  margin: {
    top: 20,
    bottom: 20,
    left: 20,
    right: 20
  },
  animations: {
    enabled: false
  },
  stacked: true
},
stroke: {
  show: true,
  width: 1,
  curve: "straight",
  lineCap: "square"
},

4. 确保数据点对齐

如果不同系列的x轴数据点数量或时间不匹配，会导致堆叠区域断裂出现竖线。在prepareChartData中补全所有系列的缺失数据点，将对应y值设为0：

prepareChartData() {
  if (!this.data) return;

  // 收集所有唯一时间点并排序
  const allDates = new Set();
  Object.values(this.data).forEach(item => {
    item.data.forEach(entry => allDates.add(new Date(entry.d).toISOString()));
  });
  const sortedDates = Array.from(allDates).sort();

  const seriesData = Object.values(this.data).map(item => {
    const dataMap = new Map();
    item.data.forEach(entry => {
      dataMap.set(new Date(entry.d).toISOString(), parseFloat(entry.v));
    });
    // 补全缺失时间点，y值设为0
    const fullData = sortedDates.map(dateStr => ({
      x: new Date(dateStr),
      y: dataMap.get(dateStr) || 0
    }));
    return {
      name: item.config.title,
      data: fullData
    };
  });

  this.chartSeries = seriesData;
}

修改后的完整组件脚本 #

<script>
export default {
  components: {
    apexchart: VueApexCharts
  },
  props: {
    data: Object
  },
  data() {
    return {
      chartOptions: {
        chart: {
          id: "chart1",
          type: "area",
          toolbar: {
            show: false,
            tools: {
              reset: true
            }
          },
          margin: {
            top: 20,
            bottom: 20,
            left: 20,
            right: 20
          },
          animations: {
            enabled: false
          },
          stacked: true
        },
        xaxis: {
          type: "datetime",
          tickPlacement: "on"
        },
        yaxis: {
          title: {
            text: "Units"
          },
          min: 0
        },
        grid: {
          show: true,
          borderColor: "#A9A9A9",
          position: "back",
          xaxis: {
            lines: {
              show: true
            }
          },
          yaxis: {
            lines: {
              show: true
            }
          }
        },
        colors: this.getColorsFromData(),
        title: {
          text: "Stacked Area Chart",
          align: "left"
        }, 
        fill: {
          type: "solid",
          opacity: 1
        },
        stroke: {
          show: true,
          width: 1,
          curve: "straight",
          lineCap: "square"
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          position: "bottom",
          formatter: function(val, opts) {
            const color = opts.w.config.colors[opts.seriesIndex];
            return `<div class="legend" style="border-color:${color};"><span>${val}</span></div>`;
          }
        },
        markers: {
          size: 0
        },
        tooltip: {
          custom: function({ series, seriesIndex, dataPointIndex, w }) {
            let tooltipText = "<div class='custom-tooltip'>";

            const date = new Date(w.globals.seriesX[0][dataPointIndex]);
            const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
            const formattedDate = date.toDateString() + " " + time;

            tooltipText += `<div>${formattedDate}<br /></div>`;

            series.forEach((seriesItem, index) => {
              const data = w.globals.initialSeries[index].data[dataPointIndex];
              const title = w.config.series[index].name;
              const color = w.config.colors[index];
              tooltipText += `<div><span style='color:${color};'><svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="${color}" /></svg></span> <span style='color:black;'>${title}</span>: ${data.y}kWh</div>`;
            });

            tooltipText += "</div>";

            return tooltipText;
          }
        }
      },
      chartSeries: []
    };
  },
  watch: {
    data: {
      handler(newData) {
        if (newData) {
          this.prepareChartData();
        }
      },
      deep: true
    }
  },
  mounted() {
    this.prepareChartData();
  },
  methods: {
    prepareChartData() {
      if (!this.data) return;

      const allDates = new Set();
      Object.values(this.data).forEach(item => {
        item.data.forEach(entry => allDates.add(new Date(entry.d).toISOString()));
      });
      const sortedDates = Array.from(allDates).sort();

      const seriesData = Object.values(this.data).map(item => {
        const dataMap = new Map();
        item.data.forEach(entry => {
          dataMap.set(new Date(entry.d).toISOString(), parseFloat(entry.v));
        });
        const fullData = sortedDates.map(dateStr => ({
          x: new Date(dateStr),
          y: dataMap.get(dateStr) || 0
        }));
        return {
          name: item.config.title,
          data: fullData
        };
      });

      this.chartSeries = seriesData;
    },
    resetSeries() {
      if (this.$refs.chart) {
        this.$refs.chart.resetSeries(true, true);
      }
    },
    getColorsFromData() {
      return this.data ? Object.values(this.data).map(item => item.config.color) : [];
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者HawtSauce_R