# 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)

[![pub](https://img.shields.io/pub/v/flutter_echarts.svg)](https://pub.dev/packages/flutter_echarts) *响应式 [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) Flutter 组件。*
bar boxplot effectScatter funnel gague geo graph heatmap kline line liquid map parallel pie radar scatter wordCloud bar3D line3D sankey scatter3D surface3D themeRiver overlap
# 特点 > **提示**: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)*