README_CN.md

English

反应式 Apache ECharts Flutter 组件。

注意：

由于本库基于 webview，因此存在一些固有的不稳定和性能问题。我们推荐 Flutter 图表库 Graphic 作为替代。

特点

反应式更新

Flutter 和 React 组件最方便的一点是可以根据数据的变化反应式的更新视图。基于 Echarts 数据驱动式的架构，flutter_echarts 为图表和数据建立了一种反应式的联系。当option 参数中的数据变化时，图表可以自动重新渲染。

双向通信

通过 onMessage 和 extraScript 这两个参数，可以设置 JavaScript 和 Flutter 之间的事件双向通信。

配置扩展

Echarts 有很多 扩展 。你可以通过extensions 参数插入这些扩展的文本字符串，以便在源码中管理这些扩展脚本，而不需要操心繁琐的 asset 目录。

安装

在 pbuspec.yaml 文件中添加：

dependencies:
  flutter_echarts: #最新版本

在需要使用的文件中：

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 。

组件参数

option

String

( 必需 )

字符串形式的 JavaScript Echarts Option。Echarts 图表主要就是通过这个参数配置的。你可以通过 dart:convert 中的 jsonEncode() 来转换 Dart 对象类型的数据：

source: ${jsonEncode(_data1)},

由于 JavaScript 没有''' 符号，你可以使用它来包裹字符串，以省掉一些引号的转义：

Echarts(
  option: '''
  
    // option string
    
  ''',
),

• 如果需要在 option 中使用图片，我们建议使用 Base64 Data URL :

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<String>

从 Echarts 扩展中拷贝的脚本字符串组成的数组，比如各种主题、组件、WebGl、语言等。可以从 这里 下载。将它们作为原始字符串（raw string）引入：

const liquidPlugin = r'''

  // copy from liquid.min.js

''';

theme

String

从 这里 可以下载主题，或者用 这个工具 定制自己的主题。将主题的脚本拷贝到 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 组件

一次 Flutter WebView 性能优化

---

如果有建议或要求，请发起 issue 。

示例 GIF 来自 chenjiandongx