{"id":22451457,"url":"https://github.com/qiuweikangdev/taro-react-echarts","last_synced_at":"2025-04-06T04:10:09.627Z","repository":{"id":47872468,"uuid":"514293590","full_name":"qiuweikangdev/taro-react-echarts","owner":"qiuweikangdev","description":"🎉  基于Taro3、React的H5和微信小程序多端图表组件 ","archived":false,"fork":false,"pushed_at":"2023-08-02T01:46:44.000Z","size":1304,"stargazers_count":209,"open_issues_count":20,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T03:08:01.548Z","etag":null,"topics":["echarts","pnpm","reactjs","taro","turborepo"],"latest_commit_sha":null,"homepage":"","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/qiuweikangdev.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":"2022-07-15T14:12:01.000Z","updated_at":"2025-03-19T05:55:49.000Z","dependencies_parsed_at":"2024-10-23T11:26:15.430Z","dependency_job_id":null,"html_url":"https://github.com/qiuweikangdev/taro-react-echarts","commit_stats":{"total_commits":68,"total_committers":2,"mean_commits":34.0,"dds":"0.014705882352941124","last_synced_commit":"b9e36d361ed3795a2277cbfe18690bfdf1939349"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiuweikangdev","download_url":"https://codeload.github.com/qiuweikangdev/taro-react-echarts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246785429,"owners_count":20833490,"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","pnpm","reactjs","taro","turborepo"],"created_at":"2024-12-06T06:08:01.189Z","updated_at":"2025-04-06T04:10:09.590Z","avatar_url":"https://github.com/qiuweikangdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# taro-react-echarts\n\n基于Taro3、React的H5和微信小程序多端图表组件\n\n- 兼容H5、微信小程序\n\n- 开箱即用，快速开发图表，满足在移动端各种可视化需求\n\n- 支持自定义构建echarts\n\n![](https://raw.githubusercontent.com/qiuweikangdev/taro-react-echarts/master/images/demo.png)\n\n# 安装\n\n```bash\nnpm install taro-react-echarts\n```\n\n# 导入组件\n\n```js\nimport Echarts from 'taro-react-echarts'\n```\n\n# 参数说明\n\n## Echarts\n\n| 参数            | 描述                                                         | 类型    | 必传 | 默认值            |\n| --------------- | ------------------------------------------------------------ | ------- | ---- | ----------------- |\n| 本身参数        | 参考[Canvas](https://taro-docs.jd.com/taro/docs/components/canvas/) 【微信小程序】 |         |      |                   |\n| `echarts`       | echarts对象，可[自定义构建](https://echarts.apache.org/zh/builder.html) | echarts | 是   |                   |\n| `option`        | 参考[setOption](https://echarts.apache.org/zh/option.html#title) | object  | 是   |                   |\n| `className`     | echarts类名                                                  | string  | 否   | `key`             |\n| `style`         | echarts样式对象                                              | object  | 否   | {height: '300px'} |\n| `className`     | echarts类名                                                  | string  | 否   |                   |\n| `theme`         | echarts 的主题                                               | string  | 否   |                   |\n| `notMerge`      | 默认为true,不跟之前设置的option合并，保证每次渲染都是最新的option | boolean | 否   | true              |\n| `lazyUpdate`    | setOption 时，延迟更新数据                                   | boolean | 否   | false             |\n| `showLoading`   | 图表渲染时，是否显示加载状态                                 | boolean | 否   |                   |\n| `loadingOption` | 参考[loading配置项](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) | object  | 否   |                   |\n| `opts`          | 参考[echarts. init](https://echarts.apache.org/zh/api.html#echarts.init) | string  | 否   |                   |\n| `onEvents`      | 绑定 echarts 事件                                            | object  | 否   |                   |\n| `isPage`        | 表示是否是顶层页面级别 【1、注意嵌套在Popup 、Dialog 、Picker等弹出层都不是页面级别，需要设置为false，否则可能会不显示 2、以及嵌套在Tabs标签页中如果出现显示不正常，可设置isPage为false, 因为都有可能不触发useReady】 | boolean | 否   | true              |\n\n## Events\n\n| 事件名            | 描述                             | 类型       | 必传  | 默认值 |\n| -------------- | ------------------------------ | -------- | --- | --- |\n| `onChartReady` | 当图表准备好时，将使用 echarts 对象作为参数回调函数 | Function | 否   |     |\n\n# 使用\n\n```js\nimport { useRef } from 'react'\nimport Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'\nimport echarts from '@/assets/js/echarts.js'\n\nexport default function Demo() {\n const echartsRef = useRef\u003cEchartsHandle\u003e(null)\n const option: EChartOption = {\n    legend: {\n      top: 50,\n      left: 'center',\n      z: 100\n    },\n    tooltip: {\n      trigger: 'axis',\n      show: true,\n      confine: true\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      {\n        data: [150, 230, 224, 218, 135, 147, 260],\n        type: 'line'\n      }\n    ]\n  }\n\n  return (\n      \u003cEcharts\n        echarts={echarts}\n        option={option}\n        ref={echartsRef}\n      \u003e\u003c/Echarts\u003e\n  );\n}\n```\n\n# 友情推荐\n\n| 项目                                                         | 描述                                             |\n| ------------------------------------------------------------ | ------------------------------------------------ |\n| [taro-react-table](https://github.com/qiuweikangdev/taro-react-table) | 基于 taro3、react 的 H5 和微信小程序多端表格组件 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuweikangdev%2Ftaro-react-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiuweikangdev%2Ftaro-react-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuweikangdev%2Ftaro-react-echarts/lists"}