flutter_echarts 1.2.3

中文

pub

A Flutter widget to use Echarts in a reactive way.

bar boxplot effectScatter funnel gague geo graph heatmap kline line liquid map parallel pie radar scatter wordCloud bar3D line3D sankey scatter3D surface3D themeRiver overlap

Features #

Reactive Updating

The most exciting feature of Flutter widgets and React components is that the view could update reactively to the change of data. Thanks to Echarts' data driving architecture, flutter_echarts implemented a reactive way to connect chart with data. The chart will automatically re-render when the data in the option property changes.

Two Way Communication

The onMessage and extraScript properties provide a way to set event communication both from flutter to JavaScript or in controversy.

Configurable Extensions

Echarts has a lot of extensions . the extensions property allows you to inject the extension scripts as raw strings. In this way, you can copy these scripts to your source code, without concerning about the confusing assets dirs.

Installing #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_echarts: #latest version

Now in your Dart code, you can use:

import 'package:flutter_echarts/flutter_echarts.dart';  

Details see pub.dev .

Usage #

The flutter_echarts itself is very simple to use, just like a common statelessWidget:

Details about the option is in the Echarts docs or Echarts examples

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

For an ios app, you need to add this entry to your Info.plist' <dic> tag:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

A full example is here: flutter_echarts_example .

Widget Properties #

option

String

( required )

The JavaScript Echarts Option for the chart as a string. The echarts is mainly configured by this property. You could use jsonEncode() function in dart:convert to convert data in Dart object form:

source: ${jsonEncode(_data1)},

Because JavaScript don't have ''' , you can use this operator to reduce some escape operators for quotas:

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

extraScript

String

The JavaScript which will execute after the Echarts.init() and before any chart.setOption() . The widget has build a javascriptChennel named Messager, so you could use this identifier to send message from JavaScript to Flutter:

extraScript: '''
  chart.on('click', (params) => {
    if(params.componentType === 'series') {
  	  Messager.postMessage('anything');
    }
  });
''',

onMessage

void Function(String)

Function to handle the message sent by Messager.postMessage() in extraScript .

extensions

List<String>

List of strings that coyied from Echarts extensions, such as components, WebGL, languages, etc. You can download them here . Insert them as raw strings:

const liquidPlugin = r'''

  // copy from liquid.min.js

''';

captureAllGestures

bool

( default: false )

Whether the chart captures all gestures. Setting it ture is usefull when handling 3D rotation and data zoom bars. Note that will prevent containers like ListViews to act to gestures on the charts.

Blog #

Reactive Echarts Flutter Widget

A performance optimization of Flutter WebView


If you have any suggestions or demands, please give an issue .

The gallery GIF is from chenjiandongx

1.2.3 #

2020-02-09

  • Fix Echarts link in README.md.

1.2.2 #

2020-02-09

  • Fix the ios encoding bug of the optimization in 1.1.0 and re-implement it.

1.2.1 #

2020-02-06

1.2.0 #

2020-01-25

  • Specify gestureRecognizers to handle gestures.
  • Add property captureAll gestures.

1.1.3 #

2020-01-23

  • Update description.

1.1.2 #

2020-01-23

  • Add html viewport meta to fix scale error in ios.

1.1.1 #

2020-01-20

  • Something is wrong with the ios, fallback to 1.0.6 temporarily.

1.1.0 #

2020-01-15

  • Change the way to load html and greatly optimize performance.

1.0.6 #

2020-01-07

  • Ignore pubspec.lock.
  • Migrate example android to X.

1.0.5 #

2020-01-05

1.0.4 #

2020-01-01

  • Fix README badge.

1.0.3 #

2020-01-01

  • Fix README.

1.0.2 #

2020-01-01

  • Update README.
  • Update license year.

1.0.1 #

2019-12-24

  • Add blog link and installing in README.

1.0.0 #

2019-12-20

  • First formal version.
  • Echarts version 4.5.0

0.1.0 #

2019-12-18

  • Initial beta version.

example/README.md

flutter_echarts_example #

Example App of flutter_echarts.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_echarts: ^1.2.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_echarts/flutter_echarts.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
84
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

We analyzed this package on Feb 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/flutter_echarts.dart.

Run flutter format to format lib/flutter_echarts.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
webview_flutter ^0.3.19 0.3.19+8
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test