flutter_echarts
一个用于以响应式方式使用 Apache ECharts（孵化中）的 Flutter 小部件。
功能
注意：flutter_echarts 侧重于复杂的图表和交互。它通过 WebView 实现。如果您更喜欢更好的性能和功能，但更简单的图表，我们推荐这个纯 Flutter 可视化库：Graphic
响应式更新
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 一样。
有关
option对象的详细信息，请参阅 Echarts 文档 或 Echarts 示例。
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,
)
请参阅完整的 flutter_echarts_example。
Widget 属性
选项
字符串
(必需)
ECharts 主要通过将字符串值传递给 JavaScript option 属性进行配置。
您可以使用 dart:convert 中的 jsonEncode() 函数将 Dart 对象形式的数据转换为字符串。
source: ${jsonEncode(_data1)},
由于 JavaScript 中没有 '''，您可以使用此运算符来减少一些引号的转义。
Echarts(
option: '''
// option string
''',
),
要在 option 属性中使用图像，我们建议使用 Base64 Data URL。
image: 'data:image/png;base64,iVBORw0KG...',
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 和语言。您可以从官方 ECharts 扩展列表下载它们。将扩展作为原始字符串插入。
const liquidPlugin = r'''
// copy from liquid.min.js
''';
theme
字符串
您可以下载内置的 ECharts 主题，或使用ECharts 主题生成器构建自己的自定义主题。将主题脚本复制到 extensions 参数中，并使用此参数注册主题名称。
captureAllGestures
布尔值
(默认为：false)
将 captureAllGestures 设置为 true 对于处理 3D 旋转和数据缩放条很有用。请注意，设置此选项会阻止 ListView 等容器响应图表上的手势。
如果为 true，则 captureHorizontalGestures 和 captureVerticalGestures 会被强制为 true。
captureHorizontalGestures
布尔值
(默认为：false)
仅捕获水平手势。
captureVerticalGestures
布尔值
(默认为：false)
仅捕获垂直手势。
onLoad
void Function()
图表首次加载和渲染时的回调。
