@vtx/ol-map 1.0.109 → 1.0.111
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/lib/high-layer/HighLayer.js +1 -1
- package/lib/high-layer/HighLayer.js.map +1 -1
- package/lib/map/Popup.js +3 -3
- package/lib/map/Popup.js.map +1 -1
- package/lib/map/getBaseLayers/imagery/amap/AmapImageryProvider.js +1 -1
- package/lib/map/getBaseLayers/imagery/amap/AmapImageryProvider.js.map +1 -1
- package/lib/map/getBaseLayers/imagery/baidu/BaiduImageryProvider.js +1 -1
- package/lib/map/getBaseLayers/imagery/baidu/BaiduImageryProvider.js.map +1 -1
- package/lib/map/index.js +24 -12
- package/lib/map/index.js.map +1 -1
- package/lib/popup/index.js +1 -0
- package/lib/popup/index.js.map +1 -1
- package/lib/tools/Toolbox/SelectTools/index.css +53 -0
- package/lib/tools/Toolbox/SelectTools/index.js +417 -72
- package/lib/tools/Toolbox/SelectTools/index.js.map +1 -1
- package/lib/tools/Toolbox/SelectTools/index.less +42 -0
- package/lib/tools/Utils/HighLayer.js +24 -4
- package/lib/tools/Utils/HighLayer.js.map +1 -1
- package/lib/tools/components/Chart/index.css +9 -0
- package/lib/tools/components/Chart/index.js +830 -0
- package/lib/tools/components/Chart/index.js.map +1 -0
- package/lib/tools/components/Chart/index.less +13 -0
- package/lib/tools/components/Info/index.css +39 -0
- package/lib/tools/components/Info/index.js +35 -0
- package/lib/tools/components/Info/index.js.map +1 -0
- package/lib/tools/components/Info/index.less +26 -0
- package/lib/tools/index.js +18 -5
- package/lib/tools/index.js.map +1 -1
- package/lib/tools/style/css.js +3 -0
- package/lib/tools/style/css.js.map +1 -1
- package/lib/tools/style/index.js +3 -0
- package/lib/tools/style/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,830 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.numberTo = exports.mergeXAxisAndData = exports.mergeSeriesAndData = exports.mergeConfigAndData = exports.getColor = exports["default"] = exports.convertPieData = exports.convertDecimal = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
|
|
9
|
+
var _antd = require("antd");
|
|
10
|
+
var _index = _interopRequireDefault(require("./index.less"));
|
|
11
|
+
var _excluded = ["data"],
|
|
12
|
+
_excluded2 = ["name", "nameTextStyle"],
|
|
13
|
+
_excluded3 = ["name", "data"],
|
|
14
|
+
_excluded4 = ["name", "data", "type"],
|
|
15
|
+
_excluded5 = ["name", "data", "type"],
|
|
16
|
+
_excluded6 = ["name", "data", "type", "lingColor"],
|
|
17
|
+
_excluded7 = ["type", "color", "barLabelConfig"],
|
|
18
|
+
_excluded8 = ["name", "data"],
|
|
19
|
+
_excluded9 = ["name", "data"],
|
|
20
|
+
_excluded10 = ["data", "onEvents", "color", "legend", "unit", "tooltip", "grid", "xAxis", "yAxis", "height", "series", "loading", "title", "dataZoom", "noDataText", "style", "imgStyle", "noDataStyle"];
|
|
21
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
24
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
25
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
26
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
27
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
28
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
30
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
31
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
34
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
35
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
36
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
37
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
38
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
39
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
40
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
41
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
42
|
+
var color = '#86909C';
|
|
43
|
+
var fontSize = '12px';
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* 小数处理,默认2位
|
|
47
|
+
* @param value
|
|
48
|
+
* @param len
|
|
49
|
+
* @returns {number|*}
|
|
50
|
+
*/
|
|
51
|
+
var convertDecimal = function convertDecimal(value) {
|
|
52
|
+
var len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
|
|
53
|
+
if (value && String(value).indexOf('.') !== -1) {
|
|
54
|
+
var _String$split = String(value).split('.'),
|
|
55
|
+
_String$split2 = _slicedToArray(_String$split, 2),
|
|
56
|
+
start = _String$split2[0],
|
|
57
|
+
end = _String$split2[1];
|
|
58
|
+
if (String(end).length > len) {
|
|
59
|
+
end = end.substring(0, len);
|
|
60
|
+
}
|
|
61
|
+
return Number("".concat(start, ".").concat(end));
|
|
62
|
+
}
|
|
63
|
+
return value;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* 转换饼图数据,处理占比截取为默认2位小数
|
|
68
|
+
* @param data
|
|
69
|
+
* @returns {*[]}
|
|
70
|
+
*/
|
|
71
|
+
exports.convertDecimal = convertDecimal;
|
|
72
|
+
var convertPieData = function convertPieData(data) {
|
|
73
|
+
var _data2;
|
|
74
|
+
var _data = [];
|
|
75
|
+
if ((_data2 = data) !== null && _data2 !== void 0 && _data2.length) {
|
|
76
|
+
data = data.filter(function (v) {
|
|
77
|
+
return Number(v.value);
|
|
78
|
+
});
|
|
79
|
+
var total = 0;
|
|
80
|
+
data.map(function (v) {
|
|
81
|
+
if (v.value) {
|
|
82
|
+
total += Number(v.value);
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
data.map(function (v) {
|
|
86
|
+
var value = v.value;
|
|
87
|
+
var rate = (value || 0) / total * 100 || 0;
|
|
88
|
+
rate = convertDecimal(rate);
|
|
89
|
+
_data.push(_objectSpread(_objectSpread({}, v), {}, {
|
|
90
|
+
rate: rate
|
|
91
|
+
}));
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
return _data;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* 合并 xAxis 配置及数据
|
|
99
|
+
* @param xAxis
|
|
100
|
+
* @param data
|
|
101
|
+
* @returns {*&{data: *[]}}
|
|
102
|
+
*/
|
|
103
|
+
exports.convertPieData = convertPieData;
|
|
104
|
+
var mergeXAxisAndData = function mergeXAxisAndData(xAxis, data) {
|
|
105
|
+
var times = [];
|
|
106
|
+
if (data !== null && data !== void 0 && data.length) {
|
|
107
|
+
var field = xAxis.field,
|
|
108
|
+
format = xAxis.format;
|
|
109
|
+
if (field) {
|
|
110
|
+
data.map(function (v) {
|
|
111
|
+
var time = field ? v[field] : v;
|
|
112
|
+
times.push(time);
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
return _objectSpread({
|
|
117
|
+
data: times
|
|
118
|
+
}, xAxis);
|
|
119
|
+
};
|
|
120
|
+
exports.mergeXAxisAndData = mergeXAxisAndData;
|
|
121
|
+
var numberTo = function numberTo(data, number, limit) {
|
|
122
|
+
if (number) {
|
|
123
|
+
return (Number(data) / number).toFixed(limit || 2);
|
|
124
|
+
}
|
|
125
|
+
return data;
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* 合并 series 和数据
|
|
130
|
+
* @param series
|
|
131
|
+
* @param data
|
|
132
|
+
* @returns {*[]}
|
|
133
|
+
*/
|
|
134
|
+
exports.numberTo = numberTo;
|
|
135
|
+
var mergeSeriesAndData = function mergeSeriesAndData(series, data) {
|
|
136
|
+
var _series = [];
|
|
137
|
+
series.map(function (s) {
|
|
138
|
+
var seriesItem = _objectSpread({}, s);
|
|
139
|
+
if (data !== null && data !== void 0 && data.length && s.field) {
|
|
140
|
+
seriesItem.data = [];
|
|
141
|
+
data.map(function (v) {
|
|
142
|
+
seriesItem.data.push(numberTo(v[s.field], s.numberTo));
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
_series.push(seriesItem);
|
|
146
|
+
});
|
|
147
|
+
return _series;
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* 合并配置和数据
|
|
152
|
+
* @param options
|
|
153
|
+
* @returns {{}}
|
|
154
|
+
*/
|
|
155
|
+
exports.mergeSeriesAndData = mergeSeriesAndData;
|
|
156
|
+
var mergeConfigAndData = function mergeConfigAndData(options) {
|
|
157
|
+
var xAxis = options.xAxis,
|
|
158
|
+
yAxis = options.yAxis,
|
|
159
|
+
series = options.series,
|
|
160
|
+
data = options.data;
|
|
161
|
+
var val = {};
|
|
162
|
+
if (!(data && (data.length || Object.keys(data).length))) {
|
|
163
|
+
return options;
|
|
164
|
+
}
|
|
165
|
+
if (yAxis !== null && yAxis !== void 0 && yAxis.field) {
|
|
166
|
+
val.yAxis = mergeXAxisAndData(yAxis, data);
|
|
167
|
+
}
|
|
168
|
+
if (xAxis !== null && xAxis !== void 0 && xAxis.field) {
|
|
169
|
+
val.xAxis = mergeXAxisAndData(xAxis, data);
|
|
170
|
+
}
|
|
171
|
+
if (series !== null && series !== void 0 && series.length) {
|
|
172
|
+
val.series = mergeSeriesAndData(series, data);
|
|
173
|
+
}
|
|
174
|
+
return _objectSpread(_objectSpread({}, options), val);
|
|
175
|
+
};
|
|
176
|
+
exports.mergeConfigAndData = mergeConfigAndData;
|
|
177
|
+
var getUnit = function getUnit(units, name) {
|
|
178
|
+
if (units && _typeof(units) === 'object') {
|
|
179
|
+
if (Array.isArray(units)) {
|
|
180
|
+
var _units$filter$;
|
|
181
|
+
return (_units$filter$ = units.filter(function (item) {
|
|
182
|
+
return item.name === name;
|
|
183
|
+
})[0]) === null || _units$filter$ === void 0 ? void 0 : _units$filter$.value;
|
|
184
|
+
} else {
|
|
185
|
+
return (units === null || units === void 0 ? void 0 : units[name]) || '';
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
return units || '';
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* 获取 tooltip
|
|
192
|
+
* @param options
|
|
193
|
+
* @returns {*&{trigger: string}}
|
|
194
|
+
*/
|
|
195
|
+
var getTooltip = function getTooltip(options, unit, series) {
|
|
196
|
+
var _series$;
|
|
197
|
+
return _objectSpread({
|
|
198
|
+
trigger: ((_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.type) === 'pie' ? 'item' : 'axis',
|
|
199
|
+
confine: true,
|
|
200
|
+
// 限制在图表区域里
|
|
201
|
+
borderWidth: 0,
|
|
202
|
+
formatter: function formatter(params) {
|
|
203
|
+
var _series$2;
|
|
204
|
+
if (((_series$2 = series[0]) === null || _series$2 === void 0 ? void 0 : _series$2.type) === 'pie') {
|
|
205
|
+
var currentUnit = getUnit(unit, params.name);
|
|
206
|
+
return "".concat(params.name, "\uFF1A").concat(params.value).concat(currentUnit);
|
|
207
|
+
}
|
|
208
|
+
var res = params[0].name;
|
|
209
|
+
for (var i = 0; i < params.length; i++) {
|
|
210
|
+
var _currentUnit = getUnit(unit, params[i].seriesName);
|
|
211
|
+
res += "<br>".concat(params[i].marker).concat(params[i].seriesName, "\uFF1A").concat(params[i].value).concat(_currentUnit);
|
|
212
|
+
}
|
|
213
|
+
return res;
|
|
214
|
+
}
|
|
215
|
+
}, options);
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* 获取 图例
|
|
220
|
+
* @param options
|
|
221
|
+
* @returns {*&{pageTextStyle: {color: string}, textStyle: {color: string}, type: string, pageIconInactiveColor: string, pageIconColor: string}}
|
|
222
|
+
*/
|
|
223
|
+
var getLegend = function getLegend(options) {
|
|
224
|
+
return _objectSpread({
|
|
225
|
+
type: 'scroll',
|
|
226
|
+
left: 'center',
|
|
227
|
+
itemGap: 12
|
|
228
|
+
}, options);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
/**
|
|
232
|
+
* 获取布局
|
|
233
|
+
* @param grid
|
|
234
|
+
* @param dataZoom
|
|
235
|
+
* @returns {*&{top: string, left: number, bottom: string, right: number, containLabel: boolean}}
|
|
236
|
+
*/
|
|
237
|
+
var getGrid = function getGrid(grid, dataZoom) {
|
|
238
|
+
return _objectSpread({
|
|
239
|
+
left: 5,
|
|
240
|
+
right: 5,
|
|
241
|
+
top: 35,
|
|
242
|
+
bottom: dataZoom !== null && dataZoom !== void 0 && dataZoom.show ? 30 : 10,
|
|
243
|
+
containLabel: true
|
|
244
|
+
}, grid);
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* 获取 xAxis 单项
|
|
249
|
+
* @param options 参数可以是: "[xx, xx]"、"{data: [xx, xx], ...}"
|
|
250
|
+
* @returns {{axisLabel: {textStyle: {color: string}}, data: *, axisLine: {lineStyle: {color: string}}, axisTick: {show: boolean}, type: string, boundaryGap: boolean}}
|
|
251
|
+
*/
|
|
252
|
+
var getXAxisItem = function getXAxisItem(options) {
|
|
253
|
+
var _ref = Array.isArray(options) ? {
|
|
254
|
+
data: options
|
|
255
|
+
} : options,
|
|
256
|
+
data = _ref.data,
|
|
257
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
258
|
+
return _objectSpread({
|
|
259
|
+
type: 'category',
|
|
260
|
+
boundaryGap: true,
|
|
261
|
+
// false 从0开始
|
|
262
|
+
axisTick: {
|
|
263
|
+
show: false
|
|
264
|
+
},
|
|
265
|
+
axisLabel: {
|
|
266
|
+
textStyle: {
|
|
267
|
+
fontSize: fontSize,
|
|
268
|
+
color: color
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
axisLine: {
|
|
272
|
+
show: true,
|
|
273
|
+
lineStyle: {
|
|
274
|
+
type: [3, 3],
|
|
275
|
+
dashOffset: 3,
|
|
276
|
+
color: '#E5E6EB'
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
data: data
|
|
280
|
+
}, other);
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* 获取 xAxis 配置
|
|
285
|
+
* @param xAxis 参数说明:"[xx, xx]"、"[[xx, xx], [xx, xx]]"、"[{data: [xx, xx], ...}]"
|
|
286
|
+
* @returns {(*&{axisLabel: {textStyle: {color: string}}, data, axisLine: {lineStyle: {color: string}}, axisTick: {show: boolean}, type: string, boundaryGap: boolean})|*[]}
|
|
287
|
+
*/
|
|
288
|
+
var getXAxis = function getXAxis(xAxis) {
|
|
289
|
+
if (xAxis) {
|
|
290
|
+
if (_typeof(xAxis[0]) === 'object') {
|
|
291
|
+
var _xAxis = [];
|
|
292
|
+
_xAxis.map(function (v) {
|
|
293
|
+
_xAxis.push(getXAxisItem(v));
|
|
294
|
+
});
|
|
295
|
+
return _xAxis;
|
|
296
|
+
}
|
|
297
|
+
return getXAxisItem(xAxis);
|
|
298
|
+
}
|
|
299
|
+
return {
|
|
300
|
+
show: false
|
|
301
|
+
};
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* 获取单个 yAxis 配置
|
|
306
|
+
* @param options 参数可以是:"xx"、"{name: 'xx', ...其他配置}"
|
|
307
|
+
* @returns {{axisLabel: {textStyle: {color: string}, showMaxLabel: boolean}, axisLine: {lineStyle: {color: string}}, axisTick: {show: boolean}, splitLine: {show: boolean}, nameTextStyle: {color: string}}}
|
|
308
|
+
*/
|
|
309
|
+
var getYAxisItem = function getYAxisItem(options) {
|
|
310
|
+
options = options || {};
|
|
311
|
+
var _ref2 = typeof options === 'string' ? {
|
|
312
|
+
name: options
|
|
313
|
+
} : options,
|
|
314
|
+
name = _ref2.name,
|
|
315
|
+
nameTextStyle = _ref2.nameTextStyle,
|
|
316
|
+
other = _objectWithoutProperties(_ref2, _excluded2);
|
|
317
|
+
return _objectSpread({
|
|
318
|
+
name: name,
|
|
319
|
+
axisLabel: {
|
|
320
|
+
textStyle: {
|
|
321
|
+
color: color,
|
|
322
|
+
fontSize: fontSize
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
axisLine: {
|
|
326
|
+
show: false,
|
|
327
|
+
lineStyle: {
|
|
328
|
+
color: '#E5E6EB',
|
|
329
|
+
width: 1
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
axisTick: {
|
|
333
|
+
show: false
|
|
334
|
+
},
|
|
335
|
+
splitLine: {
|
|
336
|
+
show: true,
|
|
337
|
+
lineStyle: {
|
|
338
|
+
type: [3, 3],
|
|
339
|
+
dashOffset: 3,
|
|
340
|
+
color: '#E5E6EB'
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
nameTextStyle: _objectSpread({
|
|
344
|
+
fontSize: fontSize,
|
|
345
|
+
color: color
|
|
346
|
+
}, nameTextStyle)
|
|
347
|
+
}, other);
|
|
348
|
+
};
|
|
349
|
+
|
|
350
|
+
/**
|
|
351
|
+
* 获取 yAxis 配置
|
|
352
|
+
* @param yAxis 参数可以是: "xx"、"['xx', 'xxx']"、"[{name: 'xx', ...其他配置}]"
|
|
353
|
+
* @returns {{axisLabel: {textStyle: {color: string}, showMaxLabel: boolean}, axisLine: {lineStyle: {color: string}}, axisTick: {show: boolean}, splitLine: {show: boolean}, nameTextStyle: {color: string}}|*[]}
|
|
354
|
+
*/
|
|
355
|
+
var getYAxis = function getYAxis(yAxis) {
|
|
356
|
+
if (yAxis) {
|
|
357
|
+
if (Array.isArray(yAxis)) {
|
|
358
|
+
var _yAxis = [];
|
|
359
|
+
yAxis.map(function (v, i) {
|
|
360
|
+
var options = typeof v === 'string' ? {
|
|
361
|
+
name: v
|
|
362
|
+
} : v;
|
|
363
|
+
_yAxis.push(getYAxisItem(_objectSpread({
|
|
364
|
+
nameTextStyle: {
|
|
365
|
+
padding: i === 0 ? [0, 30, 0, 0] : [0, 0, 0, 30]
|
|
366
|
+
}
|
|
367
|
+
}, options)));
|
|
368
|
+
});
|
|
369
|
+
return _yAxis;
|
|
370
|
+
}
|
|
371
|
+
return getYAxisItem(yAxis);
|
|
372
|
+
}
|
|
373
|
+
return {
|
|
374
|
+
show: false
|
|
375
|
+
};
|
|
376
|
+
};
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* 获取 折线图 数据项
|
|
380
|
+
* @param name
|
|
381
|
+
* @param data
|
|
382
|
+
* @param other
|
|
383
|
+
* @returns {*&{connectNulls: boolean, data, symbolSize: number, name, type: string, smooth: boolean}}
|
|
384
|
+
*/
|
|
385
|
+
var getLineSeries = function getLineSeries(_ref3) {
|
|
386
|
+
var name = _ref3.name,
|
|
387
|
+
data = _ref3.data,
|
|
388
|
+
other = _objectWithoutProperties(_ref3, _excluded3);
|
|
389
|
+
return _objectSpread({
|
|
390
|
+
type: 'line',
|
|
391
|
+
symbol: 'circle',
|
|
392
|
+
symbolSize: 0,
|
|
393
|
+
smooth: true,
|
|
394
|
+
connectNulls: true,
|
|
395
|
+
name: name,
|
|
396
|
+
data: data
|
|
397
|
+
}, other);
|
|
398
|
+
};
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* 获取 柱状图 数据项
|
|
402
|
+
* @param name
|
|
403
|
+
* @param data
|
|
404
|
+
* @param other
|
|
405
|
+
* @returns {*&{barMaxWidth: number, connectNulls: boolean, data, barMinWidth: number, name, type: string}}
|
|
406
|
+
*/
|
|
407
|
+
var getBarSeries = function getBarSeries(_ref4) {
|
|
408
|
+
var name = _ref4.name,
|
|
409
|
+
data = _ref4.data,
|
|
410
|
+
type = _ref4.type,
|
|
411
|
+
other = _objectWithoutProperties(_ref4, _excluded4);
|
|
412
|
+
// 特殊样式处理
|
|
413
|
+
return _objectSpread({
|
|
414
|
+
type: 'bar',
|
|
415
|
+
symbol: 'circle',
|
|
416
|
+
barMaxWidth: 20,
|
|
417
|
+
barMinWidth: 5,
|
|
418
|
+
connectNulls: true,
|
|
419
|
+
name: name,
|
|
420
|
+
data: data
|
|
421
|
+
}, other);
|
|
422
|
+
};
|
|
423
|
+
var getPictorialBar = function getPictorialBar(_ref5) {
|
|
424
|
+
var name = _ref5.name,
|
|
425
|
+
data = _ref5.data,
|
|
426
|
+
type = _ref5.type,
|
|
427
|
+
other = _objectWithoutProperties(_ref5, _excluded5);
|
|
428
|
+
return _objectSpread({
|
|
429
|
+
type: 'pictorialBar',
|
|
430
|
+
name: name,
|
|
431
|
+
data: data
|
|
432
|
+
}, other);
|
|
433
|
+
};
|
|
434
|
+
var getLingBarSeries = function getLingBarSeries(_ref6) {
|
|
435
|
+
var name = _ref6.name,
|
|
436
|
+
data = _ref6.data,
|
|
437
|
+
type = _ref6.type,
|
|
438
|
+
lingColor = _ref6.lingColor,
|
|
439
|
+
other = _objectWithoutProperties(_ref6, _excluded6);
|
|
440
|
+
return [_objectSpread({
|
|
441
|
+
type: 'bar',
|
|
442
|
+
barWidth: 20,
|
|
443
|
+
name: name,
|
|
444
|
+
data: data
|
|
445
|
+
}, other), {
|
|
446
|
+
name: name,
|
|
447
|
+
data: data,
|
|
448
|
+
type: 'pictorialBar',
|
|
449
|
+
barMaxWidth: 10,
|
|
450
|
+
symbol: 'diamond',
|
|
451
|
+
symbolOffset: [0, '50%'],
|
|
452
|
+
symbolSize: [20, 10],
|
|
453
|
+
itemStyle: {
|
|
454
|
+
color: getColor(lingColor || other.color)
|
|
455
|
+
},
|
|
456
|
+
silent: true,
|
|
457
|
+
// 图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
|
|
458
|
+
tooltip: {
|
|
459
|
+
show: false
|
|
460
|
+
},
|
|
461
|
+
legend: {
|
|
462
|
+
show: false
|
|
463
|
+
},
|
|
464
|
+
zlevel: 2
|
|
465
|
+
}, {
|
|
466
|
+
name: name,
|
|
467
|
+
data: data,
|
|
468
|
+
type: 'pictorialBar',
|
|
469
|
+
barMaxWidth: 10,
|
|
470
|
+
symbolPosition: 'end',
|
|
471
|
+
symbol: 'diamond',
|
|
472
|
+
symbolOffset: [0, '-50%'],
|
|
473
|
+
symbolSize: [20, 10],
|
|
474
|
+
itemStyle: {
|
|
475
|
+
color: getColor(lingColor || other.color)
|
|
476
|
+
},
|
|
477
|
+
silent: true,
|
|
478
|
+
// 图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
|
|
479
|
+
tooltip: {
|
|
480
|
+
show: false
|
|
481
|
+
},
|
|
482
|
+
legend: {
|
|
483
|
+
show: false
|
|
484
|
+
},
|
|
485
|
+
zlevel: 2
|
|
486
|
+
}];
|
|
487
|
+
};
|
|
488
|
+
var getNailBarSeries = function getNailBarSeries(_ref7) {
|
|
489
|
+
var type = _ref7.type,
|
|
490
|
+
color = _ref7.color,
|
|
491
|
+
barLabelConfig = _ref7.barLabelConfig,
|
|
492
|
+
other = _objectWithoutProperties(_ref7, _excluded7);
|
|
493
|
+
var _color = Array.isArray(color) ? color : [color, color];
|
|
494
|
+
return _objectSpread({
|
|
495
|
+
type: 'bar',
|
|
496
|
+
barWidth: 16,
|
|
497
|
+
label: _objectSpread({
|
|
498
|
+
show: true,
|
|
499
|
+
formatter: function formatter() {
|
|
500
|
+
return '';
|
|
501
|
+
},
|
|
502
|
+
position: 'top',
|
|
503
|
+
offset: [0, 4],
|
|
504
|
+
// 相对于数据点的偏移量,[水平偏移, 垂直偏移]
|
|
505
|
+
shadowColor: _color[0],
|
|
506
|
+
backgroundColor: _color[0],
|
|
507
|
+
shadowBlur: 10,
|
|
508
|
+
width: 20,
|
|
509
|
+
height: 4
|
|
510
|
+
}, barLabelConfig),
|
|
511
|
+
name: name,
|
|
512
|
+
color: color
|
|
513
|
+
}, other);
|
|
514
|
+
};
|
|
515
|
+
var getWordCloudSeries = function getWordCloudSeries(_ref8) {
|
|
516
|
+
var name = _ref8.name,
|
|
517
|
+
data = _ref8.data;
|
|
518
|
+
return [{
|
|
519
|
+
// name,
|
|
520
|
+
type: 'wordCloud',
|
|
521
|
+
//size: ['9%', '99%'],
|
|
522
|
+
sizeRange: [14, 50],
|
|
523
|
+
//textRotation: [0, 45, 90, -45],
|
|
524
|
+
rotationRange: [-45, 90],
|
|
525
|
+
shape: 'circle',
|
|
526
|
+
textPadding: 0,
|
|
527
|
+
width: '100%',
|
|
528
|
+
// 画布高
|
|
529
|
+
height: '100%',
|
|
530
|
+
autoSize: {
|
|
531
|
+
enable: true,
|
|
532
|
+
minSize: 6
|
|
533
|
+
},
|
|
534
|
+
textStyle: {
|
|
535
|
+
normal: {
|
|
536
|
+
color: function color() {
|
|
537
|
+
return "rgb(".concat(Math.round(Math.random() * 256), ",").concat(Math.round(Math.random() * 256), ",").concat(Math.round(Math.random() * 256), ")");
|
|
538
|
+
}
|
|
539
|
+
},
|
|
540
|
+
emphasis: {
|
|
541
|
+
shadowBlur: 2,
|
|
542
|
+
shadowColor: '#333'
|
|
543
|
+
}
|
|
544
|
+
},
|
|
545
|
+
data: data
|
|
546
|
+
}];
|
|
547
|
+
};
|
|
548
|
+
|
|
549
|
+
/**
|
|
550
|
+
* 获取 饼图 数据项
|
|
551
|
+
* @param name
|
|
552
|
+
* @param data
|
|
553
|
+
* @param other
|
|
554
|
+
* @returns {*&{connectNulls: boolean, data, symbolSize: number, name, type: string, smooth: boolean}}
|
|
555
|
+
*/
|
|
556
|
+
var getPieSeries = function getPieSeries(_ref9) {
|
|
557
|
+
var name = _ref9.name,
|
|
558
|
+
data = _ref9.data,
|
|
559
|
+
other = _objectWithoutProperties(_ref9, _excluded8);
|
|
560
|
+
return _objectSpread({
|
|
561
|
+
type: 'pie',
|
|
562
|
+
name: name,
|
|
563
|
+
data: data
|
|
564
|
+
}, other);
|
|
565
|
+
};
|
|
566
|
+
|
|
567
|
+
/**
|
|
568
|
+
* 获取 散点图 数据项
|
|
569
|
+
* @param name
|
|
570
|
+
* @param data
|
|
571
|
+
* @param other
|
|
572
|
+
* @returns {*&{connectNulls: boolean, data, symbolSize: number, name, type: string, smooth: boolean}}
|
|
573
|
+
*/
|
|
574
|
+
var getScatterSeries = function getScatterSeries(_ref10) {
|
|
575
|
+
var name = _ref10.name,
|
|
576
|
+
data = _ref10.data,
|
|
577
|
+
other = _objectWithoutProperties(_ref10, _excluded9);
|
|
578
|
+
return _objectSpread({
|
|
579
|
+
type: 'scatter',
|
|
580
|
+
name: name,
|
|
581
|
+
data: data
|
|
582
|
+
}, other);
|
|
583
|
+
};
|
|
584
|
+
|
|
585
|
+
/**
|
|
586
|
+
* 获取颜色
|
|
587
|
+
* @param color 参数可为:"#xxx", "['#xxx', '#xxx]"
|
|
588
|
+
* @returns {string|{x: number, y: number, y2: number, x2: number, global: boolean, colorStops: *[], type: string}}
|
|
589
|
+
*/
|
|
590
|
+
var getColor = function getColor(color) {
|
|
591
|
+
if (typeof color === 'string') {
|
|
592
|
+
return color;
|
|
593
|
+
} else if (Array.isArray(color)) {
|
|
594
|
+
var colorStops = [];
|
|
595
|
+
color.map(function (c, i) {
|
|
596
|
+
if (typeof c === 'string') {
|
|
597
|
+
colorStops.push({
|
|
598
|
+
offset: i,
|
|
599
|
+
color: color[i] // 0% 处的颜色
|
|
600
|
+
});
|
|
601
|
+
} else {
|
|
602
|
+
colorStops.push(_objectSpread({
|
|
603
|
+
offset: i,
|
|
604
|
+
color: c.color
|
|
605
|
+
}, c));
|
|
606
|
+
}
|
|
607
|
+
});
|
|
608
|
+
return {
|
|
609
|
+
type: 'linear',
|
|
610
|
+
x: 0,
|
|
611
|
+
y: 0,
|
|
612
|
+
x2: 0,
|
|
613
|
+
y2: 1,
|
|
614
|
+
colorStops: colorStops,
|
|
615
|
+
global: false // 缺省为 false
|
|
616
|
+
};
|
|
617
|
+
}
|
|
618
|
+
};
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* 获取区间渐变颜色
|
|
622
|
+
* @param color 参数可为:"#xxx", "['#xxx', '#xxx]"
|
|
623
|
+
* @returns {{color: {x: number, y: number, y2: number, globalCoord: boolean, x2: number, colorStops: [{offset: number, color: string},{offset: number, color: string}], type: string}}}
|
|
624
|
+
*/
|
|
625
|
+
exports.getColor = getColor;
|
|
626
|
+
var getAreaColor = function getAreaColor(color) {
|
|
627
|
+
var _ref11 = typeof color === 'string' ? [color, color] : color,
|
|
628
|
+
_ref12 = _slicedToArray(_ref11, 2),
|
|
629
|
+
start = _ref12[0],
|
|
630
|
+
end = _ref12[1];
|
|
631
|
+
return {
|
|
632
|
+
color: {
|
|
633
|
+
type: 'linear',
|
|
634
|
+
x: 0,
|
|
635
|
+
y: 0,
|
|
636
|
+
x2: 0,
|
|
637
|
+
y2: 1,
|
|
638
|
+
colorStops: [{
|
|
639
|
+
offset: 0,
|
|
640
|
+
color: start
|
|
641
|
+
} /*0% 处的颜色*/, {
|
|
642
|
+
offset: 1,
|
|
643
|
+
color: end
|
|
644
|
+
} /* 100% 处的颜色*/],
|
|
645
|
+
|
|
646
|
+
globalCoord: false // 缺省为 false
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
};
|
|
650
|
+
|
|
651
|
+
/**
|
|
652
|
+
* 获取数据
|
|
653
|
+
* @param series 参数:"{name, data, type, color, areaColor}"
|
|
654
|
+
* @returns {*[]}
|
|
655
|
+
*/
|
|
656
|
+
var getSeries = function getSeries(series) {
|
|
657
|
+
var _series = [];
|
|
658
|
+
var FUN_MAP = {
|
|
659
|
+
nailBar: getNailBarSeries,
|
|
660
|
+
// 钉子柱状图
|
|
661
|
+
bar: getBarSeries,
|
|
662
|
+
// 柱状图
|
|
663
|
+
lingBar: getLingBarSeries,
|
|
664
|
+
// 立体柱状图
|
|
665
|
+
line: getLineSeries,
|
|
666
|
+
// 折线图
|
|
667
|
+
pie: getPieSeries,
|
|
668
|
+
// 饼图
|
|
669
|
+
scatter: getScatterSeries,
|
|
670
|
+
//散点图
|
|
671
|
+
pictorialBar: getPictorialBar,
|
|
672
|
+
// 自定义样式的柱状图
|
|
673
|
+
wordCloud: getWordCloudSeries // 词云图
|
|
674
|
+
};
|
|
675
|
+
|
|
676
|
+
series.map(function (v) {
|
|
677
|
+
var type = v.type,
|
|
678
|
+
color = v.color,
|
|
679
|
+
areaColor = v.areaColor;
|
|
680
|
+
if (type === 'nailBar') {
|
|
681
|
+
color = color || ['rgba(88,139,240,0.6)', 'rgba(138,177,255,0.2)'];
|
|
682
|
+
}
|
|
683
|
+
var _seriesItem;
|
|
684
|
+
if (FUN_MAP[type]) {
|
|
685
|
+
_seriesItem = FUN_MAP[type](v);
|
|
686
|
+
} else {
|
|
687
|
+
//其他类型
|
|
688
|
+
_seriesItem = v;
|
|
689
|
+
}
|
|
690
|
+
// 自身颜色
|
|
691
|
+
if (color) {
|
|
692
|
+
if (Array.isArray(_seriesItem)) {
|
|
693
|
+
_seriesItem[0].itemStyle = _seriesItem[0].itemStyle || {};
|
|
694
|
+
_seriesItem[0].itemStyle.color = getColor(color);
|
|
695
|
+
} else {
|
|
696
|
+
_seriesItem.itemStyle = _seriesItem.itemStyle || {};
|
|
697
|
+
_seriesItem.itemStyle.color = getColor(color);
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
// 区间颜色
|
|
702
|
+
if (areaColor && areaColor.length) {
|
|
703
|
+
_seriesItem.areaStyle = getAreaColor(areaColor);
|
|
704
|
+
}
|
|
705
|
+
if (Array.isArray(_seriesItem)) {
|
|
706
|
+
_series.push.apply(_series, _toConsumableArray(_seriesItem));
|
|
707
|
+
} else {
|
|
708
|
+
_series.push(_seriesItem);
|
|
709
|
+
}
|
|
710
|
+
});
|
|
711
|
+
return _series;
|
|
712
|
+
};
|
|
713
|
+
var getDataZoom = function getDataZoom(options) {
|
|
714
|
+
var _dataZoom = [];
|
|
715
|
+
if (options !== null && options !== void 0 && options.show) {
|
|
716
|
+
_dataZoom = options !== null && options !== void 0 && options.otherDataZoom ? options.otherDataZoom : [{
|
|
717
|
+
type: 'slider',
|
|
718
|
+
filterMode: 'none',
|
|
719
|
+
height: 10,
|
|
720
|
+
textStyle: {
|
|
721
|
+
opacity: 0
|
|
722
|
+
},
|
|
723
|
+
startValue: 0,
|
|
724
|
+
// 开始的值
|
|
725
|
+
endValue: 100,
|
|
726
|
+
// 结束的值
|
|
727
|
+
bottom: 10
|
|
728
|
+
}, {
|
|
729
|
+
type: 'inside',
|
|
730
|
+
filterMode: 'none',
|
|
731
|
+
height: 10,
|
|
732
|
+
textStyle: {
|
|
733
|
+
opacity: 0
|
|
734
|
+
}
|
|
735
|
+
}];
|
|
736
|
+
}
|
|
737
|
+
return _dataZoom;
|
|
738
|
+
};
|
|
739
|
+
var Chart = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
740
|
+
var _option$series, _option$series$, _option$series$$data;
|
|
741
|
+
var _mergeConfigAndData = mergeConfigAndData(props || {}),
|
|
742
|
+
data = _mergeConfigAndData.data,
|
|
743
|
+
onEvents = _mergeConfigAndData.onEvents,
|
|
744
|
+
color = _mergeConfigAndData.color,
|
|
745
|
+
legend = _mergeConfigAndData.legend,
|
|
746
|
+
_mergeConfigAndData$u = _mergeConfigAndData.unit,
|
|
747
|
+
unit = _mergeConfigAndData$u === void 0 ? '' : _mergeConfigAndData$u,
|
|
748
|
+
tooltip = _mergeConfigAndData.tooltip,
|
|
749
|
+
grid = _mergeConfigAndData.grid,
|
|
750
|
+
xAxis = _mergeConfigAndData.xAxis,
|
|
751
|
+
yAxis = _mergeConfigAndData.yAxis,
|
|
752
|
+
_mergeConfigAndData$h = _mergeConfigAndData.height,
|
|
753
|
+
height = _mergeConfigAndData$h === void 0 ? '100%' : _mergeConfigAndData$h,
|
|
754
|
+
series = _mergeConfigAndData.series,
|
|
755
|
+
_mergeConfigAndData$l = _mergeConfigAndData.loading,
|
|
756
|
+
loading = _mergeConfigAndData$l === void 0 ? false : _mergeConfigAndData$l,
|
|
757
|
+
title = _mergeConfigAndData.title,
|
|
758
|
+
dataZoom = _mergeConfigAndData.dataZoom,
|
|
759
|
+
noDataText = _mergeConfigAndData.noDataText,
|
|
760
|
+
_mergeConfigAndData$s = _mergeConfigAndData.style,
|
|
761
|
+
style = _mergeConfigAndData$s === void 0 ? {} : _mergeConfigAndData$s,
|
|
762
|
+
_mergeConfigAndData$i = _mergeConfigAndData.imgStyle,
|
|
763
|
+
imgStyle = _mergeConfigAndData$i === void 0 ? {} : _mergeConfigAndData$i,
|
|
764
|
+
_mergeConfigAndData$n = _mergeConfigAndData.noDataStyle,
|
|
765
|
+
noDataStyle = _mergeConfigAndData$n === void 0 ? {} : _mergeConfigAndData$n,
|
|
766
|
+
other = _objectWithoutProperties(_mergeConfigAndData, _excluded10);
|
|
767
|
+
var option = _objectSpread({
|
|
768
|
+
title: title,
|
|
769
|
+
legend: getLegend(legend),
|
|
770
|
+
tooltip: getTooltip(tooltip, unit || (typeof yAxis === 'string' ? yAxis : ''), series),
|
|
771
|
+
grid: getGrid(grid, dataZoom),
|
|
772
|
+
xAxis: getXAxis(xAxis),
|
|
773
|
+
yAxis: getYAxis(yAxis),
|
|
774
|
+
series: getSeries(series),
|
|
775
|
+
dataZoom: getDataZoom(dataZoom)
|
|
776
|
+
}, other);
|
|
777
|
+
if (color) {
|
|
778
|
+
option.color = color;
|
|
779
|
+
}
|
|
780
|
+
var chartRef = (0, _react.useRef)({});
|
|
781
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
|
782
|
+
return _objectSpread({}, chartRef.current);
|
|
783
|
+
});
|
|
784
|
+
|
|
785
|
+
// 解决 echarts 点击空白地方不生效的问题
|
|
786
|
+
var onClick = function onClick(e) {
|
|
787
|
+
if (onEvents !== null && onEvents !== void 0 && onEvents.onClick) {
|
|
788
|
+
var _chartRef$current, _chartRef$current$get;
|
|
789
|
+
var chart = (_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 ? void 0 : (_chartRef$current$get = _chartRef$current.getEchartsInstance) === null || _chartRef$current$get === void 0 ? void 0 : _chartRef$current$get.call(_chartRef$current);
|
|
790
|
+
if (chart) {
|
|
791
|
+
var rect = chart.getDom().getBoundingClientRect();
|
|
792
|
+
var x = e.clientX - rect.left;
|
|
793
|
+
var y = e.clientY - rect.top;
|
|
794
|
+
var pointInPixel = [x, y];
|
|
795
|
+
if (chart.containPixel('grid', pointInPixel)) {
|
|
796
|
+
var xIndex = chart.convertFromPixel({
|
|
797
|
+
seriesIndex: 0
|
|
798
|
+
}, [x, y])[0];
|
|
799
|
+
onEvents === null || onEvents === void 0 ? void 0 : onEvents.onClick(xIndex);
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
};
|
|
804
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
805
|
+
className: _index["default"].chartWrap,
|
|
806
|
+
onClick: onClick,
|
|
807
|
+
style: _objectSpread({
|
|
808
|
+
height: height,
|
|
809
|
+
width: '100%'
|
|
810
|
+
}, style)
|
|
811
|
+
}, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
812
|
+
spinning: loading
|
|
813
|
+
}, (_option$series = option.series) !== null && _option$series !== void 0 && (_option$series$ = _option$series[0]) !== null && _option$series$ !== void 0 && (_option$series$$data = _option$series$.data) !== null && _option$series$$data !== void 0 && _option$series$$data.length ? /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
|
|
814
|
+
ref: chartRef,
|
|
815
|
+
option: option,
|
|
816
|
+
notMerge: true,
|
|
817
|
+
lazyUpdate: true,
|
|
818
|
+
style: {
|
|
819
|
+
height: height || '100%'
|
|
820
|
+
},
|
|
821
|
+
onEvents: onEvents
|
|
822
|
+
}) : /*#__PURE__*/_react["default"].createElement("div", null, "11")));
|
|
823
|
+
}), function (prevProps, nextProps) {
|
|
824
|
+
// 这个函数用于比较前后两个props是否相同
|
|
825
|
+
// 如果相同,则不会重新渲染
|
|
826
|
+
return JSON.stringify(prevProps) === JSON.stringify(nextProps);
|
|
827
|
+
});
|
|
828
|
+
var _default = Chart;
|
|
829
|
+
exports["default"] = _default;
|
|
830
|
+
//# sourceMappingURL=index.js.map
|