@zgfe/business-lib 1.1.55-beta.1 → 1.1.55-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/chart/demo/data/data.js +1 -1
- package/es/chart/demo/pie.js +2 -5
- package/es/chart/index.js +1 -1
- package/es/chart/types.d.ts +3 -0
- package/es/chart/util/chartOptionConfig.d.ts +1 -1
- package/es/chart/util/chartOptionConfig.js +23 -4
- package/es/chart/util/formatOption.js +3 -0
- package/es/layout/optionTitle/styles/index.less +0 -1
- package/es/layout/optionTitle/styles/layout.less +1 -0
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
x_axis: ['2022-03-31', '2022-04-01', '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06', '2022-04-07', '2022-04-08', '2022-04-09', '2022-04-10', '2022-04-11', '2022-04-12', '2022-04-13'],
|
|
3
3
|
series: [{
|
|
4
|
-
names: ['
|
|
4
|
+
names: ['付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功付款成功'],
|
|
5
5
|
values: [26, 27, 43, 44, 40, 34, 33, 33, 34, 24, 30, 31, 31, 38]
|
|
6
6
|
}, {
|
|
7
7
|
names: ['注册-发送手机验证码'],
|
package/es/chart/demo/pie.js
CHANGED
|
@@ -5,10 +5,7 @@ export default (function () {
|
|
|
5
5
|
return /*#__PURE__*/React.createElement(BizChart, {
|
|
6
6
|
data: pieData,
|
|
7
7
|
type: "pie",
|
|
8
|
-
showAll:
|
|
9
|
-
|
|
10
|
-
legendOrient: "vertical",
|
|
11
|
-
colors: ['#1D9ED1', '#F383A2', '#9FB40F', '#FF6B3B', '#8C8C47'],
|
|
12
|
-
showList: ['付款成功', '搜索商品', '查看商品详情', 'click']
|
|
8
|
+
showAll: true,
|
|
9
|
+
radius: ['30%', '75%']
|
|
13
10
|
});
|
|
14
11
|
});
|
package/es/chart/index.js
CHANGED
|
@@ -56,7 +56,7 @@ var BizChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
56
56
|
if (!data) return eOption;
|
|
57
57
|
if (type === 'pie') {
|
|
58
58
|
var rData = formatPieData(data, showAll, showList);
|
|
59
|
-
eOption = getPieOption(rData, legendPosition, legendOrient, tooltipFormatter);
|
|
59
|
+
eOption = getPieOption(rData, legendPosition, legendOrient, props.showLabel, props.radius, props.center, tooltipFormatter);
|
|
60
60
|
} else if (type === 'line' || type === 'bar') {
|
|
61
61
|
var _rData = formatChartData(data, showAll, showList, reverseXAxis, colors);
|
|
62
62
|
eOption = getChartOption(type, _rData, legendPosition, legendOrient, valueUnit, xRotate, yRotate, tooltipFormatter, xAxisFormatter, yAxisFormatter, legendFormatter, reverseXAxis, seriesName);
|
package/es/chart/types.d.ts
CHANGED
|
@@ -29,6 +29,9 @@ export declare namespace ChartTypes {
|
|
|
29
29
|
isCity?: boolean;
|
|
30
30
|
userGroup?: string;
|
|
31
31
|
colors?: string[];
|
|
32
|
+
showLabel?: boolean;
|
|
33
|
+
radius?: string | number | Array<string | number>;
|
|
34
|
+
center?: Array<string | number>;
|
|
32
35
|
tooltipFormatter?: (param: any) => string;
|
|
33
36
|
xAxisFormatter?: (param: any) => string;
|
|
34
37
|
yAxisFormatter?: (param: any) => string;
|
|
@@ -17,7 +17,7 @@ export declare const xAxisConfig: XAXisOption;
|
|
|
17
17
|
export declare const yAxisConfig: YAXisOption;
|
|
18
18
|
export declare const tooltipConfig: TooltipComponentOption;
|
|
19
19
|
export declare const getChartOption: (chartType: string, data: ChartTypes.Value, legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', unit?: string, xRotate?: number, yRotate?: number, tooltipFormatter?: ((value: any) => string) | undefined, xAxisFormatter?: ((value: any) => string) | undefined, yAxisFormatter?: ((value: any) => string) | undefined, legendFormatter?: ((value: any) => string) | undefined, reverseXAxis?: boolean, seriesName?: string) => EChartsOption;
|
|
20
|
-
export declare const getPieOption: (seriesData?: object[], legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', tooltipFormatter?: ((value: any) => string) | undefined) => EChartsOption;
|
|
20
|
+
export declare const getPieOption: (seriesData?: object[], legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', showLabel?: boolean, radius?: string | number | Array<string | number>, center?: Array<string | number>, tooltipFormatter?: ((value: any) => string) | undefined, legendFormatter?: ((value: any) => string) | undefined) => EChartsOption;
|
|
21
21
|
export declare const getMapOption: (seriesData: object[] | undefined, maxMinValue: {
|
|
22
22
|
min: number;
|
|
23
23
|
max: number;
|
|
@@ -7,6 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
|
|
|
7
7
|
import { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault, mapTooltipFormatter, legendFormatterDefault } from './formatOption';
|
|
8
8
|
import { chartColors } from './color';
|
|
9
9
|
import '../styles/index.less';
|
|
10
|
+
import { util } from '../../utils';
|
|
10
11
|
export var baseConfig = {
|
|
11
12
|
color: chartColors,
|
|
12
13
|
backgroundColor: '#fff',
|
|
@@ -26,6 +27,7 @@ export var legendConfig = {
|
|
|
26
27
|
itemHeight: 10,
|
|
27
28
|
itemWidth: 10,
|
|
28
29
|
itemGap: 21,
|
|
30
|
+
z: 10,
|
|
29
31
|
textStyle: {
|
|
30
32
|
color: '#5F6085',
|
|
31
33
|
height: 10,
|
|
@@ -36,7 +38,6 @@ export var legendConfig = {
|
|
|
36
38
|
}
|
|
37
39
|
},
|
|
38
40
|
formatter: ['{a|{name}}'].join('\n'),
|
|
39
|
-
pageIconSize: 10,
|
|
40
41
|
pageTextStyle: {
|
|
41
42
|
color: '#5F6085'
|
|
42
43
|
},
|
|
@@ -200,12 +201,29 @@ export var getPieOption = function getPieOption() {
|
|
|
200
201
|
var seriesData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
201
202
|
var legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
|
|
202
203
|
var legendOrient = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'horizontal';
|
|
203
|
-
var
|
|
204
|
+
var showLabel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
|
205
|
+
var radius = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, '75%'];
|
|
206
|
+
var center = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ['50%', '55%'];
|
|
207
|
+
var tooltipFormatter = arguments.length > 6 ? arguments[6] : undefined;
|
|
208
|
+
var legendFormatter = arguments.length > 7 ? arguments[7] : undefined;
|
|
204
209
|
var series = [{
|
|
205
210
|
type: 'pie',
|
|
206
211
|
data: seriesData,
|
|
207
212
|
label: {
|
|
208
|
-
show:
|
|
213
|
+
show: showLabel,
|
|
214
|
+
color: 'inherit',
|
|
215
|
+
formatter: function formatter(params) {
|
|
216
|
+
return util.strMiddleSplit(params.name);
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
radius: radius,
|
|
220
|
+
center: center,
|
|
221
|
+
emphasis: {
|
|
222
|
+
itemStyle: {
|
|
223
|
+
shadowBlur: 10,
|
|
224
|
+
shadowOffsetX: 0,
|
|
225
|
+
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
|
226
|
+
}
|
|
209
227
|
}
|
|
210
228
|
}];
|
|
211
229
|
var tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
|
|
@@ -220,6 +238,7 @@ export var getPieOption = function getPieOption() {
|
|
|
220
238
|
legend.width = 50;
|
|
221
239
|
grid.left = '10%';
|
|
222
240
|
}
|
|
241
|
+
legend.formatter = legendFormatter ? legendFormatter : legendFormatterDefault;
|
|
223
242
|
tooltip.trigger = 'item';
|
|
224
243
|
if (tooltipFormatter) {
|
|
225
244
|
tooltip.formatter = tooltipFormatter;
|
|
@@ -228,7 +247,7 @@ export var getPieOption = function getPieOption() {
|
|
|
228
247
|
var name = params.name,
|
|
229
248
|
value = params.value,
|
|
230
249
|
color = params.color;
|
|
231
|
-
return "<div class=\"biz-chart-tooltip-item\">\n <
|
|
250
|
+
return "<div class=\"biz-chart-tooltip-item\">\n <div class=\"biz-chart-tooltip-content\">\n <span class=\"biz-tooltip-marker\" style=\"background:".concat(color, "\"></span>\n <div class=\"biz-tooltip-name\">").concat(name, "</div>\n </div> \n <span class=\"biz-chart-tooltip-value\">").concat(value, "</span>\n </div>");
|
|
232
251
|
};
|
|
233
252
|
}
|
|
234
253
|
return _objectSpread(_objectSpread({}, baseConfig), {}, {
|
|
@@ -22,6 +22,9 @@ var tooltipFormatterDefault = function tooltipFormatterDefault(params) {
|
|
|
22
22
|
lineLabel = util.toThousands(lineLabel);
|
|
23
23
|
}
|
|
24
24
|
var name = item.seriesName.trim();
|
|
25
|
+
if (item.seriesType === 'bar' && params.length === 1 && !name) {
|
|
26
|
+
name = (item.data && item.data.label ? item.data.label : item.name).trim();
|
|
27
|
+
}
|
|
25
28
|
htmlArray.push("<div class=\"biz-chart-tooltip-item\">\n <div class=\"biz-chart-tooltip-content\">\n <span class=\"biz-tooltip-marker\" style=\"background:".concat(item.color, "\"></span>\n <div class=\"biz-tooltip-name\">").concat(name, "</div>\n </div> \n <span class=\"biz-chart-tooltip-value\">").concat(lineLabel, "</span>\n </div>"));
|
|
26
29
|
});
|
|
27
30
|
return htmlArray.join('');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zgfe/business-lib",
|
|
3
|
-
"version": "1.1.55-beta.
|
|
3
|
+
"version": "1.1.55-beta.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "dumi dev",
|
|
6
6
|
"docs:build": "dumi build",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react": "^16.12.0 || ^17.0.0",
|
|
61
61
|
"yorkie": "^2.0.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "cf0536417852436598e08a1bb2f79e8db51f422d"
|
|
64
64
|
}
|