{"id":13531485,"url":"https://github.com/xlsdg/react-echarts-v3","last_synced_at":"2025-07-31T17:32:33.195Z","repository":{"id":79205265,"uuid":"75141959","full_name":"xlsdg/react-echarts-v3","owner":"xlsdg","description":"React.js(v16.x+) component wrap for ECharts.js(v3.x+)","archived":false,"fork":false,"pushed_at":"2020-04-07T11:17:38.000Z","size":2180,"stargazers_count":50,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-30T08:38:19.076Z","etag":null,"topics":["chart","echarts","library","react","react-component","react-echarts","reactjs","visualization"],"latest_commit_sha":null,"homepage":"https://xlsdg.github.io/react-echarts-v3-demo/","language":"JavaScript","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/xlsdg.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-30T02:15:26.000Z","updated_at":"2023-03-23T14:41:41.000Z","dependencies_parsed_at":"2023-03-22T00:32:48.596Z","dependency_job_id":null,"html_url":"https://github.com/xlsdg/react-echarts-v3","commit_stats":{"total_commits":83,"total_committers":1,"mean_commits":83.0,"dds":0.0,"last_synced_commit":"085ff174887f73fc31e59f7d7abe6746229c6cb4"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Freact-echarts-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Freact-echarts-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Freact-echarts-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Freact-echarts-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xlsdg","download_url":"https://codeload.github.com/xlsdg/react-echarts-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228275007,"owners_count":17895008,"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":["chart","echarts","library","react","react-component","react-echarts","reactjs","visualization"],"created_at":"2024-08-01T07:01:03.364Z","updated_at":"2024-12-05T10:14:10.708Z","avatar_url":"https://github.com/xlsdg.png","language":"JavaScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["React Component"],"readme":"# react-echarts-v3 [![npm](https://img.shields.io/npm/v/react-echarts-v3.svg)](https://www.npmjs.com/package/react-echarts-v3) [![react](https://img.shields.io/badge/react-16.x-brightgreen.svg)](https://reactjs.org/) [![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)](http://echarts.baidu.com/)\n\n\u003e [React.js](https://reactjs.org/) `v16.x+` component wrap for [ECharts.js](http://echarts.baidu.com/) `v3.x+`\n\n\n## Feature\n\n1. Lightweight, efficient, on-demand binding events;\n2. Support for importing ECharts.js charts and components on demand;\n3. Support component resize event auto update view;\n\n\n## Installation\n\n```bash\n$ npm install --save echarts react-echarts-v3\n```\n\n\n## Usage\n\n0. Change webpack config\n\n    For webpack 1.x:\n\n    ```diff\n          {\n            test: /\\.jsx?$/,\n            loader: 'babel',\n            include: [\n    -          path.join(prjRoot, 'src')\n    +          path.join(prjRoot, 'src'),\n    +          path.join(prjRoot, 'node_modules/react-echarts-v3/src')\n            ],\n    -        exclude: /node_modules/\n    +        exclude: /node_modules(?![\\\\/]react-echarts-v3[\\\\/]src[\\\\/])/\n          },\n    ```\n\n    For webpack 2.x+:\n\n    ```diff\n          {\n            test: /\\.jsx?$/,\n            loader: 'babel-loader',\n    -       include: [resolve('src'), resolve('test')]\n    +       include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')]\n          }\n    ```\n\n1. Import all charts and components\n\n    ```javascript\n    import IEcharts from 'react-echarts-v3/src/full.js';\n\n    const option = {\n      title: {\n        text: 'ECharts 入门示例'\n      },\n      tooltip: {},\n      xAxis: {\n        data: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n      },\n      yAxis: {},\n      series: [{\n        name: '销量',\n        type: 'bar',\n        data: [5, 20, 36, 10, 10, 20]\n      }]\n    };\n\n    const onEvents = {\n      'click': function(params) {\n        // the 'this' variable can get echarts instance\n        console.log(params);\n      }\n    };\n\n    return (\n      \u003cIEcharts option={option} onEvents={onEvents} /\u003e\n    );\n    ```\n\n2. Import ECharts.js modules manually to reduce bundle size\n\n    ```javascript\n    import IEcharts from 'react-echarts-v3/src/lite.js';\n\n    // Import all charts and components\n    // require('echarts/lib/chart/line');\n    require('echarts/lib/chart/bar');\n    // require('echarts/lib/chart/pie');\n    // require('echarts/lib/chart/scatter');\n    // require('echarts/lib/chart/radar');\n\n    // require('echarts/lib/chart/map');\n    // require('echarts/lib/chart/treemap');\n    // require('echarts/lib/chart/graph');\n    // require('echarts/lib/chart/gauge');\n    // require('echarts/lib/chart/funnel');\n    // require('echarts/lib/chart/parallel');\n    // require('echarts/lib/chart/sankey');\n    // require('echarts/lib/chart/boxplot');\n    // require('echarts/lib/chart/candlestick');\n    // require('echarts/lib/chart/effectScatter');\n    // require('echarts/lib/chart/lines');\n    // require('echarts/lib/chart/heatmap');\n\n    // require('echarts/lib/component/graphic');\n    // require('echarts/lib/component/grid');\n    // require('echarts/lib/component/legend');\n    // require('echarts/lib/component/tooltip');\n    // require('echarts/lib/component/polar');\n    // require('echarts/lib/component/geo');\n    // require('echarts/lib/component/parallel');\n    // require('echarts/lib/component/singleAxis');\n    // require('echarts/lib/component/brush');\n\n    // require('echarts/lib/component/title');\n\n    // require('echarts/lib/component/dataZoom');\n    // require('echarts/lib/component/visualMap');\n\n    // require('echarts/lib/component/markPoint');\n    // require('echarts/lib/component/markLine');\n    // require('echarts/lib/component/markArea');\n\n    // require('echarts/lib/component/timeline');\n    // require('echarts/lib/component/toolbox');\n\n    // require('zrender/lib/vml/vml');\n\n\n    const option = {\n      title: {\n        text: 'ECharts 入门示例'\n      },\n      tooltip: {},\n      xAxis: {\n        data: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n      },\n      yAxis: {},\n      series: [{\n        name: '销量',\n        type: 'bar',\n        data: [5, 20, 36, 10, 10, 20]\n      }]\n    };\n\n    return (\n      \u003cIEcharts option={option} /\u003e\n    );\n    ```\n\n\n## propTypes\n\n```javascript\n    className:    PropTypes.string,\n    style:        PropTypes.object,\n    group:        PropTypes.string,\n    theme:        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    initOpts:     PropTypes.object,\n    option:       PropTypes.object.isRequired,\n    notMerge:     PropTypes.bool,\n    lazyUpdate:   PropTypes.bool,\n    onReady:      PropTypes.func,\n    onResize:     PropTypes.func,\n    loading:      PropTypes.bool,\n    resizable:    PropTypes.bool,\n    optsLoading:  PropTypes.object,\n    onEvents:     PropTypes.object\n```\n\n[Read More](http://echarts.baidu.com/option.html)\n\n\n## defaultProps\n\n```javascript\n    className: 'react-echarts',\n    style: { width: '100%', height: '100%' },\n    notMerge: false,\n    lazyUpdate: false,\n    onReady: function(instance, ECharts) {},\n    onResize: function(width, height) {},\n    loading: false,\n    resizable: false,\n    optsLoading: {\n        text: 'loading',\n        color: '#c23531',\n        textColor: '#000',\n        maskColor: 'rgba(255, 255, 255, 0.8)',\n        zlevel: 0\n    },\n    onEvents: {}\n```\n\n\n## Demo\n\n[react-echarts-v3-demo](https://github.com/xlsdg/react-echarts-v3-demo)\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlsdg%2Freact-echarts-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxlsdg%2Freact-echarts-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlsdg%2Freact-echarts-v3/lists"}