React中多ECharts实例窗口重绘问题的解决方案

import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";

// 示例数据，可根据实际情况调整
let xAxisDatas = [
  "Jan 01", "Jan 02", "Jan 03", "Jan 04", "Jan 05", "Jan 06", "Jan 07", "Jan 08", "Jan 09", "Jan 10",
  "Jan 11", "Jan 12", "Jan 13", "Jan 14", "Jan 15", "Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20",
  "Jan 21", "Jan 22", "Jan 23", "Jan 24", "Jan 25", "Jan 26", "Jan 27", "Jan 28", "Jan 29", "Jan 30", "Jan 31"
];

let data = [
  {
    name: 'A',
    type: "line",
    smooth: false,
    showSymbol: true,
    symbolSize: 0.1,
    itemStyle: { color: '#0F4C5C' },
    lineStyle: { width: 5 },
    areaStyle: {
      color: 'transparent',
      opacity: 0.5,
    },
    label: {
      show: true,
      position: 'top',
      color: "#0F4C5C",
      fontSize: 15,
      fontWeight: 'Bold',
    },
    data: [31, 49, 36, 36, 30, 36, 36, 34, 38, 40, 34, 36, 32, 35, 34, 35, 32, 30, 37, 32, 40, 40, 33, 39, 31, 37, 34, 35, 38, 37, 33],
    markLine: {
      silent: true,
      lineStyle: {
        color: '#5d6664'
      },
      data: [{ yAxis: 38 }]
    }
  }
];

var option1 = {
  textStyle: {
    color: "#545454",
    fontFamily: "Source Han Sans",
    fontWeight: "lighter",
    fontSize: '15',
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    data: ['A'],
    left: "50%",
    top: "2%",
    itemWidth: 10,
    itemHeight: 5
  },
  xAxis: {
    type: "category",
    data: xAxisDatas,
    axisLabel: {
      margin: "10"
    },
    name: "xAxisName",
    nameLocation: "center",
    nameGap: 30,
    nameTextStyle: {
      padding: [5, 0, 0, 0]
    },
    axisTick: {
      alignWithLabel: true,
      inside: true
    }
  },
  yAxis: {
    name: "",
    type: "value",
    splitLine: {
      show: false
    }
  },
  dataZoom: [
    {
      show: false,
      realtime: true,
      start: 50,
      end: 100
    },
    {
      type: "inside",
      realtime: true,
      start: 50,
      end: 100
    }
  ],
  grid: {
    left: '2%',
    top: '10%',
    right: '2%',
    bottom: '12%'
  },
  series: data,
};

function SimpleLine() {
  const chartDomRef = useRef(null); // 用于引用ECharts渲染的DOM元素
  const chartInstanceRef = useRef(null); // 用于存储ECharts实例

  // 渲染或更新图表
  const renderChart = () => {
    if (chartDomRef.current) {
      let chartInstance = echarts.getInstanceByDom(chartDomRef.current);
      if (!chartInstance) {
        chartInstance = echarts.init(chartDomRef.current);
      }
      chartInstanceRef.current = chartInstance; // 将实例存储在ref中
      chartInstance.setOption(option1, true);
    }
  };

  // Effect 1: 初始化图表和清理
  useEffect(() => {
    renderChart();

    // 组件卸载时销毁ECharts实例，防止内存泄漏
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.dispose();
        chartInstanceRef.current = null;
      }
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  // Effect 2: 监听窗口resize事件
  useEffect(() => {
    const handleResize = () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.resize();
      }
    };

    window.addEventListener("resize", handleResize);

    // 组件卸载时移除事件监听器，防止内存泄漏
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  return (
    <div ref={chartDomRef} style={{ width: "100%", height: "400px" }}></div>
  );
}

export default SimpleLine;

import "./styles.css";
import "@coreui/coreui/dist/css/coreui.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleLine from "./chart1"; // 假设你的ECharts组件在chart1.js中

import { CContainer, CRow } from "@coreui/react";

export default function App2() {
  return (
    <div className="App">
      <CContainer fluid>
        <CRow>
          <SimpleLine />
        </CRow>

        <CRow>
          <SimpleLine />
        </CRow>
      </CContainer>
    </div>
  );
}