# flutter_echarts
**Repository Path**: miluduo/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**: 2021-03-05
- **Last Updated**: 2024-05-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
[English](https://github.com/entronad/flutter_echarts/blob/master/README.md)
[](https://pub.dev/packages/flutter_echarts)
*响应式 [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) Flutter 组件。*
# 特点
> **提示**:flutter_echarts 主要为提供复杂的图表和交互。它通过 WebView 实现。您对性能和兼容性要求更高,而仅需要简单的图表,推荐纯 Flutter 可视化库:[Graphic](https://github.com/entronad/graphic)
**响应式更新**
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()*
图表第一次加载并渲染后的回调。
# 博客
[响应式 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)*