{"id":13531436,"url":"https://github.com/entronad/flutter_echarts","last_synced_at":"2025-05-16T08:03:28.442Z","repository":{"id":41562661,"uuid":"139805793","full_name":"entronad/flutter_echarts","owner":"entronad","description":"A Flutter widget to use Apache ECharts in a reactive way.","archived":false,"fork":false,"pushed_at":"2023-08-31T06:50:21.000Z","size":1990,"stargazers_count":755,"open_issues_count":80,"forks_count":174,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-08T18:19:38.199Z","etag":null,"topics":["android","chart","charting-library","charts","dart","data-visualization","echarts","flutter","flutter-widgets","ios","javascript"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_echarts","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/entronad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-05T06:38:53.000Z","updated_at":"2025-04-03T08:43:34.000Z","dependencies_parsed_at":"2024-01-05T21:04:23.500Z","dependency_job_id":null,"html_url":"https://github.com/entronad/flutter_echarts","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entronad%2Fflutter_echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entronad%2Fflutter_echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entronad%2Fflutter_echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entronad%2Fflutter_echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/entronad","download_url":"https://codeload.github.com/entronad/flutter_echarts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493381,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","chart","charting-library","charts","dart","data-visualization","echarts","flutter","flutter-widgets","ios","javascript"],"created_at":"2024-08-01T07:01:02.976Z","updated_at":"2025-05-16T08:03:28.423Z","avatar_url":"https://github.com/entronad.png","language":"Dart","readme":"[中文](https://github.com/entronad/flutter_echarts/blob/master/README_CN.md) \n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/entronad/flutter_echarts/master/doc/logo.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"left\"\u003e\n\u003ca href=\"https://pub.dev/packages/flutter_echarts\"\u003e\n\u003cimg src=\"https://img.shields.io/pub/v/flutter_echarts.svg\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n*A Flutter widget to use [Apache ECharts](https://github.com/apache/incubator-echarts) in a reactive way.* \n\n\n\n**Note:**\n\n*Since it is based on webview, this library has some inextricable instability and performance issues. We recommend the Flutter charting library [Graphic](https://github.com/entronad/graphic) as an alternative.*\n\n\n\n# Features\n\n**Reactive Updating**\n\nThe most exciting feature of Flutter widgets and React components is that the view can update reactively when data changes. Thanks to ECharts' data driven architecture, `flutter_echarts` implements a reactive way to connect charts with data. The charts automatically re-render when data in the `option` property changes.\n\n**Two Way Communication**\n\nThe `onMessage` and `extraScript` properties provide a way to set two-way event communication between Flutter and JavaScript.\n\n**Configurable Extensions**\n\nECharts has a lot of [extensions](https://echarts.apache.org/en/download-extension.html). 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 being confusing by assets dirs.\n\n# Installing\n\nAdd this to your package's pubspec.yaml file:\n\n```yaml\ndependencies:\n  flutter_echarts: #latest version\n```\n\nNow in your Dart code, you can use:\n\n```dart\nimport 'package:flutter_echarts/flutter_echarts.dart';  \n```\n\nDetails see [pub.dev](https://pub.dev/packages/flutter_echarts#-installing-tab-).\n\n# Usage\n\nThe `flutter_echarts` package itself is very simple to use, just like a common `statelessWidget`:\n\n\u003e Details about the `option` object is in the [Echarts docs](https://echarts.apache.org/en/option.html) or [Echarts examples](https://echarts.apache.org/examples/en/index.html).\n\n```\nContainer(\n  child: Echarts(\n  option: '''\n    {\n      xAxis: {\n        type: 'category',\n        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n      },\n      yAxis: {\n        type: 'value'\n      },\n      series: [{\n        data: [820, 932, 901, 934, 1290, 1330, 1320],\n        type: 'line'\n      }]\n    }\n  ''',\n  ),\n  width: 300,\n  height: 250,\n)\n```\n\n\n\nSee the full [flutter_echarts_example](https://github.com/entronad/flutter_echarts/tree/master/example).\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52197440-843a5200-289a-11e9-8601-3ce8d945b04a.gif\" width=\"33%\" height=\"33%\" alt=\"bar\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52360729-ad640980-2a77-11e9-84e2-feff7e11aea5.gif\" width=\"33%\" height=\"33%\" alt=\"boxplot\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52535290-4b611800-2d87-11e9-8bf2-b43a54a3bda8.png\" width=\"33%\" height=\"33%\" alt=\"effectScatter\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52332816-ac5eb800-2a36-11e9-8227-3538976f447d.gif\" width=\"33%\" height=\"33%\" alt=\"funnel\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52332988-0b243180-2a37-11e9-9db8-eb6b8c86a0de.png\" width=\"33%\" height=\"33%\" alt=\"gague\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52344575-133f9980-2a56-11e9-93e0-568e484936ce.gif\" width=\"33%\" height=\"33%\" alt=\"geo\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52727805-f7f20280-2ff0-11e9-91ab-cd99848e3127.gif\" width=\"33%\" height=\"33%\" alt=\"graph\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52345115-6534ef00-2a57-11e9-80cd-9cbfed252139.gif\" width=\"33%\" height=\"33%\" alt=\"heatmap\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52345490-4a16af00-2a58-11e9-9b43-7bbc86aa05b6.gif\" width=\"33%\" height=\"33%\" alt=\"kline\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52346064-b7770f80-2a59-11e9-9e03-6dae3a8c637d.gif\" width=\"33%\" height=\"33%\" alt=\"line\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52347117-248ba480-2a5c-11e9-8402-5a94054dca50.gif\" width=\"33%\" height=\"33%\" alt=\"liquid\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52347915-0a52c600-2a5e-11e9-8039-41268238576c.gif\" width=\"33%\" height=\"33%\" alt=\"map\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52535013-e48e2f80-2d83-11e9-8886-ac0d2122d6af.png\" width=\"33%\" height=\"33%\" alt=\"parallel\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52348202-bb596080-2a5e-11e9-84a7-60732be0743a.gif\" width=\"33%\" height=\"33%\" alt=\"pie\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52533994-932b7380-2d76-11e9-93b4-0de3132eb941.gif\" width=\"33%\" height=\"33%\" alt=\"radar\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52348431-420e3d80-2a5f-11e9-8cab-7b415592dc77.gif\" width=\"33%\" height=\"33%\" alt=\"scatter\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52348737-01fb8a80-2a60-11e9-94ac-dacbd7b58811.png\" width=\"33%\" height=\"33%\" alt=\"wordCloud\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52433989-4f075b80-2b49-11e9-9979-ef32c2d17c96.gif\" width=\"33%\" height=\"33%\" alt=\"bar3D\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52464826-4baab900-2bb7-11e9-8299-776f5ee43670.gif\" width=\"33%\" height=\"33%\" alt=\"line3D\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52802261-8d0cfe00-30ba-11e9-8ae7-ae0773770a59.gif\" width=\"33%\" height=\"33%\" alt=\"sankey\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52464647-aee81b80-2bb6-11e9-864e-c544392e523a.gif\" width=\"33%\" height=\"33%\" alt=\"scatter3D\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52465183-a55fb300-2bb8-11e9-8c10-4519c4e3f758.gif\" width=\"33%\" height=\"33%\" alt=\"surface3D\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52798246-7ebae400-30b2-11e9-8489-6c10339c3429.gif\" width=\"33%\" height=\"33%\" alt=\"themeRiver\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/19553554/52349544-c2ce3900-2a61-11e9-82af-28aaaaae0d67.gif\" width=\"33%\" height=\"33%\" alt=\"overlap\"/\u003e\n\u003c/div\u003e\n\n# Widget Properties\n\n**option**\n\n*String*\n\n*( required )*\n\nECharts is mainly configured by passing a string value to the JavaScript `option` property. \n\nYou can use `jsonEncode()` function in `dart:convert` to convert data in Dart object form:\n\n```\nsource: ${jsonEncode(_data1)},\n```\n\nBecause JavaScript don't have `'''`, you can use this operator to reduce some escape operators for quotas:\n\n```\nEcharts(\n  option: '''\n  \n    // option string\n    \n  ''',\n),\n```\n\nTo use images in option properties, we suggest the Base64 [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) :\n\n```\nimage: 'data:image/png;base64,iVBORw0KG...',\n```\n\n**extraScript**\n\n*String*\n\nJavaScript which will execute after the `Echarts.init()` and before any `chart.setOption()`. The widget has a Javascript channel named `Messager`, so you can use this identifier to send messages from JavaScript to Flutter:\n\n```\nextraScript: '''\n  chart.on('click', (params) =\u003e {\n    if(params.componentType === 'series') {\n        Messager.postMessage('anything');\n    }\n  });\n''',\n```\n\n**onMessage**\n\n*void Function(String)?*\n\nFunction to handle the message sent by `Messager.postMessage()` in `extraScript` .\n\n**extensions**\n\n*List\\\u003cString\\\u003e*\n\nList of strings are from Echarts extensions, such as themes, components, WebGL, and languages. You can download them [from the official ECharts extension list](https://echarts.apache.org/en/download-extension.html). Insert extensions as raw strings:\n\n```\nconst liquidPlugin = r'''\n\n  // copy from liquid.min.js\n\n''';\n```\n\n**theme**\n\n*String*\n\nYou can [download built-in ECharts themes](https://echarts.apache.org/en/download-theme.html) or build your own custom themes with [the ECharts theme builder](https://echarts.baidu.com/theme-builder/). Copy the theme script into the `extensions` param and register the theme name with this param.\n\n**captureAllGestures**\n\n*bool*\n\n*( default: false )*\n\nSetting `captureAllGestures` to `true` is useful when handling 3D rotation and data zoom bars. Note that setting prevents containers like ListViews from reacting to gestures on the charts.\n\nIf true, `captureHorizontalGestures` and `captureVerticalGestures` are forced true.\n\n**captureHorizontalGestures**\n\n*bool*\n\n*( default: false )*\n\nOnly capture horizontal gestures.\n\n**captureVerticalGestures**\n\n*bool*\n\n*( default: false )*\n\nOnly capture vertical gestures.\n\n**onLoad**\n\n*void Function(WebViewController)?*\n\nThe callback when first time the chart is loaded and rendered. You can get the webview controller from this function to do your magic.\n\n**reloadAfterInit**\n\n*bool*\n\n*( default: false )*\n\nIf you have trouble in rendering charts in \"Movable Widgets\"(ListView, SliverView, PageVIew...) on iOS, try setting `reloadAfterInit` to `true` .\n\n**onWebResourceError**\n\n*void Function(WebViewController, Exception)?*\n\nHandle the web resource error.\n\n# Blog\n\n[Reactive Echarts Flutter Widget](https://medium.com/@entronad/reactive-echarts-flutter-widget-fedab7f3c52f) \n\n[A performance optimization of Flutter WebView](https://levelup.gitconnected.com/a-performance-optimization-of-flutter-webview-6afa1a5b4300?source=your_stories_page---------------------------)\n\n\n\n---\n\nIf you have any suggestions or requests, please open an [issue](https://github.com/entronad/flutter_echarts/issues).\n\n*The gallery GIF is from [chenjiandongx](https://github.com/chenjiandongx)*\n","funding_links":[],"categories":["组件","Languages","Charts [🔝](#readme)","Components"],"sub_categories":["图表","Dart","Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentronad%2Fflutter_echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fentronad%2Fflutter_echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentronad%2Fflutter_echarts/lists"}