echarts_flutter_plus 0.0.7 copy "echarts_flutter_plus: ^0.0.7" to clipboard
echarts_flutter_plus: ^0.0.7 copied to clipboard

Platformweb

Flutter plugin for rendering Apache ECharts charts on web.

echarts_flutter_plus #

A Flutter web plugin to fully integrate Apache ECharts in Flutter Web apps, enabling rich visualizations with dynamic configuration and event handling.


Pub Version GitHub stars Flutter Website License: MIT Likes on pub.flutter-io.cn


Features #

  • Full integration of Apache ECharts JavaScript library for Flutter Web.
  • Supports a wide variety of chart types: line, bar, pie, sunburst, tree, scatter, and more.
  • Allows configuration with complete ECharts option JSON or raw JS object string.
  • Safe default mode parsing pure JSON options; optional raw JS parsing for advanced features.
  • Asynchronously loads the ECharts JS library from CDN.
  • Supports dynamic updates and smooth redrawing on option changes and reloading.
  • Custom error handling with user-provided error widgets.
  • Supports dark and light themes via ChartThemeMode.
  • Rich event subscription mechanism to receive callbacks on any ECharts event.
  • Lightweight, easy-to-use Flutter widget for embedding charts.

Widget Props #

Parameter Type Description Default
option String (required) The ECharts option string. When rawOption is false, must be valid JSON.
rawOption bool If true, option is parsed as a raw JavaScript object literal (unsafe). false
width double Chart width in pixels 400
height double Chart height in pixels 300
theme String? Chart theme mode (e.g., light or dark). Defaults to light if null. null
enableLogger bool Print debug logs in browser console false
errorBuilder Widget Function(BuildContext, Object, StackTrace?)? Widget builder for displaying errors null
loadTimeoutSeconds int Seconds before ECharts load timeout triggers an error 12
reload int Increment to force chart reload 0
initOptions JSAny? Extra ECharts JS initialization options (advanced) null
onEvents Map<EChartsEvent, void Function(dynamic)>? Map of ECharts event names to Dart event handler callbacks null

Parameters and Settings #

A string containing the JSON configuration for the chart, based on the Apache ECharts documentation.


Getting Started #

Installation #

Add this to your pubspec.yaml dependencies section:

dependencies:
  echarts_flutter_plus: ^0.0.7

Now in your Dart code, you can use:

import 'package:echarts_flutter_plus/echarts_flutter_plus.dart';  

Details see pub.flutter-io.cn.


Usage #

Import the package in your Dart code:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:echarts_flutter_plus/echarts_flutter_plus.dart';

final option = {
  'xAxis': {
    'type': 'category',
    'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  },
  'yAxis': {
    'type': 'value',
  },
  'series': [
    {
      'type': 'line',
      'data': [820, 932, 901, 934],
    },
  ],
};

class SimpleChartDemo extends StatelessWidget {
  const SimpleChartDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ECharts Demo')),
      body: Center(
        child: EChartsWebView(
          option: jsonEncode(option),
          width: 400,
          height: 300,
          theme: ChartThemeMode.dark,
          enableLogger: true,
          onEvents: {
            EChartsEvent.click: (params) {
              debugPrint('Clicked: $params');
            },
            EChartsEvent.mouseover: (params) {
              debugPrint('Mouse over: $params');
            },
          },
        ),
      ),
    );
  }
}

Raw JavaScript Option Usage (Advanced) #

Enable rawOption to allow the entire option string to include JavaScript code such as formatter functions:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:echarts_flutter_plus/echarts_flutter_plus.dart';

final rawOption = '''
{
  tooltip: {
    formatter: function(params) {
      return params.name + ': ' + params.value;
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed'],
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [150, 230, 210]
  }]
}
''';

class SimpleChartDemo extends StatelessWidget {
  const SimpleChartDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ECharts Demo')),
      body: Center(
        child: EChartsWebView(
          option: rawOption,
          width: 400,
          height: 300,
          rawOption: true,
          theme: ChartThemeMode.dark,
          enableLogger: true,
          onEvents: {
            EChartsEvent.click: (params) {
              debugPrint('Clicked: $params');
            },
            EChartsEvent.mouseover: (params) {
              debugPrint('Mouse over: $params');
            },
          },
        ),
      ),
    );
  }
}

Event Handling #

You can listen to any ECharts event by passing a map of event names to callbacks in onEvents. The callbacks receive the raw event data.

EChartsWebView(
  option: jsonEncode(option),
  onEvents: {
    EChartsEvent.click: (params) => debugPrint('Clicked: $params'),
    EChartsEvent.datazoom: (params) => debugPrint('Zoomed: $params'),
  },
);


Error Handling #

You can customize how errors are displayed by providing the errorBuilder property:

EChartsWebView(
    option: jsonEncode(yourOption),
    errorBuilder: (context, error, stackTrace) {
        return Center(child: Text('Error loading chart: $error'));
    },
);


Development & Contribution #

Contributions, bug reports, and feature requests are welcome!
Please open issues or pull requests on GitHub repository.


Acknowledgments #

This plugin loads Apache ECharts, which is licensed under the Apache License 2.0.

If you use this plugin, you are also subject to the Apache 2.0 license for the ECharts library itself.


License #

This plugin is licensed under the MIT License.