RafaelCENG opened a new issue, #19224: URL: https://github.com/apache/echarts/issues/19224
### Version ^5.4.2 ### Link to Minimal Reproduction https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text ### Steps to Reproduce ``` const chartRef = useRef<any>(null); // CHART RELATED const RoadBikeRef = useRef<any>(null); useEffect(() => { const ROAD_BIKE_OPTIONS = { title: { show: chartSeries.length === 0, textStyle: { color: "#F7F3F0", fontSize: 20, }, text: "No data available", left: "center", top: "20%", }, grid: { right: "2%", // y2: 300, height: E_HEIGHT * 0.35, }, tooltip: { show: chartSeries.length !== 0, trigger: "axis", textStyle: { color: "#F7F3F0", }, backgroundColor: "rgba(61, 52, 62, 0.9)", valueFormatter: function (val) { return `${val} %`; }, confine: true, }, legend: { data: chartSeries.map((series) => series.name), icon: "circle", inactiveColor: "#64605D", textStyle: { color: "#F7F3F0", }, orient: "vertical", bottom: 0, left: 0, // top: "bottom", // top: -20, //Paei to legend apo kato. Iparxi overlap provlima (na to kitakso) }, xAxis: { type: "category", data: currentPeriod === "4 Weeks" ? Object.keys(week_buckets).reduce((arr, key) => { return arr.concat(key, "", "", "", "", "", ""); }, []) : categories, axisLabel: { interval: 0, }, axisTick: { alignWithLabel: true, }, }, yAxis: { type: "value", min: 0, axisLabel: { formatter: (val) => Math.ceil(val) + "%", }, }, series: chartSeries.map((series) => ({ name: series.name, type: "line", smooth: true, data: series.data, symbol: "circle", lineStyle: { type: series.name.includes("Not") ? "dashed" : "solid", }, })), }; let chart: any; if (RoadBikeRef.current) { chart = echarts.init(RoadBikeRef.current, "light", { renderer: "svg", width: E_WIDTH * 0.9, height: customHeight, }); chart.setOption(ROAD_BIKE_OPTIONS); chartRef.current = chart; } return () => chart?.dispose(); }, [chartSeries]); const TTBikeRef = useRef<any>(null); {.....} useEffect(() => { chartRef.current.resize({ width: E_WIDTH * 0.9, height: customHeight, animation: bikePositions.length > 0 ? { duration: 1500, easing: "linear", } : "", }); }, [customHeight]); ``` ### Current Behavior So, I've got two references here: one for road_bike and another for tt, each representing different data sets. On top of that, I've got this extra reference called chart, which I'm using to manage the chart's height, making sure I can display the legend vertically. Now, every time I hit that upper button, my data changes thanks to chartSeries. Not only that, but I also create a brand new chart and adjust its size to make sure the legend loo https://github.com/apache/echarts/assets/45431116/8bb7ab62-841f-4705-ad90-bceb64b00c94 ks just right vertically. ### Expected Behavior Shouldn't flicker. ### Environment ```markdown - Framework: React Native ``` ### Any additional comments? Also Im using [react-native-echarts](https://github.com/wuba/react-native-echarts) which is a wrapper of echarts. The minimal reproduction is not a valid link. Not sure I can re-create the problem in sandbox. Need expo and can't really do it. Thanks in Advance. -- 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: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
