flutter_echarts
a flutter widget to use ech,arts in a reactive way.
![[2025] A Flutter widget to use Echarts in a reactive way bar](https://i0.wp.com/user-images.githubusercontent.com/19553554/52197440-843a5200-289a-11e9-8601-3ce8d945b04a.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way boxplot](https://i0.wp.com/user-images.githubusercontent.com/19553554/52360729-ad640980-2a77-11e9-84e2-feff7e11aea5.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way echarts](https://i0.wp.com/user-images.githubusercontent.com/19553554/52535290-4b611800-2d87-11e9-8bf2-b43a54a3bda8.png?resize=770%2C454&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way funnel](https://i0.wp.com/user-images.githubusercontent.com/19553554/52332816-ac5eb800-2a36-11e9-8227-3538976f447d.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way gague](https://i0.wp.com/user-images.githubusercontent.com/19553554/52332988-0b243180-2a37-11e9-9db8-eb6b8c86a0de.png?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way geo](https://i0.wp.com/user-images.githubusercontent.com/19553554/52344575-133f9980-2a56-11e9-93e0-568e484936ce.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way graph](https://i0.wp.com/user-images.githubusercontent.com/19553554/52727805-f7f20280-2ff0-11e9-91ab-cd99848e3127.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way heatmap](https://i0.wp.com/user-images.githubusercontent.com/19553554/52345115-6534ef00-2a57-11e9-80cd-9cbfed252139.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way kline](https://i0.wp.com/user-images.githubusercontent.com/19553554/52345490-4a16af00-2a58-11e9-9b43-7bbc86aa05b6.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way line](https://i0.wp.com/user-images.githubusercontent.com/19553554/52346064-b7770f80-2a59-11e9-9e03-6dae3a8c637d.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way liquid](https://i0.wp.com/user-images.githubusercontent.com/19553554/52347117-248ba480-2a5c-11e9-8402-5a94054dca50.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way map](https://i0.wp.com/user-images.githubusercontent.com/19553554/52347915-0a52c600-2a5e-11e9-8039-41268238576c.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way parallel](https://i0.wp.com/user-images.githubusercontent.com/19553554/52535013-e48e2f80-2d83-11e9-8886-ac0d2122d6af.png?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way pie](https://i0.wp.com/user-images.githubusercontent.com/19553554/52348202-bb596080-2a5e-11e9-84a7-60732be0743a.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way radar](https://i0.wp.com/user-images.githubusercontent.com/19553554/52533994-932b7380-2d76-11e9-93b4-0de3132eb941.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way scatter](https://i0.wp.com/user-images.githubusercontent.com/19553554/52348431-420e3d80-2a5f-11e9-8cab-7b415592dc77.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way wordcloud](https://i0.wp.com/user-images.githubusercontent.com/19553554/52348737-01fb8a80-2a60-11e9-94ac-dacbd7b58811.png?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way bar3d](https://i0.wp.com/user-images.githubusercontent.com/19553554/52433989-4f075b80-2b49-11e9-9979-ef32c2d17c96.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way line3d](https://i0.wp.com/user-images.githubusercontent.com/19553554/52464826-4baab900-2bb7-11e9-8299-776f5ee43670.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way sankey](https://i0.wp.com/user-images.githubusercontent.com/19553554/52802261-8d0cfe00-30ba-11e9-8ae7-ae0773770a59.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way scatter3d](https://i0.wp.com/user-images.githubusercontent.com/19553554/52464647-aee81b80-2bb6-11e9-864e-c544392e523a.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way surface3d](https://i0.wp.com/user-images.githubusercontent.com/19553554/52465183-a55fb300-2bb8-11e9-8c10-4519c4e3f758.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way themeriver](https://i0.wp.com/user-images.githubusercontent.com/19553554/52798246-7ebae400-30b2-11e9-8489-6c10339c3429.gif?w=770&ssl=1)
![[2025] A Flutter widget to use Echarts in a reactive way overlap](https://i0.wp.com/user-images.githubusercontent.com/19553554/52349544-c2ce3900-2a61-11e9-82af-28aaaaae0d67.gif?w=770&ssl=1)
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 ech,arts’ data driving architecture, flutter_echa,rts 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
echar,ts 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.
blog
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_ech,arts 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: echa,rts(
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
the javascript ech,arts option for the chart as a string. the ech,arts 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 ec,harts 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
''';
Comments are closed.