javascript - react 多个echarts调整大小不起作用

Question

我渲染了2个echarts组件，但只有其中1个可以在窗口大小改变时调整大小。 请找到下面的源代码，您可以在调整窗口大小时找到问题 我可以给我一些如何解决这个问题的提示吗，非常感谢!

结构示例:

App.js

import "./styles.css";
import "@coreui/coreui/dist/css/coreui.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleLine from "./chart1";

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

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

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

Echarts.js 两个图表组件都有自己的调整大小函数监听器:

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



let xAxisDatas = [
  "Jan 01",
  "Jan 02",
  "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",
  "Jan 01",
  "Jan 02",
  "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","Jan 01",
  "Jan 02",
  "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",
];


function SimpleLine() {
  const chartRef = useRef(null);
  let chartInstance2 = null;

 

  

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,
        32,
        38,
        33,
        35,
        37,
        37,
        39,
        33,
        39,
        45,
        50,
        51,38,
        39,
        34,
        32,
        39,
        31,
        34,
        31,
        35,
        34,
        33,
        30,
        38,
        38,
        33,
        68,
        33,
        35,
        37,
        32,
        38,
        30,
        31,
        30,
        30,
        31,
        38,
        39,
        22,
        32,
        30,
        35,
        35,
        37,
        40,
        31,
        38,
        34,
        30,
        36,
        30,
        34,
        61,
        31,
        40,
        40,
        32,
        35,
        33,
        39,
        30,
        34,
        33,],
      markLine: {
        silent: true,
        lineStyle: {
          color: '#5d6664'
        },
        data: [
          /*{
            yAxis: 28
          },*/
          {
            yAxis: 38
          },
        ]
      }
    }
  ];

  var option1 = {
    textStyle: {
      color: "#545454",
      fontFamily: "Source Han Sans",//"Source Han Sans",
      fontWeight: "lighter",
      fontSize: '15',
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", //line cross 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,
   
  };

  const renderChart = () => {
    const renderedChartInstance = echarts.getInstanceByDom(chartRef.current);
    //const option2 = option1;
    if (renderedChartInstance) {
      chartInstance2 = renderedChartInstance;
    } else {
      chartInstance2 = echarts.init(chartRef.current);
    }
    //console.log(option1);
    chartInstance2.setOption(option1 , true);
  };


  useEffect(() => {

     renderChart()
 
   }, []);

  useEffect(() => {
    window.onresize = function () {
        chartInstance2.resize();
    };
    return () => {
        chartInstance2 && chartInstance2.dispose();
    }; 
  }, []);

  return (

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

export default SimpleLine;

Answer 1

代码中的问题是使用了window.onresize。如果只有一个组件，则此方法有效，但由于有多个组件且只有一个 window，因此每个组件的 onresize 值都会set (已重新分配)，所以只有最后一个生效。

解决方案是将其替换为 window.addEventListener这将为每个组件添加一个事件处理程序。

   window.addEventListener("resize", function () {
       chartInstance2.resize();
   });

这是一个codesandbox使用您的代码和上面的小修改。