# flutter_echarts
**Repository Path**: lingsuo/flutter_echarts
## Basic Information
- **Project Name**: flutter_echarts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: BSD-2-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-29
- **Last Updated**: 2025-08-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 归档通知
**历经多年后，这个项目作为使用 Webview 的过渡方案，已经完成了它的历史使命，因此将其归档。我们推荐 [Graphic](https://github.com/entronad/graphic) 或其他的原生图表库作为替代。**
[English](https://github.com/entronad/flutter_echarts/blob/master/README.md)
*反应式 [Apache ECharts](https://github.com/apache/incubator-echarts) Flutter 组件。*
# 特点
**反应式更新**
Flutter 和 React 组件最方便的一点是可以根据数据的变化反应式的更新视图。基于 Echarts 数据驱动式的架构，flutter_echarts 为图表和数据建立了一种反应式的联系。当`option` 参数中的数据变化时，图表可以自动重新渲染。
**双向通信**
通过 `onMessage` 和 `extraScript` 这两个参数，可以设置 JavaScript 和 Flutter 之间的事件双向通信。
**配置扩展**
Echarts 有很多 [扩展](https://echarts.apache.org/zh/download-extension.html) 。你可以通过`extensions` 参数插入这些扩展的文本字符串，以便在源码中管理这些扩展脚本，而不需要操心繁琐的 asset 目录。
# 安装
在 pbuspec.yaml 文件中添加：
```
dependencies:
flutter_echarts: #最新版本
```
在需要使用的文件中：
```
import 'package:flutter_echarts/flutter_echarts.dart';
```
详见 [pub.dev](https://pub.dev/packages/flutter_echarts#-installing-tab-) .
# 使用
flutter_echarts 使用起来很简单，就像在使用普通的 statelessWidget ：
> option 的具体设置请见 [Echarts 文档](https://echarts.apache.org/zh/option.html#title) 或 [Echarts 示例](https://echarts.apache.org/examples/zh/index.html) 。
```
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](https://github.com/entronad/flutter_echarts/tree/master/example) 。
# 组件参数
**option**
*String*
*( 必需 )*
字符串形式的 JavaScript Echarts Option。Echarts 图表主要就是通过这个参数配置的。你可以通过 dart:convert 中的 `jsonEncode()` 来转换 Dart 对象类型的数据：
```
source: ${jsonEncode(_data1)},
```
由于 JavaScript 没有`'''` 符号，你可以使用它来包裹字符串，以省掉一些引号的转义：
```
Echarts(
option: '''
// option string
''',
),
```
- 如果需要在 option 中使用图片，我们建议使用 Base64 [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) :
```
image: 'data:image/png;base64,iVBORw0KG...',
```
**extraScript**
*String*
在 `Echarts.init()` 和任意 `chart.setOption()` 之间执行的 JavaScript 脚本。在组件中我们已经内置了一个 名为 `Messager` 的 JavascriptChennel，所以你可以使用这个标识符来进行 JavaScript 向 Flutter 的通信：
```
extraScript: '''
chart.on('click', (params) => {
if(params.componentType === 'series') {
Messager.postMessage('anything');
}
});
''',
```
**onMessage**
*void Function(String)?*
处理 `extraScript` 中 `Messager.postMessage()` 发送的消息的函数。
**extensions**
*List\*
从 Echarts 扩展中拷贝的脚本字符串组成的数组，比如各种主题、组件、WebGl、语言等。可以从 [这里](https://echarts.apache.org/zh/download-extension.html) 下载。将它们作为原始字符串（raw string）引入：
```
const liquidPlugin = r'''
// copy from liquid.min.js
''';
```
**theme**
*String*
从 [这里](https://echarts.apache.org/zh/download-theme.html) 可以下载主题，或者用 [这个工具](https://echarts.baidu.com/theme-builder/) 定制自己的主题。将主题的脚本拷贝到 `extension` 参数中，并在此参数中注册主题的名称。
**captureAllGestures**
*bool*
*( 默认: false )*
图表是否捕获所有的手势。将其设为 ture 在处理 3D 旋转或数据缩放条时很有用。注意这将阻止容器（比如 ListView ）获取图表上的手势。
如果设为 true， `captureHorizontalGestures` 和 `captureVerticalGestures` 将强制为 true。
**captureHorizontalGestures**
*bool*
*( 默认: false )*
仅捕捉水平滑动。
**captureVerticalGestures**
*bool*
*( 默认: false )*
仅捕捉垂直滑动。
**onLoad**
*void Function(WebViewController)?*
图表第一次加载并渲染后的回调。这个函数中可以获取 Webview 的 controller，以便施展黑魔法。
**reloadAfterInit**
*bool*
*( default: false )*
如果在 iOS 的可滑动组件（ListView、SliverView、PageView 等）中遇到渲染问题，请尝试将 `reloadAfterInit` 设为 `true` 。
**onWebResourceError**
*void Function(WebViewController, Exception)?*
处理加载 Web 资源时的异常.
# 博客
[响应式 Echarts Flutter 组件](https://zhuanlan.zhihu.com/p/99034738)
[一次 Flutter WebView 性能优化](https://zhuanlan.zhihu.com/p/103012116)
---
如果有建议或要求，请发起 [issue](https://github.com/entronad/flutter_echarts/issues) 。
*示例 GIF 来自 [chenjiandongx](https://github.com/chenjiandongx)*
