react echart onEvents setstate 后 主图表刷新 救救孩子吧

小小
  • 2
新手上路,请多包涵

在react项目中使用echart,想要实现的效果是鼠标点击一个图表后会弹出一个浮动框,鼠标移出浮动框,浮动框自己关闭。现在的问题是,鼠标点击图标后,浮动框正常出来但是主图表会刷新一下,导致看起来图表闪了一下。

主图表

<div className="leftPie">             
      <ColumnBrokenChart title='单位数量(家)'>
       <ReactECharts style={{ height: '90%', width: '100%' }} onEvents={onEvents}
                  option={unitQuantityByUnitIndustry(data)}>
       </ReactECharts>
        <Son  clickSubParam={clickSubParam} isShowSubData={isShowSubData} subData={subData}></Son>
      </ColumnBrokenChart>
 </div>

echart 点击事件

const onEvents = {
        'click': (params: any) => {
          const subTableData = data.data?.filter((i: any) => i.description === params.name)
          setSubData(subTableData)
          setClickSubParam(params)
          setIsShowSubData(true)
        },
        // 'dblclick': (params: any) => { console.log(params.event); setIsShowSubData(false) },
        'mouseout': (params: any) => { console.log(params.event); setIsShowSubData(false) },
        'globalout': (params: any) => { console.log(params.event); setIsShowSubData(false) },
      }

son组件

return <>
    {/* left:`${clickSubParam?.event?.offsetX}px`, */}
     <div  className='subTableDiv' style={{ position:'absolute',  
              top:`${clickSubParam?.event.offsetY + 20}px`,
                display: isShowSubData ? 'block' : 'none'
              }} >

      <Table columns={columns} dataSource={subData}
        rowClassName={() => { return 'table-color-grey' }}
        scroll={{ x: 1600, y: 315 }} pagination={false}
        expandable={{
          // expandIcon: () => null,
          defaultExpandAllRows: true,
          expandRowByClick: true,         
        }}
      ></Table>
    </div>
  </>

效果现在是
image.png

现在效果是 鼠标点击之后能出来son 组件,但是玫瑰图闪一下 大概是因为

 'click': (params: any) => {
          const subTableData = data.data?.filter((i: any) => i.description === params.name)
          setSubData(subTableData)
          setClickSubParam(params)
          setIsShowSubData(true)
        },

这里面setState值引起的 但是如果不set 值进去我就拿不到点击事件param 对象里的数据 ,然后去筛选出想要的数据,该怎么解决 这个闪一下的问题呀,或者有没有其他解决方法,救救孩子吧 急的哟;

回复
阅读 256
1 个回答
小小
  • 2
新手上路,请多包涵
✓ 已被采纳
 const charts = useMemo(() => {
    return () => (
      <ReactECharts style={{ height: '90%', width: '100%' }} onEvents={onEvents}
          option={unitQuantityByUnitIndustry(data)}>
      </ReactECharts>
    )
  }, [data])
 <div className="leftPie">             
  <ColumnBrokenChart title='单位数量(家)'>
   {charts()}
   <SubTable clickSubParam={clickSubParam} isShowSubData={isShowSubData}
     subData={subData} setIsShowSubData={setIsShowSubData}/>
  </ColumnBrokenChart>
</div>

SubTable 替换为原来的Son组件了 ,

解决 :使用hooks 函数,useMemo 当data 数据发生变化时,才去重新渲染 ReactECharts 因为我这data 没有发生变化 ,所以图表也不重现渲染 不会再出现闪一下了

新手踩坑

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏