flutter_echarts
一个用于以响应式方式使用 Echarts 的 Flutter 小部件。
特点
响应式更新
Flutter组件和React组件最令人兴奋的特性是视图可以根据数据变化做出响应式更新。得益于Echarts的数据驱动架构，flutter_echarts实现了一种响应式的方式将图表与数据连接起来。当option属性中的数据发生变化时，图表会自动重新渲染。
双向通信
onMessage和extraScript属性提供了一种从Flutter到JavaScript或反向设置事件通信的方式。
可配置的扩展
Echarts有很多扩展。extensions属性允许您将扩展脚本作为原始字符串注入。这样，您就可以将这些脚本复制到源代码中，而无需担心令人困惑的资源目录。
博客
安装
将此添加到您的 package 的 pubspec.yaml 文件中
dependencies:
flutter_echarts: #latest version
现在，在您的 Dart 代码中，您可以使用
import 'package:flutter_echarts/flutter_echarts.dart';
详情请参见pub.dev。
用法
flutter_echarts本身非常简单易用，就像一个普通的statelessWidget一样
Container(
child: Echarts(
option: '''
{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
''',
),
width: 300,
height: 250,
)
对于iOS应用，您需要将此条目添加到Info.plist的<dict>标签中
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
完整的示例在这里：flutter_echarts_example。
Widget 属性
选项
字符串
图表的JavaScript Echarts Option，以字符串形式表示。echarts主要通过此属性进行配置。您可以使用Dart的jsonEncode()函数将Dart对象形式的数据进行转换。
source: ${jsonEncode(_data1)},
由于JavaScript没有'''，您可以使用此运算符来减少一些引号的转义。
Echarts(
option: '''
// option string
''',
),
extraScript
字符串
在Echarts.init()之后和任何chart.setOption()之前执行的JavaScript。该小部件构建了一个名为Messager的JavaScript通道，因此您可以使用此标识符从JavaScript发送消息到Flutter。
extraScript: '''
chart.on('click', (params) => {
if(params.componentType === 'series') {
Messager.postMessage('anything');
}
});
''',
onMessage
void Function(String)
用于处理在extraScript中的Messager.postMessage()发送的消息的函数。
extensions
List<String>
从Echarts扩展复制的字符串列表，例如组件、WebGL、语言等。您可以在此处下载它们。将它们作为原始字符串插入。
const liquidPlugin = r'''
// copy from liquid.min.js
''';
