apache / apache/echarts

[Bug] Can't get ECharts Object in my reate-native app

Open
#20,117 4 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.0

### Link to Minimal Reproduction

None

### Steps to Reproduce

I implemented a Component in my reat-native app. The code is given below:

(1) Component
```javascript
const CellsDataPlotComponent = () => {
const svgRef = useRef(null);
const dispatch = useDispatch();
const {data, cur} = useSelector(dataAndCurSelector);

useEffect(() => {
let chart: any;
if (svgRef.current) {
chart = echarts.init(svgRef.current, 'light', {
renderer: 'svg',
width: E_WIDTH,
height: E_HEIGHT,
});
chart.setOption(option);
}

return () => {
chart?.dispose();
};
}, []);

useEffect(() => {
console.log(`CellsDataPlotComponent::data: ${data.length}`);
if (!svgRef.current) {
console.log("if (!svgRef.current)");
return;
}
const chart = echarts.getInstanceByDom(svgRef.current);
if (chart === null || chart === undefined) {
console.log(chart);
return;
}
// if (data.length === 0) return;

const categoriesCur = data.map(item => item.timeStamp).slice(cur, data.length < (cur + 10) ? data.length : (cur + 10));
const valHighCur = data.map(item => item.valHigh).slice(cur, data.length < (cur + 10) ? data.length : (cur + 10));
const valLowCur = data.map(item => item.valLow).slice(cur, data.length < (cur + 10) ? data.length : (cur + 10));
dispatch(addCur());

console.log(`CellsDataPlotComponent::valHighCur: ${valHighCur}`);

chart.setOption({
xAxis: [
{ data: categoriesCur },
{ data: categoriesCur },
],
series: [
{ data: valHighCur },
{ data: valLowCur },
],
});
return () => {
chart?.dispose();
};
}, [data]);

return (



);
}
```

(2) option
``` javascript
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56',
},
},
},
legend: {},
toolbox: {
show: true,
feature: {
dataView: { show: false, readOnly: false },
restore: {},
},
},
dataZoom: {
show: false,
start: 0,
end: 100,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: [],
},
{
type: 'category',
boundaryGap: true,
data: [],
},
],
yAxis: [
{
type: 'value',
name: 'Price',
},
{
type: 'value',
// scale: true,
name: 'Order',
max: 200,
min: -200,
},
],
series: [
{
name: 'valHigh',
type: 'line',
data: []
},
{
name: 'valLow',
type: 'line',
data: [],
},
],
}; // option
```
(3) I also use Redux to manage state. It helps me to cache data received from bluetooth. The Slice is shown below:
```javascript
const BluetoothSlice = createSlice({
name: 'bluetooth',
initialState: {
data: [],
cur: 0,
isOpen: false,
isConnected: false,
},
reducers: {
on: (state) => {
state.isOpen = true;
},
off: (state) => {
state.isOpen = false;
},
connect: (state) => {
state.isConnected = true;
},
disconnect: (state) => {
state.isConnected = false;
},
addCur: (state) => {
state.cur = state.cur + 1;
console.log(`bluetoothSlice::addCur`);
},
pushData: (state, action) => {
state.data.push(action.payload);
console.log(`bluetoothSlice::pushData`);
}
},
extraReducers: builder => {
builder
.addCase(sendDataToServer.pending, () => {})
.addCase(sendDataToServer.fulfilled, (state) => {
state.data = [];
state.cur = 0;
})
.addCase(sendDataToServer.rejected, () => {})
}
});

const dataSelector = state => state.bluetooth.data;
const curSelector = state => state.bluetooth.cur;
const dataAndCurSelector = createSelector(
[dataSelector, curSelector],
(data, cur) => { return {data, cur} }
);

const sendDataToServer = createAsyncThunk(
"bluetooth/sendData",
async (state) => {
// connect to server

return true;
}
);

export default BluetoothSlice.reducer;
export const {
on,
off,
connect,
disconnect,
addCur,
pushData } = BluetoothSlice.actions;
export {dataAndCurSelector};
```

### Current Behavior

In , I can't get ECharts Object. When i call ` const chart = echarts.getInstanceByDom(svgRef.current);`, it always return `undefined` to me. So, I can't display data received by Bluetooth to my app.

### Expected Behavior

I need to get the ECharts Object. then I will be able to display the data received by Bluetooth to the screen.

### Environment

```markdown
- OS:Android
- Browser: -
- Framework: react-native@0.74.2
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.