@aks-dev/easyui 1.0.102 → 1.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/Echarts/EchartsView.tsx +94 -49
  2. package/package.json +1 -1
package/lib/Echarts/EchartsView.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * @Author: shiguo
3
3
  * @Date: 2022-05-05 14:52:53
4
4
  * @LastEditors: shiguo
5
- * @LastEditTime: 2022-07-21 18:21:18
5
+ * @LastEditTime: 2022-09-14 11:28:39
6
6
  * @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
7
7
  */
8
8
  import * as React from 'react'
@@ -48,67 +48,112 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
48
48
  }, [props.style])
49
49
 
50
50
 
51
-
52
-
53
-
54
-
55
- React.useEffect(() => {
56
- // console.log('useEffect', state.isLoaded,props.option)
51
+ React.useLayoutEffect(() => {
57
52
  if (state.isLoaded) {
53
+ let height = state.height ? `${state.height}px` : 'auto'
54
+ let width = state.width ? `${state.width}px` : 'auto'
58
55
  const run = `
59
- ;(function() {
60
- var instance = echarts.init(document.getElementById('main'));
61
- instance.setOption(${toString(props.option)});
62
- })();
63
- `
56
+ ;(function() {
57
+ var instance = echarts.getInstanceByDom(document.getElementById('main'));
58
+ if(instance == null){
59
+ document.getElementById('main').style.height = "${height}";
60
+ document.getElementById('main').style.width = "${width}";
61
+ instance = echarts.init(document.getElementById('main'));
62
+ }
63
+ instance.clear();
64
+ instance.setOption(${toString(props.option)});
65
+ })();
66
+ `
64
67
  WebViewRef.current?.injectJavaScript(run);
65
68
 
66
69
  return () => {
70
+ console.log('useEffect relase')
67
71
  const run = `
68
- ;(function() {
69
- var instance = echarts.getInstanceByDom(document.getElementById('main'));
70
- instance.clear();
71
- })();
72
- `
72
+ ;(function() {
73
+ var instance = echarts.getInstanceByDom(document.getElementById('main'));
74
+ instance.clear();
75
+ if(!instance.isDisposed()){
76
+ instance.dispose();
77
+ }
78
+ })();
79
+ `
73
80
  WebViewRef.current?.injectJavaScript(run);
74
-
75
-
76
81
  }
77
82
  }
78
83
 
79
- return undefined
80
84
 
85
+ return undefined
81
86
  }, [props.option, state.isLoaded])
82
87
 
83
88
 
84
-
85
-
86
- const injectedJavaScript = (): string => {
87
- // console.log('injectedJavaScript',props.option)
88
- let height = state.height ? `${state.height}px` : 'auto'
89
- let width = state.width ? `${state.width}px` : 'auto'
90
- return `
91
- ;(function() {
92
- document.getElementById('main').style.height = "${height}";
93
- document.getElementById('main').style.width = "${width}";
94
- var instance = echarts.init(document.getElementById('main'));
95
- instance.setOption(${toString(props.option)});
96
- instance.on('click', function(params) {
97
- var seen = [];
98
- var paramsString = JSON.stringify(params, function(key, val) {
99
- if (val != null && typeof val == "object") {
100
- if (seen.indexOf(val) >= 0) {
101
- return;
102
- }
103
- seen.push(val);
104
- }
105
- return val;
106
- });
107
- // window.ReactNativeWebView.postMessage(JSON.stringify({"types":"ON_PRESS","payload": paramsString}));
108
- });
109
- })();
110
- `
111
- }
89
+ // React.useEffect(() => {
90
+ // console.log('useEffect', state.isLoaded)
91
+
92
+ // if (state.isLoaded) {
93
+ // const run = `
94
+ // ;(function() {
95
+ // var instance = echarts.getInstanceByDom(document.getElementById('main'));
96
+ // if(instance == null){
97
+ // instance = echarts.init(document.getElementById('main'));
98
+ // }
99
+ // instance.clear();
100
+ // instance.setOption(${toString(props.option)});
101
+ // })();
102
+ // `
103
+ // WebViewRef.current?.injectJavaScript(run);
104
+
105
+ // return () => {
106
+ // console.log('useEffect relase')
107
+ // const run = `
108
+ // ;(function() {
109
+ // var instance = echarts.getInstanceByDom(document.getElementById('main'));
110
+ // instance.clear();
111
+ // if(!instance.isDisposed()){
112
+ // instance.dispose();
113
+ // }
114
+ // })();
115
+ // `
116
+ // WebViewRef.current?.injectJavaScript(run);
117
+ // }
118
+ // }
119
+
120
+ // return undefined
121
+
122
+ // }, [props.option, state.isLoaded])
123
+
124
+
125
+
126
+
127
+ // const injectedJavaScript = (): string => {
128
+ // console.log('injectedJavaScript', props.option.xAxis.data)
129
+ // let height = state.height ? `${state.height}px` : 'auto'
130
+ // let width = state.width ? `${state.width}px` : 'auto'
131
+ // return `
132
+ // ;(function() {
133
+ // document.getElementById('main').style.height = "${height}";
134
+ // document.getElementById('main').style.width = "${width}";
135
+ // var instance = echarts.getInstanceByDom(document.getElementById('main'));
136
+ // if(instance == null){
137
+ // instance = echarts.init(document.getElementById('main'));
138
+ // }
139
+ // instance.clear();
140
+ // instance.setOption(${toString(props.option)});
141
+ // instance.on('click', function(params) {
142
+ // var seen = [];
143
+ // var paramsString = JSON.stringify(params, function(key, val) {
144
+ // if (val != null && typeof val == "object") {
145
+ // if (seen.indexOf(val) >= 0) {
146
+ // return;
147
+ // }
148
+ // seen.push(val);
149
+ // }
150
+ // return val;
151
+ // });
152
+ // // window.ReactNativeWebView.postMessage(JSON.stringify({"types":"ON_PRESS","payload": paramsString}));
153
+ // });
154
+ // })();
155
+ // `
156
+ // }
112
157
 
113
158
 
114
159
 
@@ -131,7 +176,7 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
131
176
  // console.log(e)
132
177
  // }}
133
178
  javaScriptEnabled={true}
134
- injectedJavaScript={injectedJavaScript()}
179
+ // injectedJavaScript={injectedJavaScript()}
135
180
  startInLoadingState={false}
136
181
  onLoadEnd={(_) => {
137
182
  dispatch({ isLoaded: true })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aks-dev/easyui",
3
- "version": "1.0.102",
3
+ "version": "1.0.104",
4
4
  "description": "移动端App开发工具包",
5
5
  "main": "./src/index.ts",
6
6
  "typings": "./src/index.d.ts",