Skip to content

Commit ba9fb61

Browse files
author
chj_damon
committed
feat: 新增react-native-echarts包
1 parent b780558 commit ba9fb61

File tree

12 files changed

+874
-2
lines changed

12 files changed

+874
-2
lines changed

‎.github/workflows/changeset-version.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ jobs:
3939
- name: Create Release Pull Request
4040
uses: changesets/action@v1
4141
with:
42-
publish: pnpm build && pnpm changeset publish
42+
publish: pnpm release
4343
env:
4444
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
4545
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"prettier": "prettier --write --cache --cache-strategy metadata \"**/*.{tsx,ts,md}\"",
1414
"doc:dev": "dumi dev",
1515
"doc:build": "dumi build",
16-
"changeset": "changeset"
16+
"changeset": "changeset",
17+
"release": "pnpm build && changeset publish"
1718
},
1819
"config": {
1920
"commitizen": {

‎packages/react-native-echarts/assets/android.png‎

58.8 KB
Loading

‎packages/react-native-echarts/assets/ios.png‎

64.5 KB
Loading

‎packages/react-native-echarts/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@td-design/react-native-echarts",
3+
"version": "5.3.2",
4+
"description": "封装echarts在react native项目中使用",
5+
"main": "lib/commonjs/index.js",
6+
"module": "lib/module/index.js",
7+
"types": "lib/typescript/index.d.ts",
8+
"files": [
9+
"lib"
10+
],
11+
"publishConfig": {
12+
"registry": "https://registry.npmjs.org/",
13+
"access": "public"
14+
},
15+
"scripts": {
16+
"build": "bob build",
17+
"tsc": "tsc -p ./tsconfig.json"
18+
},
19+
"keywords": [
20+
"react-native",
21+
"echarts"
22+
],
23+
"author": "thundersdata-frontend",
24+
"license": "Apache-2.0",
25+
"devDependencies": {
26+
"@types/react": "^18.0.22",
27+
"@types/react-native": "^0.70.6",
28+
"react-native-builder-bob": "^0.20.0",
29+
"react-native-webview": "^11.23.1",
30+
"typescript": "^4.8.4"
31+
},
32+
"react-native-builder-bob": {
33+
"source": "src",
34+
"output": "lib",
35+
"targets": [
36+
"commonjs",
37+
"module",
38+
[
39+
"typescript",
40+
{
41+
"project": "tsconfig.build.json"
42+
}
43+
]
44+
]
45+
}
46+
}

‎packages/react-native-echarts/readMe.md‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
# react-native-echarts
2+
3+
在 react-native 项目中使用 echarts 展示图表
4+
5+
- IOS 效果图
6+
7+
![ios](./assets/ios.png)
8+
9+
- Android 效果图
10+
11+
![android](./assets/android.png)
12+
13+
## 特点
14+
15+
**基于最新的 echarts 版本**
16+
17+
**支持开启 hermes**
18+
19+
## 使用
20+
21+
```code
22+
yarn add react-native-webview @td-design/react-native-echarts
23+
```
24+
25+
## 示例
26+
27+
### 1. 获取数据后显示图表
28+
29+
```jsx
30+
import React, { FC, useEffect, useRef } from 'react';
31+
import { View } from 'react-native';
32+
import Echarts, { EchartsHandler } from '@td-design/react-native-echarts';
33+
34+
export default () => {
35+
const chart = useRef<EchartsHandler>(null);
36+
37+
// setOption after data fetch
38+
useEffect(() => {
39+
fetch(xxx).then(data => {
40+
chart.current?.setOption({
41+
tooltip: {
42+
trigger: 'axis',
43+
formatter: `function (params) {
44+
if (Array.isArray(params)) {
45+
return params[0].name;
46+
}
47+
return params.name;
48+
}`,
49+
},
50+
xAxis: {
51+
type: 'category',
52+
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
53+
data: data.xAxis,
54+
},
55+
yAxis: {
56+
type: 'value',
57+
},
58+
series: [
59+
{
60+
// data: [150, 230, 224, 218, 135, 147, 260],
61+
data: data.seriesData,
62+
type: 'line',
63+
},
64+
],
65+
});
66+
})
67+
}, []);
68+
69+
return (
70+
<View style={{ flex: 1 }}>
71+
<Echarts ref={chart}>
72+
</View>
73+
);
74+
}
75+
```
76+
77+
### 2. 修改图表
78+
79+
```jsx
80+
import React, { FC, useEffect, useRef } from 'react';
81+
import { View, Button } from 'react-native';
82+
import Echarts, { EchartsHandler } from '@td-design/react-native-echarts';
83+
84+
export default () => {
85+
const chart = useRef<EchartsHandler>(null);
86+
87+
// setOption after data fetch
88+
useEffect(() => {
89+
fetch(xxx).then(data => {
90+
chart.current?.setOption({
91+
tooltip: {
92+
trigger: 'axis',
93+
formatter: `function (params) {
94+
if (Array.isArray(params)) {
95+
return params[0].name;
96+
}
97+
return params.name;
98+
}`,
99+
},
100+
xAxis: {
101+
type: 'category',
102+
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
103+
data: data.xAxis,
104+
},
105+
yAxis: {
106+
type: 'value',
107+
},
108+
series: [
109+
{
110+
// data: [150, 230, 224, 218, 135, 147, 260],
111+
data: data.seriesData,
112+
type: 'line',
113+
},
114+
],
115+
});
116+
})
117+
}, []);
118+
119+
// modify chart option
120+
const modifyOptions = () => {
121+
chart.current?.setOption({
122+
tooltip: {
123+
trigger: 'axis',
124+
formatter: `function (params) {
125+
if (Array.isArray(params)) {
126+
return params[0].name + ": " + params[0].data;
127+
}
128+
return params.name + ": " + params.data;
129+
}`,
130+
},
131+
xAxis: {
132+
type: 'category',
133+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
134+
},
135+
yAxis: {
136+
type: 'value',
137+
},
138+
series: [
139+
{
140+
data: [82, 93, 90, 93, 129, 46, 66],
141+
type: 'line',
142+
},
143+
],
144+
});
145+
};
146+
147+
return (
148+
<View style={{ flex: 1 }}>
149+
<Echarts ref={chart}>
150+
<Button title="modify chart" onPress={modifyOptions} />
151+
</View>
152+
);
153+
}
154+
```
155+
156+
### 3. 清除图表
157+
158+
```jsx
159+
import React, { FC, useEffect, useRef } from 'react';
160+
import { View, Button } from 'react-native';
161+
import Echarts, { EchartsHandler } from '@td-design/react-native-echarts';
162+
163+
export default () => {
164+
const chart = useRef<EchartsHandler>(null);
165+
166+
// setOption after data fetch
167+
useEffect(() => {
168+
fetch(xxx).then(data => {
169+
chart.current?.setOption({
170+
tooltip: {
171+
trigger: 'axis',
172+
formatter: `function (params) {
173+
if (Array.isArray(params)) {
174+
return params[0].name;
175+
}
176+
return params.name;
177+
}`,
178+
},
179+
xAxis: {
180+
type: 'category',
181+
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
182+
data: data.xAxis,
183+
},
184+
yAxis: {
185+
type: 'value',
186+
},
187+
series: [
188+
{
189+
// data: [150, 230, 224, 218, 135, 147, 260],
190+
data: data.seriesData,
191+
type: 'line',
192+
},
193+
],
194+
});
195+
})
196+
}, []);
197+
198+
// clear chart
199+
const clearChart = () => {
200+
chart.current?.clear();
201+
};
202+
203+
return (
204+
<View style={{ flex: 1 }}>
205+
<Echarts ref={chart}>
206+
<Button title="clear chart" onPress={clearChart} />
207+
</View>
208+
);
209+
}
210+
```
211+
212+
## 属性
213+
214+
| 属性 | 必填 | 说明 | 类型 | 默认值 |
215+
| --------------- | ------- | -------------- | -------- | -------- |
216+
| width | `false` | 图表宽度 | `number` | 屏幕宽度 |
217+
| height | `false` | 图表高度 | `number` | `300` |
218+
| backgroundColor | `false` | 图表背景色 | `string` | `#fff` |
219+
| extraCode | `false` | 额外注入的代码 | `string` | `` |
220+
221+
## 方法
222+
223+
| 方法 | 说明 |
224+
| -------------------- | -------------- |
225+
| `setBackgroundColor` | 修改背景色 |
226+
| `getOption` | 获取图表配置项 |
227+
| `setOption` | 修改图表配置项 |
228+
| `clear` | 清除图表 |
229+
230+
## Q&A
231+
232+
- Q: 安卓上无法显示图表
233+
- A: 安卓上需要把`node_modules/@td-design/react-native-echarts/lib/commonjs/tmp/tpl.html` 文件复制到`android/app/src/main/assets/`目录下。

0 commit comments

Comments
 (0)