{"id":27057551,"url":"https://github.com/cecilxx/echarts-taro3-react","last_synced_at":"2025-04-05T11:28:20.974Z","repository":{"id":44424372,"uuid":"294746973","full_name":"Cecilxx/echarts-taro3-react","owner":"Cecilxx","description":"taro3.x-react构建的微信小程序echarts组件，及使用示列","archived":false,"fork":false,"pushed_at":"2025-03-04T05:55:29.000Z","size":2110,"stargazers_count":90,"open_issues_count":30,"forks_count":29,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T07:15:53.173Z","etag":null,"topics":["echarts","react","taro","taro3","weapp"],"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/Cecilxx.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}},"created_at":"2020-09-11T16:32:56.000Z","updated_at":"2025-03-19T04:38:39.000Z","dependencies_parsed_at":"2023-02-03T14:31:33.597Z","dependency_job_id":null,"html_url":"https://github.com/Cecilxx/echarts-taro3-react","commit_stats":null,"previous_names":["cecilxx/mini-echarts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cecilxx%2Fecharts-taro3-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cecilxx%2Fecharts-taro3-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cecilxx%2Fecharts-taro3-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cecilxx%2Fecharts-taro3-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cecilxx","download_url":"https://codeload.github.com/Cecilxx/echarts-taro3-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247328530,"owners_count":20921202,"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","react","taro","taro3","weapp"],"created_at":"2025-04-05T11:28:20.466Z","updated_at":"2025-04-05T11:28:20.945Z","avatar_url":"https://github.com/Cecilxx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# echarts-taro3-react\n\n\n基于Taro3.x-React框架构建的微信小程序版本echarts组件，及使用示例\n\n--------\n\n## 代码体积过大解决方案：\n* 使用分包，[参考微信官文档](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html)\n* 自定义`echart.js`，自行前往[echart官网](https://echarts.apache.org/zh/builder.html)\u003cstrong\u003e（注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行压缩）\u003c/strong\u003e 按需构建`echart.js`，然后替换掉`echarts-taro3-react/lib/ec-canvas/echart.js`\n\n## 版本日志：\n1.0.11：\n* 新增datazoom功能\n\n1.0.10：\n* 压缩了echarts.js, 代码大小从2.2m下降至543kb\n* 修复了更新数据不能刷新的问题\n\n## 传送门\n+ [Taro3.x-Vue版本](https://github.com/Cecilxx/echarts-taro3-vue)\n\n## 特性\n+ Taro3.x\n+ React\n+ Typescript\n\n## 功能\n+ [x] 柱状图\n+ [x] 折线图\n+ [x] 饼图\n+ [x] 散点图\n+ [x] 雷达图\n+ [x] 热力图\n+ [x] 地图\n+ [x] 仪表盘\n+ [x] 漏斗图\n\n## 快速安装\n```bash\nnpm i echarts-taro3-react\n```\n## 使用\n\n\u003e 引入EChart组件后，拿到EChart组件实例，并调用实例\u003cb style=\"color: red\"\u003erefresh(option)\u003c/b\u003e方法设置图标数据，\u003cb style=\"color: red\"\u003eoption\u003c/b\u003e 格式参照[echarts官网](https://echarts.apache.org/examples/zh/index.html)\n\n举例：\n\n```js\n// 柱状图\nimport React, { Component } from \"react\";\nimport { View } from \"@tarojs/components\";\nimport { EChart } from \"echarts-taro3-react\";\nimport \"./index.less\";\n\nexport default class Bar extends Component {\n  componentDidMount() {\n    const defautOption = {\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: [120, 200, 150, 80, 70, 110, 130],\n          type: \"bar\",\n          showBackground: true,\n          backgroundStyle: {\n            color: \"rgba(220, 220, 220, 0.8)\",\n          },\n        },\n      ],\n    };\n    this.barChart.refresh(defautOption);\n  }\n\n  barChart: any;\n\n  refBarChart = (node) =\u003e (this.barChart = node);\n\n  render() {\n    return (\n      \u003cView className='bar-chart'\u003e\n        \u003cEChart ref={this.refBarChart} canvasId='bar-canvas' /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n```js\n// 仪表盘\nimport React, { Component } from \"react\";\nimport { View } from \"@tarojs/components\";\nimport { EChart } from \"../../echarts-taro3-react\";\nimport \"./index.less\";\n\nexport default class Gauge extends Component {\n  componentDidMount() {\n    const option = {\n      tooltip: {\n        formatter: \"{a} \u003cbr/\u003e{b} : {c}%\",\n      },\n      toolbox: {\n        feature: {\n          restore: {},\n          saveAsImage: {},\n        },\n      },\n      series: [\n        {\n          name: \"业务指标\",\n          type: \"gauge\",\n          detail: { formatter: \"{value}%\" },\n          data: [{ value: 50, name: \"完成率\" }],\n        },\n      ],\n    };\n    this.gaugeChart.refresh(option);\n  }\n\n  gaugeChart: any;\n\n  refGaugeChart = (node) =\u003e (this.gaugeChart = node);\n\n  render() {\n    return (\n      \u003cView className='gauge-chart'\u003e\n        \u003cEChart ref={this.refGaugeChart} canvasId='gauge-chart' /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n```js\n// 一个页面多个图表（canvasId必传）\nimport React, { Component } from \"react\";\nimport { View } from \"@tarojs/components\";\nimport { EChart } from \"echarts-taro3-react\";\nimport \"./index.less\";\n\nexport default class Bar extends Component {\n  componentDidMount() {\n    const barOption = {\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: [120, 200, 150, 80, 70, 110, 130],\n          type: \"bar\",\n          showBackground: true,\n          backgroundStyle: {\n            color: \"rgba(220, 220, 220, 0.8)\",\n          },\n        },\n      ],\n    };\n    const funnelOption = {\n      title: {\n        text: \"漏斗图\",\n        subtext: \"纯属虚构\",\n      },\n      tooltip: {\n        trigger: \"item\",\n        formatter: \"{a} \u003cbr/\u003e{b} : {c}%\",\n      },\n      toolbox: {\n        feature: {\n          dataView: { readOnly: false },\n          restore: {},\n          saveAsImage: {},\n        },\n      },\n      legend: {\n        data: [\"展现\", \"点击\", \"访问\", \"咨询\", \"订单\"],\n      },\n\n      series: [\n        {\n          name: \"漏斗图\",\n          type: \"funnel\",\n          left: \"10%\",\n          top: 60,\n          //x2: 80,\n          bottom: 60,\n          width: \"80%\",\n          // height: {totalHeight} - y - y2,\n          min: 0,\n          max: 100,\n          minSize: \"0%\",\n          maxSize: \"100%\",\n          sort: \"descending\",\n          gap: 2,\n          label: {\n            show: true,\n            position: \"inside\",\n          },\n          labelLine: {\n            length: 10,\n            lineStyle: {\n              width: 1,\n              type: \"solid\",\n            },\n          },\n          itemStyle: {\n            borderColor: \"#fff\",\n            borderWidth: 1,\n          },\n          emphasis: {\n            label: {\n              fontSize: 20,\n            },\n          },\n          data: [\n            { value: 60, name: \"访问\" },\n            { value: 40, name: \"咨询\" },\n            { value: 20, name: \"订单\" },\n            { value: 80, name: \"点击\" },\n            { value: 100, name: \"展现\" },\n          ],\n        },\n      ],\n    };\n\n    this.funnelChart.refresh(funnelOption);\n    this.barChart.refresh(barOption);\n  }\n\n  barChart: any;\n  funnelChart: any;\n\n  refFunnelChart = (node) =\u003e (this.funnelChart = node);\n  refBarChart = (node) =\u003e (this.barChart = node);\n\n  render() {\n    return (\n      \u003cView className='more-chart'\u003e\n        \u003cView className='bar-chart-wrap'\u003e\u003cEChart ref={this.refBarChart} canvasId='bar-canvas' /\u003e\u003c/View\u003e\n        \u003cView className='funnel-chart-wrap'\u003e\u003cEChart ref={this.refFunnelChart} canvasId='funnel-chart' /\u003e\u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\n```\n\n## 开发\n```bash\nnpm run dev:weapp\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcecilxx%2Fecharts-taro3-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcecilxx%2Fecharts-taro3-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcecilxx%2Fecharts-taro3-react/lists"}