复用面积图多次渲染填充色出现异常 #6507

问题描述

封装了一个面积图组件，在单页面上多次渲染，会出现多个面积图同一个地方填色异常

重现链接

No response

重现步骤

<script setup>
import { Chart } from '@antv/g2';
import { stringify } from 'postcss';
import {onMounted, watch, ref} from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
})

let chart;
const container = ref(null);

onMounted(() => {
  chart = renderChart(container.value);
})

watch(() => props.data, () => {
  updateBarChart(chart, props.data);
});

const updateBarChart = (chart, data) => {
  const interval = chart.getNodesByType('interval')[0];

  interval.data(data);
  chart.render();
}

const renderChart = (container) => {
  const chart = new Chart({ container, autoFit: true });

  chart
    .data(props.data)
    // .area()
    .encode('x', 'date')
    .encode('y', 'value')
    .encode('color', 'type')
    .encode('shape', 'smooth')
    .axis('x', { title: false })
    .axis('y', { title: false })
    .scale('color', {
      relations: [
        ['instagram', '#df8cf8'], 
        ['twitter', '#fade98'], 
        ['tiktok', '#8b83f7'], 
        ['youtube', '#ef8d8a'], 
        ['facebook', '#a6fcf6'], 
        [(d) => d === undefined, 'grey'], 
      ],
    })
    .legend({
      color: {
        itemMarker: 'itemMarker',

      },
    })

    chart.area().style('fillOpacity', 0.4);
    chart.line().style('strokeWidth', 2).tooltip(false);  

  chart.render();

  return chart;
};

</script>
<template>
  <div ref="container" class="w-full h-[340px] my-sm"></div>
</template>

预期行为

No response

平台

• 操作系统: [macOS]
• 网页浏览器: [Google Chrome]

屏幕截图或视频（可选）

<img width="1483" alt="企业微信截图_399bbfe1-a496-40b1-916b-fdadf629d351" src="https://github.com/user-attachments/assets/9497ebe9-5f44-45ea-961d-6b63f9848c90">

补充说明（可选）

No response