{"id":13401207,"url":"https://github.com/hustcc/echarts-for-react","last_synced_at":"2025-05-13T21:03:14.457Z","repository":{"id":37431169,"uuid":"60322697","full_name":"hustcc/echarts-for-react","owner":"hustcc","description":"⛳️  Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。","archived":false,"fork":false,"pushed_at":"2025-03-20T01:31:06.000Z","size":8664,"stargazers_count":4727,"open_issues_count":60,"forks_count":644,"subscribers_count":62,"default_branch":"master","last_synced_at":"2025-05-06T20:25:53.399Z","etag":null,"topics":["echarts","echarts-for-react","javascript","react","react-component","visualization"],"latest_commit_sha":null,"homepage":"https://git.hust.cc/echarts-for-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hustcc.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-06-03T06:08:21.000Z","updated_at":"2025-05-06T04:56:02.000Z","dependencies_parsed_at":"2024-06-18T11:01:43.321Z","dependency_job_id":"0ba54b03-b846-4aeb-964a-031655467df4","html_url":"https://github.com/hustcc/echarts-for-react","commit_stats":{"total_commits":21,"total_committers":12,"mean_commits":1.75,"dds":0.6190476190476191,"last_synced_commit":"f90ab4a72b05f04303b3dfb4d7a11f48009d0c44"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fecharts-for-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fecharts-for-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fecharts-for-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fecharts-for-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hustcc","download_url":"https://codeload.github.com/hustcc/echarts-for-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253655955,"owners_count":21943081,"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":["echarts","echarts-for-react","javascript","react","react-component","visualization"],"created_at":"2024-07-30T19:00:59.825Z","updated_at":"2025-05-13T21:03:14.408Z","avatar_url":"https://github.com/hustcc.png","language":"TypeScript","readme":"# echarts-for-react\n\nThe simplest, and the best React wrapper for [Apache ECharts](https://github.com/apache/incubator-echarts). \n\n[![npm](https://img.shields.io/npm/v/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react)\n[![build](https://github.com/hustcc/echarts-for-react/actions/workflows/build.yml/badge.svg)](https://github.com/hustcc/echarts-for-react/actions/workflows/build.yml)\n[![Coverage](https://img.shields.io/coveralls/hustcc/echarts-for-react/master.svg)](https://coveralls.io/github/hustcc/echarts-for-react)\n[![NPM downloads](https://img.shields.io/npm/dm/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react)\n[![License](https://img.shields.io/npm/l/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react)\n![ECharts Ver](https://img.shields.io/badge/echarts-%5E3.0.0%20%7C%7C%20%5E4.0.0%20%7C%7C%20%5E5.0.0-blue.svg)\n![React Ver](https://img.shields.io/badge/React-%20%5E15.0.0%20%7C%7C%20%20%5E16.0.0%20%7C%7C%20%20%5E17.0.0-blue.svg)\n\n\n## Install\n\n```bach\n$ npm install --save echarts-for-react\n\n# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.\n$ npm install --save echarts\n```\n\nThen use it.\n\n```ts\nimport ReactECharts from 'echarts-for-react';\n\n// render echarts option.\n\u003cReactECharts option={this.getOption()} /\u003e\n```\n\nYou can run website.\n\n```bash\n$ git clone git@github.com:hustcc/echarts-for-react.git\n\n$ npm install\n\n$ npm start\n```\n\nThen open [http://127.0.0.1:8081/](http://127.0.0.1:8081/) in your browser. or see [https://git.hust.cc/echarts-for-react/](https://git.hust.cc/echarts-for-react/) which is deploy on gh-pages.\n\n\n## Usage\n\nCode of a simple demo code showed below. For more example can see: [https://git.hust.cc/echarts-for-react/](https://git.hust.cc/echarts-for-react/)\n\n```ts\nimport React from 'react';\nimport ReactECharts from 'echarts-for-react';  // or var ReactECharts = require('echarts-for-react');\n\n\u003cReactECharts\n  option={this.getOption()}\n  notMerge={true}\n  lazyUpdate={true}\n  theme={\"theme_name\"}\n  onChartReady={this.onChartReadyCallback}\n  onEvents={EventsDict}\n  opts={}\n/\u003e\n```\n\nImport ECharts.js modules manually to reduce bundle size\n\n**With Echarts.js v5:**\n\n```ts\nimport React from 'react';\n// import the core library.\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\n// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import charts, all with Chart suffix\nimport {\n  // LineChart,\n  BarChart,\n  // PieChart,\n  // ScatterChart,\n  // RadarChart,\n  // MapChart,\n  // TreeChart,\n  // TreemapChart,\n  // GraphChart,\n  // GaugeChart,\n  // FunnelChart,\n  // ParallelChart,\n  // SankeyChart,\n  // BoxplotChart,\n  // CandlestickChart,\n  // EffectScatterChart,\n  // LinesChart,\n  // HeatmapChart,\n  // PictorialBarChart,\n  // ThemeRiverChart,\n  // SunburstChart,\n  // CustomChart,\n} from 'echarts/charts';\n// import components, all suffixed with Component\nimport {\n  // GridSimpleComponent,\n  GridComponent,\n  // PolarComponent,\n  // RadarComponent,\n  // GeoComponent,\n  // SingleAxisComponent,\n  // ParallelComponent,\n  // CalendarComponent,\n  // GraphicComponent,\n  // ToolboxComponent,\n  TooltipComponent,\n  // AxisPointerComponent,\n  // BrushComponent,\n  TitleComponent,\n  // TimelineComponent,\n  // MarkPointComponent,\n  // MarkLineComponent,\n  // MarkAreaComponent,\n  // LegendComponent,\n  // LegendScrollComponent,\n  // LegendPlainComponent,\n  // DataZoomComponent,\n  // DataZoomInsideComponent,\n  // DataZoomSliderComponent,\n  // VisualMapComponent,\n  // VisualMapContinuousComponent,\n  // VisualMapPiecewiseComponent,\n  // AriaComponent,\n  // TransformComponent,\n  DatasetComponent,\n} from 'echarts/components';\n// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport {\n  CanvasRenderer,\n  // SVGRenderer,\n} from 'echarts/renderers';\n\n// Register the required components\necharts.use(\n  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]\n);\n\n// The usage of ReactEChartsCore are same with above.\n\u003cReactEChartsCore\n  echarts={echarts}\n  option={this.getOption()}\n  notMerge={true}\n  lazyUpdate={true}\n  theme={\"theme_name\"}\n  onChartReady={this.onChartReadyCallback}\n  onEvents={EventsDict}\n  opts={}\n/\u003e\n```\n\n**With Echarts.js v3 or v4:**\n\n```ts\nimport React from 'react';\n// import the core library.\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\n\n// then import echarts modules those you have used manually.\nimport echarts from 'echarts/lib/echarts';\n// import 'echarts/lib/chart/line';\nimport 'echarts/lib/chart/bar';\n// import 'echarts/lib/chart/pie';\n// import 'echarts/lib/chart/scatter';\n// import 'echarts/lib/chart/radar';\n\n// import 'echarts/lib/chart/map';\n// import 'echarts/lib/chart/treemap';\n// import 'echarts/lib/chart/graph';\n// import 'echarts/lib/chart/gauge';\n// import 'echarts/lib/chart/funnel';\n// import 'echarts/lib/chart/parallel';\n// import 'echarts/lib/chart/sankey';\n// import 'echarts/lib/chart/boxplot';\n// import 'echarts/lib/chart/candlestick';\n// import 'echarts/lib/chart/effectScatter';\n// import 'echarts/lib/chart/lines';\n// import 'echarts/lib/chart/heatmap';\n\n// import 'echarts/lib/component/graphic';\n// import 'echarts/lib/component/grid';\n// import 'echarts/lib/component/legend';\nimport 'echarts/lib/component/tooltip';\n// import 'echarts/lib/component/polar';\n// import 'echarts/lib/component/geo';\n// import 'echarts/lib/component/parallel';\n// import 'echarts/lib/component/singleAxis';\n// import 'echarts/lib/component/brush';\n\nimport 'echarts/lib/component/title';\n\n// import 'echarts/lib/component/dataZoom';\n// import 'echarts/lib/component/visualMap';\n\n// import 'echarts/lib/component/markPoint';\n// import 'echarts/lib/component/markLine';\n// import 'echarts/lib/component/markArea';\n\n// import 'echarts/lib/component/timeline';\n// import 'echarts/lib/component/toolbox';\n\n// import 'zrender/lib/vml/vml';\n\n// The usage of ReactEChartsCore are same with above.\n\u003cReactEChartsCore\n  echarts={echarts}\n  option={this.getOption()}\n  notMerge={true}\n  lazyUpdate={true}\n  theme={\"theme_name\"}\n  onChartReady={this.onChartReadyCallback}\n  onEvents={EventsDict}\n  opts={}\n/\u003e\n```\n\nFor **Next.js** user, code transpilation is needed. For Next.js 13.1 or higher, as all `next-transpile-modules` features are natively built-in and the package has been deprecated, so please add `transpilePackages: ['echarts', 'zrender']` into `nextConfig` object: \n\n```js\n// next.config.js\n/** @type {import('next').NextConfig} */\n\nconst nextConfig = {\n  // ...existing properties,\n  transpilePackages: ['echarts', 'zrender'],\n}\n\nmodule.exports = nextConfig\n```\n\nFor Next.js with version \u003c 13.1:\n\n```js\n// next.config.js\nconst withTM = require(\"next-transpile-modules\")([\"echarts\", \"zrender\"]);\n\nmodule.exports = withTM({})\n```\n\n## Props of Component\n\n - **`option`** (required, object)\n\nthe echarts option config, can see [https://echarts.apache.org/option.html#title](https://echarts.apache.org/option.html#title).\n\n - **`notMerge`** (optional, object)\n\nwhen `setOption`, not merge the data, default is `false`. See [https://echarts.apache.org/api.html#echartsInstance.setOption](https://echarts.apache.org/api.html#echartsInstance.setOption).\n\n - **`replaceMerge`** (optional, string | string[])\n\nwhen `setOption`, default is `null`. See [https://echarts.apache.org/api.html#echartsInstance.setOption](https://echarts.apache.org/api.html#echartsInstance.setOption).\n\n - **`lazyUpdate`** (optional, object)\n\nwhen `setOption`, lazy update the data, default is `false`. See [https://echarts.apache.org/api.html#echartsInstance.setOption](https://echarts.apache.org/api.html#echartsInstance.setOption).\n\n - **`style`** (optional, object)\n\nthe `style` of echarts div. `object`, default is {height: '300px'}.\n\n - **`className`** (optional, string)\n\nthe `class` of echarts div. you can setting the css style of charts by class name.\n\n - **`theme`** (optional, string)\n\nthe `theme` of echarts. `string`, should `registerTheme` before use it (theme object format: [https://github.com/ecomfe/echarts/blob/master/theme/dark.js](https://github.com/ecomfe/echarts/blob/master/theme/dark.js)). e.g.\n\n```ts\n// import echarts\nimport echarts from 'echarts';\n...\n// register theme object\necharts.registerTheme('my_theme', {\n  backgroundColor: '#f4cccc'\n});\n...\n// render the echarts use option `theme`\n\u003cReactECharts\n  option={this.getOption()}\n  style={{height: '300px', width: '100%'}}\n  className='echarts-for-echarts'\n  theme='my_theme' /\u003e\n```\n\n - **`onChartReady`** (optional, function)\n\nwhen the chart is ready, will callback the function with the `echarts object` as it's paramter.\n\n - **`loadingOption`** (optional, object)\n\nthe echarts loading option config, can see [https://echarts.apache.org/api.html#echartsInstance.showLoading](https://echarts.apache.org/api.html#echartsInstance.showLoading).\n\n - **`showLoading`** (optional, bool, default: false)\n\n`bool`, when the chart is rendering, show the loading mask.\n\n - **`onEvents`** (optional, array(string=\u003efunction) )\n\nbinding the echarts event, will callback with the `echarts event object`, and `the echart object` as it's paramters. e.g:\n\n```ts\nconst onEvents = {\n  'click': this.onChartClick,\n  'legendselectchanged': this.onChartLegendselectchanged\n}\n...\n\u003cReactECharts\n  option={this.getOption()}\n  style={{ height: '300px', width: '100%' }}\n  onEvents={onEvents}\n/\u003e\n```\nfor more event key name, see: [https://echarts.apache.org/api.html#events](https://echarts.apache.org/api.html#events)\n\n - **`opts`** (optional, object)\n\nthe `opts` of echarts. `object`, will be used when initial echarts instance by `echarts.init`. Document [here](https://echarts.apache.org/api.html#echarts.init).\n\n```ts\n\u003cReactECharts\n  option={this.getOption()}\n  style={{ height: '300px' }}\n  opts={{renderer: 'svg'}} // use svg to render the chart.\n/\u003e\n```\n\n- **`autoResize`** (optional, boolean)\n\ndecide whether to trigger `this.resize` when window resize. default is `true`.\n\n\n## Component API \u0026 Echarts API\n\nthe Component only has `one API` named `getEchartsInstance`.\n\n - **`getEchartsInstance()`** : get the echarts instance object, then you can use any `API of echarts`.\n\nfor example:\n\n```ts\n// render the echarts component below with rel\n\u003cReactECharts\n  ref={(e) =\u003e { this.echartRef = e; }}\n  option={this.getOption()}\n/\u003e\n\n// then get the `ReactECharts` use this.echarts_react\n\nconst echartInstance = this.echartRef.getEchartsInstance();\n// then you can use any API of echarts.\nconst base64 = echartInstance.getDataURL();\n```\n\nTypeScript and `useRef()` example:\n\n```ts\nconst getOption = () =\u003e {/** */};\n\nexport default function App() {\n\tconst echartsRef = useRef\u003cInstanceType\u003ctypeof ReactEcharts\u003e\u003e(null);\n\n\tuseEffect(() =\u003e {\n\t\tif (echartsRef.current) {\n\t\t\tconst echartsInstance = echartsRef.current.getEchartsInstance();\n\t\t\t// do something\n\t\t\techartsInstance.resize();\n\t\t}\n\t}, []);\n\treturn \u003cReactEcharts ref={echartsRef} option={getOption()} /\u003e;\n}\n```\n\n**About API of echarts, can see** [https://echarts.apache.org/api.html#echartsInstance](https://echarts.apache.org/api.html#echartsInstance).\n\nYou can use the API to do:\n\n1. `binding / unbinding` event.\n2. `dynamic charts` with dynamic data.\n3. get the echarts dom / dataURL / base64, save the chart to png.\n4. `release` the charts.\n\n\n## FAQ\n\n### How to render the chart with svg when using echarts 4.x\n\nUse the props `opts` of component with `renderer = 'svg'`. For example:\n\n\n```ts\n\u003cReactECharts\n  option={this.getOption()}\n  style={{height: '300px'}}\n  opts={{renderer: 'svg'}} // use svg to render the chart.\n/\u003e\n```\n\n### How to resolve Error `Component series.scatter3D not exists. Load it first.`\n\nInstall and import [`echarts-gl`](https://www.npmjs.com/package/echarts-gl) module when you want to create a [GL instance](https://www.echartsjs.com/examples/zh/index.html#chart-type-globe)\n\n```sh\nnpm install --save echarts-gl\n```\n\n```ts\nimport 'echarts-gl'\nimport ReactECharts from \"echarts-for-react\";\n\n\u003cReactECharts\n  option={GL_OPTION}\n/\u003e\n```\n\n\n## LICENSE\n\nMIT@[hustcc](https://github.com/hustcc).\n","funding_links":[],"categories":["Data Visualization","UI Components","Uncategorized","TypeScript","[React](https://github.com/facebook/react/)","Frameworks","React [🔝](#readme)","JavaScript tools"],"sub_categories":["Chart","Uncategorized","Data Visualization","React Component","Charting libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fecharts-for-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhustcc%2Fecharts-for-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fecharts-for-react/lists"}