FrontMizfaTools commented on issue #12327: URL: https://github.com/apache/echarts/issues/12327#issuecomment-2063042850
const handleZoomIn = () => { if (zoomLevel < maxZoomLevel) { zoomLevel = zoomLevel + 0.3; } chartRef.current.getEchartsInstance().setOption( { series: { zoom: zoomLevel + 0.3 } }, false ); }; same issue in here im not using state so we dont have any problem about rerender. Im trying to have a zoom button for changing the zoom level of data. but its reseting collapse and expand of tree data. the full source: import React, { useEffect, useRef, useState } from 'react'; import ReactEChartsCore from 'echarts-for-react/lib/core'; import { TreeChart } from 'echarts/charts'; import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components'; import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import { getColor } from 'helpers/utils'; import { Button, Card, Form, OverlayTrigger, Popover } from 'react-bootstrap'; import FalconCardHeader from 'components/common/FalconCardHeader'; import HelpTooltip from 'components/common/HelpTooltip'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import CardChartDropDown from 'components/common/CardChartDropDown'; import { useAppContext } from 'Main'; import { crawlTooltip } from 'tooltip/crawl/crawlTooltips'; echarts.use([ TitleComponent, TooltipComponent, GridComponent, TreeChart, CanvasRenderer ]); // تنظیمات نمودار let zoomLevel = 1; const maxZoomLevel = 20; const minZoomLevel = 0.001; const getOption = data => ({ textStyle: { fontFamily: 'dana' }, formatter: params => console.log('FORMATTER', params), // نحوه نمایش تولتیپ نمودار tooltip: { trigger: 'item', triggerOn: 'mousemove', padding: [7, 10], backgroundColor: getColor('gray-100'), borderColor: getColor('gray-300'), textStyle: { color: getColor('gray-1100'), fontSize: 8 }, borderWidth: 1, show: false, formatter: params => { return `<div> <div style="direction:rtl;" class="d-flex gap-1 justify-content-start" > <span class="fw-bolder"> کلمه: </span> <span style="direction:ltr;"> ${params.name} </span> </div> <span class="fw-bolder"> </div>`; }, transitionDuration: 0, axisPointer: { type: 'none' } }, series: [ { // تنظیمات نمایشی نمودار roam: true, layout: 'orthogonal', scaleLimit: { min: minZoomLevel, max: maxZoomLevel }, type: 'tree', data: [data], top: '1%', left: '7%', bottom: '1%', itemStyle: { color: getColor('primary'), backgroundColor: 'red', borderWidth: '30px' }, right: '20%', lineStyle: { color: getColor('primary') }, label: { position: 'left', verticalAlign: 'middle', align: 'right', color: getColor('gray-1100'), border: 0, fontSize: 8, formatter: params => decodeURIComponent(params.name) }, showSymbol: true, symbol: 'emptyCircle', symbolSize: 10, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' }, itemStyle: { color: getColor('primary'), borderRadius: [0, 3, 3, 0] } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }); // نمودار درخت پایه const Tree = ({ data, layout = 'orthogonal', title = '' }) => { const chartRef = useRef(null); const [fontSize, setFontSize] = useState(8); // کنترل ریست نمودار const handleZoomReset = () => { zoomLevel = 1; chartRef.current.getEchartsInstance().dispatchAction({ type: 'restore' }); }; // افزودن زوم نمودار const handleZoomIn = () => { if (zoomLevel < maxZoomLevel) { zoomLevel = zoomLevel + 0.3; } chartRef.current.getEchartsInstance().setOption( { series: { zoom: zoomLevel + 0.3 } }, false ); }; //کم کردن زوم نمودار const handleZoomOut = () => { if (zoomLevel > minZoomLevel) { zoomLevel = zoomLevel - 0.3; } chartRef.current.getEchartsInstance().setOption( { series: { zoom: zoomLevel - 0.3 } }, false ); }; const { config: { isDark } } = useAppContext(); const cardRef = useRef(); const handleFontChange = size => { console.log(size, chartRef?.current?.getEchartsInstance().getOption()); chartRef?.current?.getEchartsInstance().setOption({ series: [ { lable: { fontSize: size } } ] }); }; return ( <Card className="my-2" ref={cardRef}> <FalconCardHeader title={ <div> {title} <HelpTooltip html={crawlTooltip.crawlerLinkGraph.tree} /> </div> } titleTag="h6" className="py-3" light endEl={<CardChartDropDown cardRef={cardRef} chartRef={chartRef} />} /> <Card.Body className="py-2 my-2 position-relative"> <ReactEChartsCore ref={chartRef} echarts={echarts} option={getOption(data)} style={{ height: '800px' }} /> {/* دکمه های نمودار */} <div className="position-absolute d-flex flex-column top-0 mt-3"> <div className="rounded-3 bg-body-tertiary border-400 w-100 border"> <Button variant="link" size="sm" className="bg-100 d-flex align-items-center justify-content-center rounded-bottom-0 p-2 text-700" onClick={handleZoomIn} > <FontAwesomeIcon icon="plus" className="fs--1" /> </Button> <hr className="m-0 text-300" /> <Button variant="link" size="sm" className="bg-100 d-flex align-items-center justify-content-center rounded-top-0 p-2 text-700" onClick={handleZoomReset} > <FontAwesomeIcon icon="undo-alt" className="fs--1" /> </Button> <hr className="m-0 text-300" /> <Button variant="link" size="sm" className="bg-100 d-flex align-items-center justify-content-center rounded-top-0 p-2 text-700" onClick={handleZoomOut} > <FontAwesomeIcon icon="minus" className="fs--1" /> </Button> </div> <div className="bg-body-tertiary mt-3"> <div className="bg-body-tertiary mt-1 "> <Button variant="link" size="sm" // تمام صفحه کردن نمودار onClick={() => { if (!document.fullscreenElement) { cardRef.current.requestFullscreen(); } else { document.exitFullscreen(); } }} className="bg-100 d-flex align-items-center justify-content-center rounded-3 border border-400 w-100 p-2 text-700" > <FontAwesomeIcon icon={ document.fullscreenElement ? 'compress-arrows-alt' : 'expand-arrows-alt' } className="fs--1" /> </Button> </div> </div> {/* تغییر دهنده اندازه نمودار */} <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={ <Popover id="popover-basic" style={{ width: '350px' }}> <Popover.Header as="h3" className="d-flex justify-content-between align-items-center" > تغییر اندازه فونت <span className="fs--1" style={{ direction: 'ltr' }}> {fontSize} px </span> </Popover.Header> <Popover.Body className="p-0"> <div className="p-2 d-flex align-items-center" style={{ direction: 'ltr' }} > <Form.Range max={50} min={0} defaultValue={8} // value={fontSize} variant="primary" onChange={e => handleFontChange(Number(e.target.value))} /> </div> </Popover.Body> </Popover> } > <div className="bg-body-tertiary mt-1 "> <Button variant="link" size="sm" className="bg-100 d-flex align-items-center justify-content-center rounded-3 border border-400 w-100 p-2 text-700" > <FontAwesomeIcon icon="text-height" className="fs--1" /> </Button> </div> </OverlayTrigger> <div className="bg-body-tertiary mt-1 "> <Button onClick={() => { // ذخیره کننده عکس نمودار const dataURL = chartRef.current .getEchartsInstance() .getDataURL({ type: 'png', pixelRatio: 1, backgroundColor: isDark ? '#121e2d' : '#fff' }); const link = document.createElement('a'); link.href = dataURL; link.setAttribute('download', 'chart-from-Mizfa-Tools.png'); link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }} variant="link" size="sm" className="bg-100 d-flex align-items-center justify-content-center rounded-3 border border-400 w-100 p-2 text-700" > <FontAwesomeIcon icon="save" className="fs--1" /> </Button> </div> </div> </Card.Body> </Card> ); }; export default Tree; -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org