[0]) {
20 | if (!node) {
21 | return node;
22 | }
23 | if (!Array.isArray(node)) {
24 | return node;
25 | }
26 | const [name, value, children] = node;
27 | return {
28 | name,
29 | value,
30 | children: children && children.map(transformData),
31 | };
32 | }
33 |
34 | function getSeriesOption(): TreemapSeriesOption {
35 | const { data, ...rest } = props;
36 |
37 | return _merge(
38 | {
39 | type: 'treemap',
40 | data: data?.map(transformData),
41 | itemStyle: {
42 | areaColor: '#BEDBED',
43 | borderColor: '#ffffff',
44 | borderWidth: 1,
45 | },
46 | visibleMin: 300,
47 | leafDepth: 1,
48 | drillDownIcon: null,
49 | label: {
50 | position: 'insideTopLeft',
51 | color: '#ffffff',
52 | fontSize: 12,
53 | lineHeight: 17,
54 | formatter({ name, value }) {
55 | return `{a|${name}\n${value}}`;
56 | },
57 | rich: {
58 | a: {
59 | color: '#ffffff',
60 | fontSize: 12,
61 | lineHeight: 17,
62 | },
63 | },
64 | },
65 | levels: [
66 | {
67 | itemStyle: {
68 | borderColor: '#fff',
69 | borderWidth: 1,
70 | gapWidth: 1,
71 | },
72 | },
73 | ],
74 | },
75 | rest
76 | );
77 | }
78 |
79 | if (!option.series) {
80 | option.series = [];
81 | }
82 |
83 | (option.series as TreemapSeriesOption[]).push(getSeriesOption());
84 | };
85 | if (process.env.NODE_ENV !== 'production') {
86 | Treemap.displayName = 'Treemap';
87 | }
88 |
89 | export default Treemap;
90 |
--------------------------------------------------------------------------------
/packages/charts/src/svgr.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg' {
2 | import * as React from 'react';
3 |
4 | export const ReactComponent: React.FunctionComponent<
5 | React.ComponentProps<'svg'> & { title?: string }
6 | >;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/charts/src/types.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { EChartsOption } from 'echarts';
3 |
4 | export type AxisLabelFormatter = (value: string | number) => string;
5 |
6 | export type OptionComponent = React.ComponentType
& {
7 | tapEChartsOption(
8 | option: EChartsOption,
9 | props: P,
10 | context: {
11 | [key: string]: unknown;
12 | series: React.ReactElement[];
13 | }
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/packages/charts/src/utils.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _merge from 'lodash.merge';
3 | import _omit from 'lodash.omit';
4 | import flattenChildren from 'react-keyed-flatten-children';
5 | import type { DatasetComponentOption, EChartsOption, SeriesOption } from 'echarts';
6 | import * as echarts from 'echarts/core';
7 | import { TitleComponent } from 'echarts/components';
8 | import { symbols } from './constants';
9 | import { ChartComponentProps } from './ECharts';
10 | import type { OptionComponent } from './types';
11 |
12 | echarts.use([TitleComponent]);
13 |
14 | export function is(element: React.ReactElement, name: string): boolean {
15 | return element.type[symbols.typeKey] === Symbol.for(`$$${name}`);
16 | }
17 |
18 | export function isSeries(element: React.ReactElement) {
19 | return (symbols as any).series.includes(element.type[symbols.typeKey]);
20 | }
21 |
22 | export function transformTextOption(option: any, defaultOption?: any) {
23 | if (option === undefined || option === true) {
24 | return defaultOption;
25 | }
26 | if (option === false) {
27 | return { show: false };
28 | }
29 | if (typeof option === 'function') {
30 | return {
31 | ...defaultOption,
32 | show: true,
33 | formatter: option,
34 | };
35 | }
36 | if (typeof option === 'object') {
37 | return _merge(
38 | {
39 | ...defaultOption,
40 | show: true,
41 | },
42 | option
43 | );
44 | }
45 | return {
46 | ...defaultOption,
47 | show: true,
48 | formatter() {
49 | return option;
50 | },
51 | };
52 | }
53 |
54 | export function randstr(length = 16) {
55 | let text = '';
56 | const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
57 |
58 | for (let i = 0; i < length; i += 1) {
59 | text += possible.charAt(Math.floor(Math.random() * possible.length));
60 | }
61 |
62 | return text;
63 | }
64 |
65 | export function excludeEchartsProps(props: ChartComponentProps) {
66 | return _omit(props, ['option', 'locale', 'height', 'loading']);
67 | }
68 |
69 | export function createEChartsOptionFromChildren(
70 | children: React.ReactNode,
71 | _: Record
72 | ): EChartsOption {
73 | const option = {};
74 |
75 | const validChildren = flattenChildren(children).filter((child) =>
76 | React.isValidElement(child)
77 | ) as React.ReactElement[];
78 |
79 | const series = validChildren.filter((child) => {
80 | return (symbols as any).series.includes(child.type[symbols.typeKey]);
81 | });
82 |
83 | const context = {
84 | ..._,
85 | series,
86 | };
87 |
88 | validChildren.forEach((child) => {
89 | // 处理 child 的 props
90 | // 根据 child 的 type 上的 symbol
91 | (child.type as OptionComponent).tapEChartsOption?.(
92 | option,
93 | excludeEchartsProps(child.props),
94 | context
95 | );
96 | });
97 |
98 | return option;
99 | }
100 |
101 | /**
102 | * 判断 option 是否没有数据，
103 | * 用于显示数据为空的 placeholder
104 | */
105 | export function isDataEmpty(option: EChartsOption) {
106 | if (option.dataset) {
107 | return isDatasetEmpty(option.dataset as DatasetComponentOption);
108 | }
109 |
110 | return isSeriesEmpty(option.series);
111 | }
112 |
113 | /**
114 | * 进入此方法时一定存在 option.dataset
115 | */
116 | function isDatasetEmpty(dataset: DatasetComponentOption) {
117 | if (!dataset.source) {
118 | return true;
119 | }
120 |
121 | if (Array.isArray(dataset.source)) {
122 | return dataset.source.length < 1;
123 | }
124 |
125 | return Object.getOwnPropertyNames(dataset.source).length < 1;
126 | }
127 |
128 | function isSeriesEmpty(series: EChartsOption['series']) {
129 | return (
130 | !series ||
131 | (series as SeriesOption[]).every((serie) => {
132 | if (serie.type === 'sankey') {
133 | return (!serie.nodes || serie.nodes.length < 1) && (!serie.data || serie.data.length < 1);
134 | }
135 |
136 | return !serie.data || (serie.data as unknown[]).length < 1;
137 | })
138 | );
139 | }
140 |
--------------------------------------------------------------------------------
/packages/charts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/charts/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup';
2 | import svgrPlugin from 'esbuild-plugin-svgr';
3 |
4 | export default defineConfig({
5 | format: ['cjs', 'esm'],
6 | clean: true,
7 | dts: true,
8 | legacyOutput: true,
9 | esbuildPlugins: [
10 | svgrPlugin({
11 | exportType: 'named',
12 | }),
13 | ],
14 | });
15 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/.gitignore:
--------------------------------------------------------------------------------
1 | dist
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # echarts-theme-rsuite
2 |
3 | ## 1.0.0
4 |
5 | ### Major Changes
6 |
7 | - d247c45: Separate echarts-theme-rsuite as a standalone package
8 |
9 | ## 0.0.0-beta.0
10 |
11 | ### Major Changes
12 |
13 | - d247c45: Separate echarts-theme-rsuite as a standalone package
14 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/README.md:
--------------------------------------------------------------------------------
1 | # `echarts-theme-rsuite`
2 |
3 | React Suite theme for ECharts.
4 |
5 | npm i echarts-theme-rsuite
6 |
7 | ## Usage
8 |
9 | ```js
10 | import * as echarts from 'echarts';
11 | import * as themes from 'echarts-theme-rsuite';
12 |
13 | echarts.registerTheme('rsuite_light', themes.light);
14 | ```
15 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "echarts-theme-rsuite",
3 | "version": "1.0.0",
4 | "description": "React Suite theme for ECharts",
5 | "files": [
6 | "dist"
7 | ],
8 | "main": "./dist/index.js",
9 | "module": "./dist/esm/index.js",
10 | "exports": {
11 | "require": "./dist/index.js",
12 | "import": "./dist/esm/index.js"
13 | },
14 | "types": "./dist/index.d.ts",
15 | "scripts": {
16 | "build": "tsup src/index.ts --clean --format cjs,esm --legacy-output --dts",
17 | "test": "echo \"Error: no test specified\" && exit 1"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "git+https://github.com/rsuite/charts.git",
22 | "directory": "packages/echarts-theme-rsuite"
23 | },
24 | "author": "Doma ",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/rsuite/charts/issues"
28 | },
29 | "homepage": "https://github.com/rsuite/charts#readme",
30 | "dependencies": {
31 | "lodash.merge": "^4.6.2"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/src/index.ts:
--------------------------------------------------------------------------------
1 | import light from './rsuite_light';
2 | import dark from './rsuite_dark';
3 |
4 | export { light, dark };
5 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/src/rsuite_dark.project.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 1,
3 | "themeName": "rsuite_dark",
4 | "theme": {
5 | "seriesCnt": "7",
6 | "backgroundColor": "#1a1d24",
7 | "titleColor": "#ffffff",
8 | "subtitleColor": "#aaaaaa",
9 | "textColorShow": false,
10 | "textColor": "#333",
11 | "markTextColor": "#eeeeee",
12 | "color": [
13 | "#34c3ff",
14 | "#a873e6",
15 | "#13ba9e",
16 | "#ee5765",
17 | "#f5a623",
18 | "#2575fc",
19 | "#df6ecd",
20 | "#8338ec",
21 | "#e6b980",
22 | "#51E8FF"
23 | ],
24 | "borderColor": "#cccccc",
25 | "borderWidth": 0,
26 | "visualMapColor": ["#c2edff", "#009de6"],
27 | "legendTextColor": "#8e8e93",
28 | "kColor": "#e01f54",
29 | "kColor0": "#001852",
30 | "kBorderColor": "#f5e8c8",
31 | "kBorderColor0": "#b8d2c7",
32 | "kBorderWidth": 1,
33 | "lineWidth": 2,
34 | "symbolSize": "0",
35 | "symbol": "circle",
36 | "symbolBorderWidth": "0",
37 | "lineSmooth": false,
38 | "graphLineWidth": 1,
39 | "graphLineColor": "#aaaaaa",
40 | "mapLabelColor": "#000000",
41 | "mapLabelColorE": "rgb(100,0,0)",
42 | "mapBorderColor": "#444444",
43 | "mapBorderColorE": "#444444",
44 | "mapBorderWidth": 0.5,
45 | "mapBorderWidthE": 1,
46 | "mapAreaColor": "#eeeeee",
47 | "mapAreaColorE": "rgba(255,215,0,0.8)",
48 | "axes": [
49 | {
50 | "type": "all",
51 | "name": "通用坐标轴",
52 | "axisLineShow": true,
53 | "axisLineColor": "#e5e5ea",
54 | "axisTickShow": false,
55 | "axisTickColor": "#333",
56 | "axisLabelShow": true,
57 | "axisLabelColor": "#575757",
58 | "splitLineShow": true,
59 | "splitLineColor": ["#e5e5ea"],
60 | "splitAreaShow": false,
61 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
62 | },
63 | {
64 | "type": "category",
65 | "name": "类目坐标轴",
66 | "axisLineShow": true,
67 | "axisLineColor": "#3c3f43",
68 | "axisTickShow": false,
69 | "axisTickColor": "#333",
70 | "axisLabelShow": true,
71 | "axisLabelColor": "#e9ebf0",
72 | "splitLineShow": false,
73 | "splitLineColor": ["#e5e5ea"],
74 | "splitAreaShow": false,
75 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
76 | },
77 | {
78 | "type": "value",
79 | "name": "数值坐标轴",
80 | "axisLineShow": false,
81 | "axisLineColor": "#e5e5ea",
82 | "axisTickShow": false,
83 | "axisTickColor": "#8e8e93",
84 | "axisLabelShow": true,
85 | "axisLabelColor": "#e9ebf0",
86 | "splitLineShow": true,
87 | "splitLineColor": ["#3c3f43"],
88 | "splitAreaShow": false,
89 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
90 | },
91 | {
92 | "type": "log",
93 | "name": "对数坐标轴",
94 | "axisLineShow": true,
95 | "axisLineColor": "#3c3f43",
96 | "axisTickShow": true,
97 | "axisTickColor": "#333",
98 | "axisLabelShow": true,
99 | "axisLabelColor": "#e9ebf0",
100 | "splitLineShow": true,
101 | "splitLineColor": ["#3c3f43"],
102 | "splitAreaShow": false,
103 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
104 | },
105 | {
106 | "type": "time",
107 | "name": "时间坐标轴",
108 | "axisLineShow": true,
109 | "axisLineColor": "#3c3f43",
110 | "axisTickShow": true,
111 | "axisTickColor": "#333",
112 | "axisLabelShow": true,
113 | "axisLabelColor": "#e9ebf0",
114 | "splitLineShow": true,
115 | "splitLineColor": ["#3c3f43"],
116 | "splitAreaShow": false,
117 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
118 | }
119 | ],
120 | "axisSeperateSetting": true,
121 | "toolboxColor": "#999999",
122 | "toolboxEmpasisColor": "#666666",
123 | "tooltipAxisColor": "#cccccc",
124 | "tooltipAxisWidth": 1,
125 | "timelineLineColor": "#293c55",
126 | "timelineLineWidth": 1,
127 | "timelineItemColor": "#293c55",
128 | "timelineItemColorE": "#a9334c",
129 | "timelineCheckColor": "#e43c59",
130 | "timelineCheckBorderColor": "#c23531",
131 | "timelineItemBorderWidth": 1,
132 | "timelineControlColor": "#293c55",
133 | "timelineControlBorderColor": "#293c55",
134 | "timelineControlBorderWidth": 0.5,
135 | "timelineLabelColor": "#293c55",
136 | "datazoomBackgroundColor": "rgba(47,69,84,0)",
137 | "datazoomDataColor": "rgba(47,69,84,0.3)",
138 | "datazoomFillColor": "rgba(167,183,204,0.4)",
139 | "datazoomHandleColor": "#a7b7cc",
140 | "datazoomHandleWidth": "100",
141 | "datazoomLabelColor": "#333333"
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/src/rsuite_dark.ts:
--------------------------------------------------------------------------------
1 | import _merge from 'lodash.merge';
2 |
3 | /**
4 | * DO NOT directly edit this theme object
5 | * If you need to edit the rsuite_dark theme, follow these steps:
6 | *
7 | * 1. Visit https://echarts.apache.org/zh/theme-builder.html
8 | * 2. Import rsuite_dark.project.json to the theme builder
9 | * 3. Make changes in the theme builder GUI
10 | * 4. Download (not export) the edited theme
11 | * 5. Replace the theme object with the latest theme JSON
12 | * 6. Export the edited theme and update rsuite_dark.project.json
13 | */
14 | const theme = {
15 | color: [
16 | '#34c3ff',
17 | '#a873e6',
18 | '#13ba9e',
19 | '#ee5765',
20 | '#f5a623',
21 | '#2575fc',
22 | '#df6ecd',
23 | '#8338ec',
24 | '#e6b980',
25 | '#51E8FF',
26 | ],
27 | backgroundColor: '#1a1d24',
28 | textStyle: {},
29 | title: {
30 | textStyle: {
31 | color: '#ffffff',
32 | },
33 | subtextStyle: {
34 | color: '#aaaaaa',
35 | },
36 | },
37 | line: {
38 | itemStyle: {
39 | borderWidth: '0',
40 | },
41 | lineStyle: {
42 | width: 2,
43 | },
44 | symbolSize: '0',
45 | symbol: 'circle',
46 | smooth: false,
47 | },
48 | radar: {
49 | itemStyle: {
50 | borderWidth: '0',
51 | },
52 | lineStyle: {
53 | width: 2,
54 | },
55 | symbolSize: '0',
56 | symbol: 'circle',
57 | smooth: false,
58 | },
59 | bar: {
60 | itemStyle: {
61 | barBorderWidth: 0,
62 | barBorderColor: '#cccccc',
63 | },
64 | },
65 | pie: {
66 | itemStyle: {
67 | borderWidth: 0,
68 | borderColor: '#cccccc',
69 | },
70 | },
71 | scatter: {
72 | itemStyle: {
73 | borderWidth: 0,
74 | borderColor: '#cccccc',
75 | },
76 | },
77 | boxplot: {
78 | itemStyle: {
79 | borderWidth: 0,
80 | borderColor: '#cccccc',
81 | },
82 | },
83 | parallel: {
84 | itemStyle: {
85 | borderWidth: 0,
86 | borderColor: '#cccccc',
87 | },
88 | },
89 | sankey: {
90 | itemStyle: {
91 | borderWidth: 0,
92 | borderColor: '#cccccc',
93 | },
94 | },
95 | funnel: {
96 | itemStyle: {
97 | borderWidth: 0,
98 | borderColor: '#cccccc',
99 | },
100 | },
101 | gauge: {
102 | itemStyle: {
103 | borderWidth: 0,
104 | borderColor: '#cccccc',
105 | },
106 | },
107 | candlestick: {
108 | itemStyle: {
109 | color: '#e01f54',
110 | color0: '#001852',
111 | borderColor: '#f5e8c8',
112 | borderColor0: '#b8d2c7',
113 | borderWidth: 1,
114 | },
115 | },
116 | graph: {
117 | itemStyle: {
118 | borderWidth: 0,
119 | borderColor: '#cccccc',
120 | },
121 | lineStyle: {
122 | width: 1,
123 | color: '#aaaaaa',
124 | },
125 | symbolSize: '0',
126 | symbol: 'circle',
127 | smooth: false,
128 | color: [
129 | '#34c3ff',
130 | '#a873e6',
131 | '#13ba9e',
132 | '#ee5765',
133 | '#f5a623',
134 | '#2575fc',
135 | '#df6ecd',
136 | '#8338ec',
137 | '#e6b980',
138 | '#51E8FF',
139 | ],
140 | label: {
141 | color: '#e9ebf0',
142 | },
143 | },
144 | map: {
145 | itemStyle: {
146 | areaColor: '#eeeeee',
147 | borderColor: '#444444',
148 | borderWidth: 0.5,
149 | },
150 | label: {
151 | color: '#000000',
152 | },
153 | emphasis: {
154 | itemStyle: {
155 | areaColor: 'rgba(255,215,0,0.8)',
156 | borderColor: '#444444',
157 | borderWidth: 1,
158 | },
159 | label: {
160 | color: 'rgb(100,0,0)',
161 | },
162 | },
163 | },
164 | geo: {
165 | itemStyle: {
166 | areaColor: '#eeeeee',
167 | borderColor: '#444444',
168 | borderWidth: 0.5,
169 | },
170 | label: {
171 | color: '#000000',
172 | },
173 | emphasis: {
174 | itemStyle: {
175 | areaColor: 'rgba(255,215,0,0.8)',
176 | borderColor: '#444444',
177 | borderWidth: 1,
178 | },
179 | label: {
180 | color: 'rgb(100,0,0)',
181 | },
182 | },
183 | },
184 | categoryAxis: {
185 | axisLine: {
186 | show: true,
187 | lineStyle: {
188 | color: '#3c3f43',
189 | },
190 | },
191 | axisTick: {
192 | show: false,
193 | lineStyle: {
194 | color: '#333',
195 | },
196 | },
197 | axisLabel: {
198 | show: true,
199 | color: '#e9ebf0',
200 | },
201 | splitLine: {
202 | show: false,
203 | lineStyle: {
204 | color: ['#e5e5ea'],
205 | },
206 | },
207 | splitArea: {
208 | show: false,
209 | areaStyle: {
210 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
211 | },
212 | },
213 | },
214 | valueAxis: {
215 | axisLine: {
216 | show: false,
217 | lineStyle: {
218 | color: '#e5e5ea',
219 | },
220 | },
221 | axisTick: {
222 | show: false,
223 | lineStyle: {
224 | color: '#8e8e93',
225 | },
226 | },
227 | axisLabel: {
228 | show: true,
229 | color: '#e9ebf0',
230 | },
231 | splitLine: {
232 | show: true,
233 | lineStyle: {
234 | color: ['#3c3f43'],
235 | },
236 | },
237 | splitArea: {
238 | show: false,
239 | areaStyle: {
240 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
241 | },
242 | },
243 | },
244 | logAxis: {
245 | axisLine: {
246 | show: true,
247 | lineStyle: {
248 | color: '#3c3f43',
249 | },
250 | },
251 | axisTick: {
252 | show: true,
253 | lineStyle: {
254 | color: '#333',
255 | },
256 | },
257 | axisLabel: {
258 | show: true,
259 | color: '#e9ebf0',
260 | },
261 | splitLine: {
262 | show: true,
263 | lineStyle: {
264 | color: ['#3c3f43'],
265 | },
266 | },
267 | splitArea: {
268 | show: false,
269 | areaStyle: {
270 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
271 | },
272 | },
273 | },
274 | timeAxis: {
275 | axisLine: {
276 | show: true,
277 | lineStyle: {
278 | color: '#3c3f43',
279 | },
280 | },
281 | axisTick: {
282 | show: true,
283 | lineStyle: {
284 | color: '#333',
285 | },
286 | },
287 | axisLabel: {
288 | show: true,
289 | color: '#e9ebf0',
290 | },
291 | splitLine: {
292 | show: true,
293 | lineStyle: {
294 | color: ['#3c3f43'],
295 | },
296 | },
297 | splitArea: {
298 | show: false,
299 | areaStyle: {
300 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
301 | },
302 | },
303 | },
304 | toolbox: {
305 | iconStyle: {
306 | borderColor: '#999999',
307 | },
308 | emphasis: {
309 | iconStyle: {},
310 | },
311 | },
312 | legend: {
313 | textStyle: {
314 | color: '#8e8e93',
315 | },
316 | },
317 | tooltip: {
318 | axisPointer: {
319 | lineStyle: {
320 | color: '#cccccc',
321 | width: 1,
322 | },
323 | crossStyle: {
324 | color: '#cccccc',
325 | width: 1,
326 | },
327 | },
328 | },
329 | timeline: {
330 | lineStyle: {
331 | color: '#293c55',
332 | width: 1,
333 | },
334 | itemStyle: {
335 | color: '#293c55',
336 | borderWidth: 1,
337 | },
338 | controlStyle: {
339 | color: '#293c55',
340 | borderColor: '#293c55',
341 | borderWidth: 0.5,
342 | },
343 | checkpointStyle: {
344 | color: '#e43c59',
345 | borderColor: '#c23531',
346 | },
347 | label: {
348 | color: '#293c55',
349 | },
350 | emphasis: {
351 | itemStyle: {
352 | color: '#a9334c',
353 | },
354 | controlStyle: {
355 | color: '#293c55',
356 | borderColor: '#293c55',
357 | borderWidth: 0.5,
358 | },
359 | label: {
360 | color: '#293c55',
361 | },
362 | },
363 | },
364 | visualMap: {
365 | color: ['#c2edff', '#009de6'],
366 | },
367 | dataZoom: {
368 | backgroundColor: 'rgba(47,69,84,0)',
369 | dataBackgroundColor: 'rgba(47,69,84,0.3)',
370 | fillerColor: 'rgba(167,183,204,0.4)',
371 | handleColor: '#a7b7cc',
372 | handleSize: '100%',
373 | textStyle: {
374 | color: '#333333',
375 | },
376 | },
377 | markPoint: {
378 | label: {
379 | color: '#e9ebf0',
380 | },
381 | emphasis: {
382 | label: {
383 | color: '#e9ebf0',
384 | },
385 | },
386 | },
387 | };
388 |
389 | /**
390 | * Theme properties that are not supported by the theme builder GUI
391 | */
392 | const additionalSettings = {
393 | textStyle: {
394 | color: '#e9ebf0',
395 | },
396 | legend: {
397 | textStyle: {
398 | fontSize: 14,
399 | },
400 | },
401 | };
402 |
403 | export default _merge(theme, additionalSettings);
404 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/src/rsuite_light.project.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 1,
3 | "themeName": "rsuite_light",
4 | "theme": {
5 | "seriesCnt": "7",
6 | "backgroundColor": "rgba(0,0,0,0)",
7 | "titleColor": "#333333",
8 | "subtitleColor": "#aaaaaa",
9 | "textColorShow": false,
10 | "textColor": "#333",
11 | "markTextColor": "#eeeeee",
12 | "color": [
13 | "#34c3ff",
14 | "#a873e6",
15 | "#13ba9e",
16 | "#ee5765",
17 | "#f5a623",
18 | "#2575fc",
19 | "#df6ecd",
20 | "#8338ec",
21 | "#e6b980",
22 | "#51E8FF"
23 | ],
24 | "borderColor": "#ccc",
25 | "borderWidth": 0,
26 | "visualMapColor": ["#c2edff", "#009de6"],
27 | "legendTextColor": "#8e8e93",
28 | "kColor": "#e01f54",
29 | "kColor0": "#001852",
30 | "kBorderColor": "#f5e8c8",
31 | "kBorderColor0": "#b8d2c7",
32 | "kBorderWidth": 1,
33 | "lineWidth": 2,
34 | "symbolSize": "0",
35 | "symbol": "circle",
36 | "symbolBorderWidth": "0",
37 | "lineSmooth": false,
38 | "graphLineWidth": 1,
39 | "graphLineColor": "#aaaaaa",
40 | "mapLabelColor": "#000000",
41 | "mapLabelColorE": "rgb(100,0,0)",
42 | "mapBorderColor": "#444444",
43 | "mapBorderColorE": "#444444",
44 | "mapBorderWidth": 0.5,
45 | "mapBorderWidthE": 1,
46 | "mapAreaColor": "#eeeeee",
47 | "mapAreaColorE": "rgba(255,215,0,0.8)",
48 | "axes": [
49 | {
50 | "type": "all",
51 | "name": "通用坐标轴",
52 | "axisLineShow": true,
53 | "axisLineColor": "#e5e5ea",
54 | "axisTickShow": false,
55 | "axisTickColor": "#333",
56 | "axisLabelShow": true,
57 | "axisLabelColor": "#575757",
58 | "splitLineShow": true,
59 | "splitLineColor": ["#e5e5ea"],
60 | "splitAreaShow": false,
61 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
62 | },
63 | {
64 | "type": "category",
65 | "name": "类目坐标轴",
66 | "axisLineShow": true,
67 | "axisLineColor": "#e5e5ea",
68 | "axisTickShow": false,
69 | "axisTickColor": "#333",
70 | "axisLabelShow": true,
71 | "axisLabelColor": "#575757",
72 | "splitLineShow": false,
73 | "splitLineColor": ["#e5e5ea"],
74 | "splitAreaShow": false,
75 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
76 | },
77 | {
78 | "type": "value",
79 | "name": "数值坐标轴",
80 | "axisLineShow": false,
81 | "axisLineColor": "#e5e5ea",
82 | "axisTickShow": false,
83 | "axisTickColor": "#8e8e93",
84 | "axisLabelShow": true,
85 | "axisLabelColor": "#575757",
86 | "splitLineShow": true,
87 | "splitLineColor": ["#e5e5ea"],
88 | "splitAreaShow": false,
89 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
90 | },
91 | {
92 | "type": "log",
93 | "name": "对数坐标轴",
94 | "axisLineShow": true,
95 | "axisLineColor": "#e5e5ea",
96 | "axisTickShow": true,
97 | "axisTickColor": "#333",
98 | "axisLabelShow": true,
99 | "axisLabelColor": "#575757",
100 | "splitLineShow": true,
101 | "splitLineColor": ["#e5e5ea"],
102 | "splitAreaShow": false,
103 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
104 | },
105 | {
106 | "type": "time",
107 | "name": "时间坐标轴",
108 | "axisLineShow": true,
109 | "axisLineColor": "#e5e5ea",
110 | "axisTickShow": true,
111 | "axisTickColor": "#333",
112 | "axisLabelShow": true,
113 | "axisLabelColor": "#575757",
114 | "splitLineShow": true,
115 | "splitLineColor": ["#e5e5ea"],
116 | "splitAreaShow": false,
117 | "splitAreaColor": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
118 | }
119 | ],
120 | "axisSeperateSetting": true,
121 | "toolboxColor": "#999999",
122 | "toolboxEmpasisColor": "#666666",
123 | "tooltipAxisColor": "#cccccc",
124 | "tooltipAxisWidth": 1,
125 | "timelineLineColor": "#293c55",
126 | "timelineLineWidth": 1,
127 | "timelineItemColor": "#293c55",
128 | "timelineItemColorE": "#a9334c",
129 | "timelineCheckColor": "#e43c59",
130 | "timelineCheckBorderColor": "#c23531",
131 | "timelineItemBorderWidth": 1,
132 | "timelineControlColor": "#293c55",
133 | "timelineControlBorderColor": "#293c55",
134 | "timelineControlBorderWidth": 0.5,
135 | "timelineLabelColor": "#293c55",
136 | "datazoomBackgroundColor": "rgba(47,69,84,0)",
137 | "datazoomDataColor": "rgba(47,69,84,0.3)",
138 | "datazoomFillColor": "rgba(167,183,204,0.4)",
139 | "datazoomHandleColor": "#a7b7cc",
140 | "datazoomHandleWidth": "100",
141 | "datazoomLabelColor": "#333333"
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/src/rsuite_light.ts:
--------------------------------------------------------------------------------
1 | import _merge from 'lodash.merge';
2 |
3 | /**
4 | * DO NOT directly edit this theme object
5 | * If you need to edit the rsuite_light theme, follow these steps:
6 | *
7 | * 1. Visit https://echarts.apache.org/zh/theme-builder.html
8 | * 2. Import rsuite_light.project.json to the theme builder
9 | * 3. Make changes in the theme builder GUI
10 | * 4. Download (not export) the edited theme
11 | * 5. Replace the theme object with the latest theme JSON
12 | * 6. Export the edited theme and update rsuite_light.project.json
13 | */
14 | const theme = {
15 | color: [
16 | '#34c3ff',
17 | '#a873e6',
18 | '#13ba9e',
19 | '#ee5765',
20 | '#f5a623',
21 | '#2575fc',
22 | '#df6ecd',
23 | '#8338ec',
24 | '#e6b980',
25 | '#51E8FF',
26 | ],
27 | backgroundColor: 'rgba(0,0,0,0)',
28 | textStyle: {},
29 | title: {
30 | textStyle: {
31 | color: '#333333',
32 | },
33 | subtextStyle: {
34 | color: '#aaaaaa',
35 | },
36 | },
37 | line: {
38 | itemStyle: {
39 | borderWidth: '0',
40 | },
41 | lineStyle: {
42 | width: 2,
43 | },
44 | symbolSize: '0',
45 | symbol: 'circle',
46 | smooth: false,
47 | },
48 | radar: {
49 | itemStyle: {
50 | borderWidth: '0',
51 | },
52 | lineStyle: {
53 | width: 2,
54 | },
55 | symbolSize: '0',
56 | symbol: 'circle',
57 | smooth: false,
58 | },
59 | bar: {
60 | itemStyle: {
61 | barBorderWidth: 0,
62 | barBorderColor: '#ccc',
63 | },
64 | },
65 | pie: {
66 | itemStyle: {
67 | borderWidth: 0,
68 | borderColor: '#ccc',
69 | },
70 | },
71 | scatter: {
72 | itemStyle: {
73 | borderWidth: 0,
74 | borderColor: '#ccc',
75 | },
76 | },
77 | boxplot: {
78 | itemStyle: {
79 | borderWidth: 0,
80 | borderColor: '#ccc',
81 | },
82 | },
83 | parallel: {
84 | itemStyle: {
85 | borderWidth: 0,
86 | borderColor: '#ccc',
87 | },
88 | },
89 | sankey: {
90 | itemStyle: {
91 | borderWidth: 0,
92 | borderColor: '#ccc',
93 | },
94 | },
95 | funnel: {
96 | itemStyle: {
97 | borderWidth: 0,
98 | borderColor: '#ccc',
99 | },
100 | },
101 | gauge: {
102 | itemStyle: {
103 | borderWidth: 0,
104 | borderColor: '#ccc',
105 | },
106 | },
107 | candlestick: {
108 | itemStyle: {
109 | color: '#e01f54',
110 | color0: '#001852',
111 | borderColor: '#f5e8c8',
112 | borderColor0: '#b8d2c7',
113 | borderWidth: 1,
114 | },
115 | },
116 | graph: {
117 | itemStyle: {
118 | borderWidth: 0,
119 | borderColor: '#ccc',
120 | },
121 | lineStyle: {
122 | width: 1,
123 | color: '#aaaaaa',
124 | },
125 | symbolSize: '0',
126 | symbol: 'circle',
127 | smooth: false,
128 | color: [
129 | '#34c3ff',
130 | '#a873e6',
131 | '#13ba9e',
132 | '#ee5765',
133 | '#f5a623',
134 | '#2575fc',
135 | '#df6ecd',
136 | '#8338ec',
137 | '#e6b980',
138 | '#51E8FF',
139 | ],
140 | label: {
141 | color: '#eeeeee',
142 | },
143 | },
144 | map: {
145 | itemStyle: {
146 | areaColor: '#eeeeee',
147 | borderColor: '#444444',
148 | borderWidth: 0.5,
149 | },
150 | label: {
151 | color: '#000000',
152 | },
153 | emphasis: {
154 | itemStyle: {
155 | areaColor: 'rgba(255,215,0,0.8)',
156 | borderColor: '#444444',
157 | borderWidth: 1,
158 | },
159 | label: {
160 | color: 'rgb(100,0,0)',
161 | },
162 | },
163 | },
164 | geo: {
165 | itemStyle: {
166 | areaColor: '#eeeeee',
167 | borderColor: '#444444',
168 | borderWidth: 0.5,
169 | },
170 | label: {
171 | color: '#000000',
172 | },
173 | emphasis: {
174 | itemStyle: {
175 | areaColor: 'rgba(255,215,0,0.8)',
176 | borderColor: '#444444',
177 | borderWidth: 1,
178 | },
179 | label: {
180 | color: 'rgb(100,0,0)',
181 | },
182 | },
183 | },
184 | categoryAxis: {
185 | axisLine: {
186 | show: true,
187 | lineStyle: {
188 | color: '#e5e5ea',
189 | },
190 | },
191 | axisTick: {
192 | show: false,
193 | lineStyle: {
194 | color: '#333',
195 | },
196 | },
197 | axisLabel: {
198 | show: true,
199 | color: '#575757',
200 | },
201 | splitLine: {
202 | show: false,
203 | lineStyle: {
204 | color: ['#e5e5ea'],
205 | },
206 | },
207 | splitArea: {
208 | show: false,
209 | areaStyle: {
210 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
211 | },
212 | },
213 | },
214 | valueAxis: {
215 | axisLine: {
216 | show: false,
217 | lineStyle: {
218 | color: '#e5e5ea',
219 | },
220 | },
221 | axisTick: {
222 | show: false,
223 | lineStyle: {
224 | color: '#8e8e93',
225 | },
226 | },
227 | axisLabel: {
228 | show: true,
229 | color: '#575757',
230 | },
231 | splitLine: {
232 | show: true,
233 | lineStyle: {
234 | color: ['#e5e5ea'],
235 | },
236 | },
237 | splitArea: {
238 | show: false,
239 | areaStyle: {
240 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
241 | },
242 | },
243 | },
244 | logAxis: {
245 | axisLine: {
246 | show: true,
247 | lineStyle: {
248 | color: '#e5e5ea',
249 | },
250 | },
251 | axisTick: {
252 | show: true,
253 | lineStyle: {
254 | color: '#333',
255 | },
256 | },
257 | axisLabel: {
258 | show: true,
259 | color: '#575757',
260 | },
261 | splitLine: {
262 | show: true,
263 | lineStyle: {
264 | color: ['#e5e5ea'],
265 | },
266 | },
267 | splitArea: {
268 | show: false,
269 | areaStyle: {
270 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
271 | },
272 | },
273 | },
274 | timeAxis: {
275 | axisLine: {
276 | show: true,
277 | lineStyle: {
278 | color: '#e5e5ea',
279 | },
280 | },
281 | axisTick: {
282 | show: true,
283 | lineStyle: {
284 | color: '#333',
285 | },
286 | },
287 | axisLabel: {
288 | show: true,
289 | color: '#575757',
290 | },
291 | splitLine: {
292 | show: true,
293 | lineStyle: {
294 | color: ['#e5e5ea'],
295 | },
296 | },
297 | splitArea: {
298 | show: false,
299 | areaStyle: {
300 | color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
301 | },
302 | },
303 | },
304 | toolbox: {
305 | iconStyle: {
306 | borderColor: '#999999',
307 | },
308 | emphasis: {
309 | iconStyle: {},
310 | },
311 | },
312 | legend: {
313 | textStyle: {
314 | color: '#8e8e93',
315 | },
316 | },
317 | tooltip: {
318 | axisPointer: {
319 | lineStyle: {
320 | color: '#cccccc',
321 | width: 1,
322 | },
323 | crossStyle: {
324 | color: '#cccccc',
325 | width: 1,
326 | },
327 | },
328 | },
329 | timeline: {
330 | lineStyle: {
331 | color: '#293c55',
332 | width: 1,
333 | },
334 | itemStyle: {
335 | color: '#293c55',
336 | borderWidth: 1,
337 | },
338 | controlStyle: {
339 | color: '#293c55',
340 | borderColor: '#293c55',
341 | borderWidth: 0.5,
342 | },
343 | checkpointStyle: {
344 | color: '#e43c59',
345 | borderColor: '#c23531',
346 | },
347 | label: {
348 | color: '#293c55',
349 | },
350 | emphasis: {
351 | itemStyle: {
352 | color: '#a9334c',
353 | },
354 | controlStyle: {
355 | color: '#293c55',
356 | borderColor: '#293c55',
357 | borderWidth: 0.5,
358 | },
359 | label: {
360 | color: '#293c55',
361 | },
362 | },
363 | },
364 | visualMap: {
365 | color: ['#c2edff', '#009de6'],
366 | },
367 | dataZoom: {
368 | backgroundColor: 'rgba(47,69,84,0)',
369 | dataBackgroundColor: 'rgba(47,69,84,0.3)',
370 | fillerColor: 'rgba(167,183,204,0.4)',
371 | handleColor: '#a7b7cc',
372 | handleSize: '100%',
373 | textStyle: {
374 | color: '#333333',
375 | },
376 | },
377 | markPoint: {
378 | label: {
379 | color: '#eeeeee',
380 | },
381 | emphasis: {
382 | label: {
383 | color: '#eeeeee',
384 | },
385 | },
386 | },
387 | };
388 |
389 | const additionalSettings = {
390 | textStyle: {
391 | color: '#575757',
392 | },
393 | legend: {
394 | textStyle: {
395 | fontSize: 14,
396 | },
397 | },
398 | };
399 |
400 | export default _merge(additionalSettings, theme);
401 |
--------------------------------------------------------------------------------
/packages/echarts-theme-rsuite/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src"]
4 | }
5 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2020",
4 | "module": "esnext",
5 | "strict": true,
6 | "esModuleInterop": true,
7 | "moduleResolution": "node",
8 | "skipLibCheck": true,
9 | "noUnusedLocals": true,
10 | "noImplicitAny": false,
11 | "allowJs": true,
12 | "noEmit": true,
13 | "outDir": "dist",
14 | "jsx": "react",
15 | "resolveJsonModule": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turborepo.org/schema.json",
3 | "baseBranch": "origin/master",
4 | "pipeline": {
5 | "dev": {
6 | "dependsOn": ["^build"]
7 | },
8 | "build": {
9 | "dependsOn": ["^build"],
10 | "outputs": ["dist/**"]
11 | },
12 | "build-docs": {
13 | "dependsOn": ["^build"]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------