Use setOption method will clear series.data after used appendData to load series.data

[daxiongok]

Version

4.6.0

Steps to reproduce

I used appendData to load chartsData , afterwards i cant use setOption to set anything about chart options，its will clear my charts data！

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
option = {
title: {
text: 'demo'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: 'demoData',
type: 'line',
showSymbol: false,
hoverAnimation: false
}]
};

var iter=setTimeout(function () {
option.series=[{
name: 'demoData',
type: 'line',
showSymbol: false,
hoverAnimation: false
}];
myChart.setOption(option, true,true);
for (var i = 0; i < 15; i++) {
myChart.appendData({
seriesIndex: "0",
data: [randomData()]
});
}
//here！ setOption anything will clear seriesData
myChart.setOption({title:{show:true,text:"aaa"},series:[{type: 'line',markPoint: null}]})
}, 500);

What is expected?

still i can set series option

What is actually happening?

series data will be clear.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[echarts-bot[bot]]

@daxiongok Please provide a demo for the issue either with https://jsfiddle.net/ovilia/n6xc4df3/ or https://gallery.echartsjs.com/editor.html.

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

[FrontMizfaTools]

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 `

کلمه: ${params.name}

  <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 (

{title}

} titleTag="h6" className="py-3" light endEl={} /> {/* دکمه های نمودار */}

---

---

{ 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" >

{/* تغییر دهنده اندازه نمودار */} تغییر اندازه فونت {fontSize} px

handleFontChange(Number(e.target.value))} />

} >

{ // ذخیره کننده عکس نمودار 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" >

); };

export default Tree;