onesight-charts 2.0.1 → 2.0.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/dist/onesight-charts.min.js +1 -1
- package/es/components/stacked-bar/demo/base.js +0 -166
- package/es/components/stacked-bar/demo/base1.js +174 -0
- package/es/components/stacked-bar/demo/base2.js +142 -0
- package/es/components/stacked-bar/index.js +4 -11
- package/lib/components/stacked-bar/demo/base.js +1 -191
- package/lib/components/stacked-bar/demo/base1.js +212 -0
- package/lib/components/stacked-bar/demo/base2.js +188 -0
- package/lib/components/stacked-bar/index.js +5 -5
- package/package.json +1 -1
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/stacked-bar/demo/base2.jsx
|
|
20
|
+
var base2_exports = {};
|
|
21
|
+
__export(base2_exports, {
|
|
22
|
+
default: () => base2_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(base2_exports);
|
|
25
|
+
var import_onesight_charts = require("../../..");
|
|
26
|
+
var handleClick = (type, params) => {
|
|
27
|
+
console.log("type", type);
|
|
28
|
+
console.log("params", params);
|
|
29
|
+
};
|
|
30
|
+
function App() {
|
|
31
|
+
return /* @__PURE__ */ React.createElement("div", { style: { width: "460px", height: "320px" } }, /* @__PURE__ */ React.createElement(
|
|
32
|
+
import_onesight_charts.StackedBar,
|
|
33
|
+
{
|
|
34
|
+
yAxisData: [
|
|
35
|
+
"18-24",
|
|
36
|
+
"25-34",
|
|
37
|
+
"35-44",
|
|
38
|
+
"45-54",
|
|
39
|
+
"55-64",
|
|
40
|
+
"65+"
|
|
41
|
+
],
|
|
42
|
+
series: [
|
|
43
|
+
{
|
|
44
|
+
"name": "男性",
|
|
45
|
+
"type": "bar",
|
|
46
|
+
"stack": "total",
|
|
47
|
+
"label": {
|
|
48
|
+
"show": false
|
|
49
|
+
},
|
|
50
|
+
"emphasis": {
|
|
51
|
+
"focus": "self"
|
|
52
|
+
},
|
|
53
|
+
"alias": "male",
|
|
54
|
+
"itemStyle": {
|
|
55
|
+
"borderColor": "rgba(0,0,0,0)",
|
|
56
|
+
"borderWidth": 1,
|
|
57
|
+
"borderType": "solid"
|
|
58
|
+
},
|
|
59
|
+
"barWidth": 16,
|
|
60
|
+
"barMinHeight": 2,
|
|
61
|
+
"data": [
|
|
62
|
+
{
|
|
63
|
+
"total": 9.8,
|
|
64
|
+
"monitor_name": "18-24",
|
|
65
|
+
"yDataName": "18-24",
|
|
66
|
+
"name": "18-24",
|
|
67
|
+
"alias": "male",
|
|
68
|
+
"value": 9.8
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"total": 32.4,
|
|
72
|
+
"monitor_name": "25-34",
|
|
73
|
+
"yDataName": "25-34",
|
|
74
|
+
"name": "25-34",
|
|
75
|
+
"alias": "male",
|
|
76
|
+
"value": 32.4
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"total": 17.5,
|
|
80
|
+
"monitor_name": "35-44",
|
|
81
|
+
"yDataName": "35-44",
|
|
82
|
+
"name": "35-44",
|
|
83
|
+
"alias": "male",
|
|
84
|
+
"value": 17.5
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"total": 5.5,
|
|
88
|
+
"monitor_name": "45-54",
|
|
89
|
+
"yDataName": "45-54",
|
|
90
|
+
"name": "45-54",
|
|
91
|
+
"alias": "male",
|
|
92
|
+
"value": 5.5
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"total": 2.4,
|
|
96
|
+
"monitor_name": "55-64",
|
|
97
|
+
"yDataName": "55-64",
|
|
98
|
+
"name": "55-64",
|
|
99
|
+
"alias": "male",
|
|
100
|
+
"value": 2.4
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"total": 2.3,
|
|
104
|
+
"monitor_name": "65+",
|
|
105
|
+
"yDataName": "65+",
|
|
106
|
+
"name": "65+",
|
|
107
|
+
"alias": "male",
|
|
108
|
+
"value": 2.3
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "女性",
|
|
114
|
+
"type": "bar",
|
|
115
|
+
"stack": "total",
|
|
116
|
+
"label": {
|
|
117
|
+
"show": false
|
|
118
|
+
},
|
|
119
|
+
"emphasis": {
|
|
120
|
+
"focus": "self"
|
|
121
|
+
},
|
|
122
|
+
"alias": "female",
|
|
123
|
+
"itemStyle": {
|
|
124
|
+
"borderColor": "rgba(0,0,0,0)",
|
|
125
|
+
"borderWidth": 1,
|
|
126
|
+
"borderType": "solid"
|
|
127
|
+
},
|
|
128
|
+
"barWidth": 16,
|
|
129
|
+
"barMinHeight": 2,
|
|
130
|
+
"data": [
|
|
131
|
+
{
|
|
132
|
+
"total": 3.9,
|
|
133
|
+
"monitor_name": "18-24",
|
|
134
|
+
"yDataName": "18-24",
|
|
135
|
+
"name": "18-24",
|
|
136
|
+
"alias": "female",
|
|
137
|
+
"value": 3.9
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"total": 14.6,
|
|
141
|
+
"monitor_name": "25-34",
|
|
142
|
+
"yDataName": "25-34",
|
|
143
|
+
"name": "25-34",
|
|
144
|
+
"alias": "female",
|
|
145
|
+
"value": 14.6
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"total": 7.2,
|
|
149
|
+
"monitor_name": "35-44",
|
|
150
|
+
"yDataName": "35-44",
|
|
151
|
+
"name": "35-44",
|
|
152
|
+
"alias": "female",
|
|
153
|
+
"value": 7.2
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"total": 2.1,
|
|
157
|
+
"monitor_name": "45-54",
|
|
158
|
+
"yDataName": "45-54",
|
|
159
|
+
"name": "45-54",
|
|
160
|
+
"alias": "female",
|
|
161
|
+
"value": 2.1
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"total": 1.3,
|
|
165
|
+
"monitor_name": "55-64",
|
|
166
|
+
"yDataName": "55-64",
|
|
167
|
+
"name": "55-64",
|
|
168
|
+
"alias": "female",
|
|
169
|
+
"value": 1.3
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"total": 1.1,
|
|
173
|
+
"monitor_name": "65+",
|
|
174
|
+
"yDataName": "65+",
|
|
175
|
+
"name": "65+",
|
|
176
|
+
"alias": "female",
|
|
177
|
+
"value": 1.1
|
|
178
|
+
}
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
],
|
|
182
|
+
handleClick,
|
|
183
|
+
isRateShow: false,
|
|
184
|
+
special: true
|
|
185
|
+
}
|
|
186
|
+
));
|
|
187
|
+
}
|
|
188
|
+
var base2_default = App;
|
|
@@ -396,7 +396,7 @@ function StackedBar(props) {
|
|
|
396
396
|
if (!shouldShow)
|
|
397
397
|
return "";
|
|
398
398
|
const total = visibleTotalArrRef.current[rowIdx] || 0;
|
|
399
|
-
return (0, import_chartUtils.numberFormatNull)(total)
|
|
399
|
+
return `${(0, import_chartUtils.numberFormatNull)(total)}${special ? "%" : ""}`;
|
|
400
400
|
}
|
|
401
401
|
}
|
|
402
402
|
};
|
|
@@ -523,9 +523,9 @@ function StackedBar(props) {
|
|
|
523
523
|
<div class='l'>
|
|
524
524
|
${tooltipTotalName}
|
|
525
525
|
</div>
|
|
526
|
-
<div class='r'>${(0, import_chartUtils.changeDataTypeEn)(total)}</div>
|
|
526
|
+
<div class='r'>${(0, import_chartUtils.changeDataTypeEn)(total)}${special ? "%" : ""}</div>
|
|
527
527
|
</div>` : ""}
|
|
528
|
-
|
|
528
|
+
${dataArr.map((item) => {
|
|
529
529
|
return `<div class='item' data-series-item='${JSON.stringify(
|
|
530
530
|
item
|
|
531
531
|
)}' key='${item.seriesName}'>
|
|
@@ -539,7 +539,7 @@ function StackedBar(props) {
|
|
|
539
539
|
item.proportion
|
|
540
540
|
)}</span>` : ""}
|
|
541
541
|
<span class='num'>
|
|
542
|
-
${(0, import_chartUtils.changeDataTypeEn)(item.value)}
|
|
542
|
+
${(0, import_chartUtils.changeDataTypeEn)(item.value)}${special ? "%" : ""}
|
|
543
543
|
</span>
|
|
544
544
|
</div>
|
|
545
545
|
</div>`;
|
|
@@ -562,7 +562,7 @@ function StackedBar(props) {
|
|
|
562
562
|
const rawTotal = seriesTotalMap[name] || 0;
|
|
563
563
|
const value = legendValue ? (0, import_chartUtils.numberFormatMust)(rawTotal) : 0;
|
|
564
564
|
return legendValue ? `{labelName|${name}}
|
|
565
|
-
{labelMark|${value}}` : `{labelName|${name}}`;
|
|
565
|
+
{labelMark|${value}${special ? "%" : ""}}` : `{labelName|${name}}`;
|
|
566
566
|
},
|
|
567
567
|
textStyle: {
|
|
568
568
|
fontWeight: 500,
|