1
1
library flutter_echarts;
2
2
3
+ import 'dart:convert' ;
4
+
3
5
import 'package:flutter/widgets.dart' ;
4
6
import 'package:flutter/gestures.dart' ;
5
7
import 'package:flutter/foundation.dart' ;
6
-
7
8
import 'package:webview_flutter/webview_flutter.dart' ;
8
9
9
10
import 'echarts_script.dart' show echartsScript;
10
11
11
12
/// <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" /><style type="text/css">body,html,#chart{height: 100%;width: 100%;margin: 0px;}div {-webkit-tap-highlight-color:rgba(255,255,255,0);}</style></head><body><div id="chart" /></body></html>
12
13
/// 'data:text/html;base64,' + base64Encode(const Utf8Encoder().convert( /* STRING ABOVE */ ))
13
14
const htmlBase64 =
14
- 'data:text/html;base64, PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY2hhcnNldD0idXRmLTgiPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgbWluaW11bS1zY2FsZT0xLjAsIHVzZXItc2NhbGFibGU9MCwgdGFyZ2V0LWRlbnNpdHlkcGk9ZGV2aWNlLWRwaSIgLz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmJvZHksaHRtbCwjY2hhcnR7aGVpZ2h0OiAxMDAlO3dpZHRoOiAxMDAlO21hcmdpbjogMHB4O31kaXYgey13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjpyZ2JhKDI1NSwyNTUsMjU1LDApO308L3N0eWxlPjwvaGVhZD48Ym9keT48ZGl2IGlkPSJjaGFydCIgLz48L2JvZHk+PC9odG1sPg==' ;
15
+ 'PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY2hhcnNldD0idXRmLTgiPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgbWluaW11bS1zY2FsZT0xLjAsIHVzZXItc2NhbGFibGU9MCwgdGFyZ2V0LWRlbnNpdHlkcGk9ZGV2aWNlLWRwaSIgLz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmJvZHksaHRtbCwjY2hhcnR7aGVpZ2h0OiAxMDAlO3dpZHRoOiAxMDAlO21hcmdpbjogMHB4O31kaXYgey13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjpyZ2JhKDI1NSwyNTUsMjU1LDApO308L3N0eWxlPjwvaGVhZD48Ym9keT48ZGl2IGlkPSJjaGFydCIgLz48L2JvZHk+PC9odG1sPg==' ;
15
16
16
17
class Echarts extends StatefulWidget {
17
18
Echarts (
@@ -65,6 +66,26 @@ class _EchartsState extends State<Echarts> {
65
66
super .initState ();
66
67
_currentOption = widget.option;
67
68
69
+ _controller = WebViewController ()
70
+ ..setBackgroundColor (Color (0x00000000 ))
71
+ ..loadHtmlString (utf8.fuse (base64).decode (htmlBase64))
72
+ ..setJavaScriptMode (JavaScriptMode .unrestricted)
73
+ ..setNavigationDelegate (
74
+ NavigationDelegate (
75
+ onPageFinished: (url) => init (),
76
+ onWebResourceError: (e) {
77
+ if (widget.onWebResourceError != null ) {
78
+ widget.onWebResourceError !(_controller! , Exception (e));
79
+ }
80
+ },
81
+ ),
82
+ )
83
+ ..addJavaScriptChannel ('Messager' , onMessageReceived: (JavaScriptMessage javascriptMessage) {
84
+ if (widget.onMessage != null ) {
85
+ widget.onMessage !(javascriptMessage.message);
86
+ }
87
+ });
88
+
68
89
if (widget.reloadAfterInit) {
69
90
new Future .delayed (const Duration (milliseconds: 100 ), () {
70
91
_controller? .reload ();
@@ -73,15 +94,9 @@ class _EchartsState extends State<Echarts> {
73
94
}
74
95
75
96
void init () async {
76
- final extensionsStr = this .widget.extensions.length > 0
77
- ? this
78
- .widget
79
- .extensions
80
- .reduce ((value, element) => value + '\n ' + element)
81
- : '' ;
82
- final themeStr =
83
- this .widget.theme != null ? '\' ${this .widget .theme }\' ' : 'null' ;
84
- await _controller? .runJavascript ('''
97
+ final extensionsStr = this .widget.extensions.length > 0 ? this .widget.extensions.reduce ((value, element) => value + '\n ' + element) : '' ;
98
+ final themeStr = this .widget.theme != null ? '\' ${this .widget .theme }\' ' : 'null' ;
99
+ await _controller? .runJavaScript ('''
85
100
$echartsScript
86
101
$extensionsStr
87
102
var chart = echarts.init(document.getElementById('chart'), $themeStr );
@@ -95,8 +110,7 @@ class _EchartsState extends State<Echarts> {
95
110
96
111
Set <Factory <OneSequenceGestureRecognizer >> getGestureRecognizers () {
97
112
Set <Factory <OneSequenceGestureRecognizer >> set = Set ();
98
- if (this .widget.captureAllGestures ||
99
- this .widget.captureHorizontalGestures) {
113
+ if (this .widget.captureAllGestures || this .widget.captureHorizontalGestures) {
100
114
set .add (Factory <HorizontalDragGestureRecognizer >(() {
101
115
return HorizontalDragGestureRecognizer ()
102
116
..onStart = (DragStartDetails details) {}
@@ -122,7 +136,7 @@ class _EchartsState extends State<Echarts> {
122
136
void update (String preOption) async {
123
137
_currentOption = widget.option;
124
138
if (_currentOption != preOption) {
125
- await _controller? .runJavascript ('''
139
+ await _controller? .runJavaScript ('''
126
140
try {
127
141
chart.setOption($_currentOption , true);
128
142
} catch(e) {
@@ -145,30 +159,8 @@ class _EchartsState extends State<Echarts> {
145
159
146
160
@override
147
161
Widget build (BuildContext context) {
148
- return WebView (
149
- backgroundColor: Color (0x00000000 ),
150
- initialUrl: htmlBase64,
151
- javascriptMode: JavascriptMode .unrestricted,
152
- onWebViewCreated: (WebViewController webViewController) {
153
- _controller = webViewController;
154
- },
155
- onPageFinished: (String url) {
156
- init ();
157
- },
158
- onWebResourceError: (e) {
159
- if (widget.onWebResourceError != null ) {
160
- widget.onWebResourceError !(_controller! , Exception (e));
161
- }
162
- },
163
- javascriptChannels: < JavascriptChannel > [
164
- JavascriptChannel (
165
- name: 'Messager' ,
166
- onMessageReceived: (JavascriptMessage javascriptMessage) {
167
- if (widget.onMessage != null ) {
168
- widget.onMessage !(javascriptMessage.message);
169
- }
170
- }),
171
- ].toSet (),
162
+ return WebViewWidget (
163
+ controller: _controller! ,
172
164
gestureRecognizers: getGestureRecognizers ());
173
165
}
174
166
}
0 commit comments