syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
634 lines (611 loc) • 43.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _react = _interopRequireWildcard(require("react"));
require("./index.scss");
var _variables = require("../../variables");
var _lodash = _interopRequireDefault(require("lodash"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var SliceLength = 500; //数据分段展示限制长度
var ChartLine = function ChartLine(props) {
var chartDomRef = (0, _react.useRef)(null);
var myChartRef = (0, _react.useRef)(null);
var lastDataRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(null),
error = _useState[0],
setError = _useState[1];
(0, _react.useEffect)(function () {
if (chartDomRef.current) {
var _window$echarts;
console.log("初始化折线图", window.echarts);
//主题不能设置成 light，否则 color组设置无效 (但是设置成dark可以，这里暂时用null)
myChartRef.current = (_window$echarts = window.echarts) === null || _window$echarts === void 0 ? void 0 : _window$echarts.init(chartDomRef.current, null, {
locale: 'ZH'
});
//点击事件
if (props.onChartLineItemClick) {
var _myChartRef$current;
(_myChartRef$current = myChartRef.current) === null || _myChartRef$current === void 0 ? void 0 : _myChartRef$current.on('click', function (params) {
var _props$onChartLineIte;
(_props$onChartLineIte = props.onChartLineItemClick) === null || _props$onChartLineIte === void 0 ? void 0 : _props$onChartLineIte.call(props, params);
});
}
if (lastDataRef.current) {
//去绘制
showValue(lastDataRef.current);
}
}
return function () {
var _myChartRef$current2;
console.log("卸载折线图");
(_myChartRef$current2 = myChartRef.current) === null || _myChartRef$current2 === void 0 ? void 0 : _myChartRef$current2.dispose();
};
}, [chartDomRef.current]);
(0, _react.useEffect)(function () {
if (props.dataSource) {
showValue(props.dataSource);
}
}, [JSON.stringify(props.contentParams), JSON.stringify(props.dataSource)]);
//组装Echart 折线图的配置项
var getChartOption = function getChartOption() {
var _contentParams$lineSp, _contentParams$usual, _contentParams$legend, _option$tooltip, _contentParams$theme, _contentParams$theme2, _contentParams$usual2;
var contentParams = props.contentParams;
var option = {
grid: {
left: '10',
right: '10',
bottom: '10',
top: '10',
containLabel: true
},
xAxis: Object.assign({}, contentParams === null || contentParams === void 0 ? void 0 : contentParams.xAxis),
yAxis: Object.assign({}, contentParams === null || contentParams === void 0 ? void 0 : contentParams.yAxis)
};
var axisType = 'category';
if (contentParams !== null && contentParams !== void 0 && (_contentParams$lineSp = contentParams.lineSpecial) !== null && _contentParams$lineSp !== void 0 && _contentParams$lineSp._timeAxis) {
//改成时间轴
axisType = 'time';
}
//是否x,y翻转
if ((contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$usual = contentParams.usual) === null || _contentParams$usual === void 0 ? void 0 : _contentParams$usual._categoryWhere) === 'y') {
option.xAxis = Object.assign(option.xAxis, {
type: 'value'
});
option.yAxis = Object.assign(option.yAxis, {
type: axisType
});
} else {
option.xAxis = Object.assign(option.xAxis, {
type: axisType
});
option.yAxis = Object.assign(option.yAxis, {
type: 'value'
});
}
//图例
option.legend = contentParams === null || contentParams === void 0 ? void 0 : contentParams.legend;
switch (contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$legend = contentParams.legend) === null || _contentParams$legend === void 0 ? void 0 : _contentParams$legend._position) {
case 'top':
option.legend = Object.assign(option.legend, {
top: '5%',
left: 'center'
});
break;
case 'bottom':
option.legend = Object.assign(option.legend, {
bottom: '5%',
left: 'center'
});
break;
case 'left':
option.legend = Object.assign(option.legend, {
top: 'center',
left: '5%'
});
break;
case 'right':
option.legend = Object.assign(option.legend, {
top: 'center',
right: '5%'
});
break;
case 'topLeft':
option.legend = Object.assign(option.legend, {
top: '5%',
left: '5%'
});
break;
case 'topRight':
option.legend = Object.assign(option.legend, {
top: '5%',
right: '5%'
});
break;
case 'bottomLeft':
option.legend = Object.assign(option.legend, {
bottom: '5%',
left: '5%'
});
break;
case 'bottomRight':
option.legend = Object.assign(option.legend, {
bottom: '5%',
right: '5%'
});
break;
case 'center':
option.legend = Object.assign(option.legend, {
top: 'center',
left: 'center'
});
break;
}
//tooltip
option.tooltip = contentParams === null || contentParams === void 0 ? void 0 : contentParams.tooltip;
if ((_option$tooltip = option.tooltip) !== null && _option$tooltip !== void 0 && _option$tooltip._showPercentage) {
var _option$tooltip2, _option$tooltip2$text, _contentParams$lineSp2;
var color = ((_option$tooltip2 = option.tooltip) === null || _option$tooltip2 === void 0 ? void 0 : (_option$tooltip2$text = _option$tooltip2.textStyle) === null || _option$tooltip2$text === void 0 ? void 0 : _option$tooltip2$text.color) || 'inherit';
var ifTimeAxis = contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$lineSp2 = contentParams.lineSpecial) === null || _contentParams$lineSp2 === void 0 ? void 0 : _contentParams$lineSp2._timeAxis;
option.tooltip.formatter = function (params) {
// console.log(params)
if (Array.isArray(params)) {
var _params$, _params$4, _params$5;
var total = 0;
var firstData = (_params$ = params[0]) === null || _params$ === void 0 ? void 0 : _params$.data;
if (Array.isArray(firstData)) {
//数组一定不是时间轴模式，不用判断ifTimeAxis
firstData.forEach(function (each, i) {
if (i !== 0) {
total += each;
}
});
} else {
if (ifTimeAxis) {
var _params$2;
(_params$2 = params[0]) === null || _params$2 === void 0 ? void 0 : _params$2.dimensionNames.forEach(function (each, i) {
//时间轴，时间与系列交替
if (i % 2 !== 0) {
total += firstData[each] || 0;
}
});
} else {
var _params$3;
(_params$3 = params[0]) === null || _params$3 === void 0 ? void 0 : _params$3.dimensionNames.forEach(function (each, i) {
//类目轴，去掉第一个维度项
if (i !== 0) {
total += firstData[each] || 0;
}
});
}
}
return "<div>\n <div style=\"color: " + color + "\">" + (((_params$4 = params[0]) === null || _params$4 === void 0 ? void 0 : _params$4.name) || ((_params$5 = params[0]) === null || _params$5 === void 0 ? void 0 : _params$5.axisValueLabel)) + "</div>\n " + params.map(function (eachSeriesItem) {
var eachSeriesItemValue;
if (Array.isArray(eachSeriesItem.data)) {
eachSeriesItemValue = eachSeriesItem.value[eachSeriesItem.seriesIndex + 1];
} else {
if (ifTimeAxis) {
eachSeriesItemValue = eachSeriesItem.value[eachSeriesItem.dimensionNames[eachSeriesItem.seriesIndex * 2 + 1]];
} else {
eachSeriesItemValue = eachSeriesItem.value[eachSeriesItem.dimensionNames[eachSeriesItem.seriesIndex + 1]];
}
}
return "<div style=\"color: " + color + ";display: flex;justify-content: space-between;gap: 15px\">\n <span>\n " + eachSeriesItem.marker + "\n <span>" + eachSeriesItem.seriesName + "</span>\n </span>\n <span>\n <span style=\"font-weight: bold\">" + (eachSeriesItemValue || 0) + "</span>\n <span> (" + ((eachSeriesItemValue || 0) * 100 / total).toFixed(1) + "%)</span>\n </span>\n </div>";
}).join('') + "\n </div>";
} else {
var _total = 0;
if (Array.isArray(params === null || params === void 0 ? void 0 : params.data)) {
params === null || params === void 0 ? void 0 : params.data.forEach(function (each, i) {
if (i !== 0) {
_total += each;
}
});
} else {
if (ifTimeAxis) {
params === null || params === void 0 ? void 0 : params.dimensionNames.forEach(function (each, i) {
if (i % 2 !== 0) {
_total += (params === null || params === void 0 ? void 0 : params.data[each]) || 0;
}
});
} else {
params === null || params === void 0 ? void 0 : params.dimensionNames.forEach(function (each, i) {
if (i !== 0) {
_total += (params === null || params === void 0 ? void 0 : params.data[each]) || 0;
}
});
}
}
var eachSeriesItemValue;
if (Array.isArray(params.data)) {
eachSeriesItemValue = params.value[params.seriesIndex + 1];
} else {
if (ifTimeAxis) {
eachSeriesItemValue = params.value[params.dimensionNames[params.seriesIndex * 2 + 1]];
} else {
eachSeriesItemValue = params.value[params.dimensionNames[params.seriesIndex + 1]];
}
}
return "<div>\n <div style=\"color: " + color + "\">" + (params === null || params === void 0 ? void 0 : params.name) + "</div>\n <div style=\"color: " + color + ";display: flex;justify-content: space-between;gap: 15px\">\n <span>\n " + params.marker + "\n <span>" + params.seriesName + "</span>\n </span>\n <span>\n <span style=\"font-weight: bold\">" + (eachSeriesItemValue || 0) + "</span>\n <span> (" + ((eachSeriesItemValue || 0) * 100 / _total).toFixed(1) + "%)</span>\n </span>\n </div>\n </div>";
}
};
}
//颜色
option.backgroundColor = contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$theme = contentParams.theme) === null || _contentParams$theme === void 0 ? void 0 : _contentParams$theme.backgroundColor;
if (contentParams !== null && contentParams !== void 0 && (_contentParams$theme2 = contentParams.theme) !== null && _contentParams$theme2 !== void 0 && _contentParams$theme2.color) {
var _contentParams$theme3;
option.color = contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$theme3 = contentParams.theme) === null || _contentParams$theme3 === void 0 ? void 0 : _contentParams$theme3.color.map(function (eachColor) {
if (typeof eachColor === 'string' || !eachColor) {
return eachColor;
} else {
var obj = {
type: eachColor.type,
x: 0,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: eachColor.colorStops[0] // 0% 处的颜色
}, {
offset: 1,
color: eachColor.colorStops[1] // 100% 处的颜色
}],
global: false // 缺省为 false
};
if (eachColor.direction === 'horizontal') {
obj.x2 = 1;
} else {
obj.y2 = 1;
}
return obj;
}
});
}
//网格布局
option.grid = contentParams === null || contentParams === void 0 ? void 0 : (_contentParams$usual2 = contentParams.usual) === null || _contentParams$usual2 === void 0 ? void 0 : _contentParams$usual2.grid;
return option;
};
//展示数据
var showValue = function showValue(data) {
var _props$contentParams, _props$contentParams2, _props$contentParams3;
lastDataRef.current = _lodash["default"].cloneDeep(data);
var limitNum = (props === null || props === void 0 ? void 0 : (_props$contentParams = props.contentParams) === null || _props$contentParams === void 0 ? void 0 : _props$contentParams.limitNum) || SliceLength;
if ((data === null || data === void 0 ? void 0 : data.length) > limitNum) {
setError("\u6570\u636E\u91CF\u8D85\u8FC7" + limitNum + "\u6761\uFF0C\u4E0D\u4E88\u4EE5\u5C55\u793A\uFF0C\u8BF7\u4F18\u5316\u6570\u636E\u6216\u4FEE\u6539\u914D\u7F6E");
return;
}
//另一种格式的数据的判断
if (props !== null && props !== void 0 && (_props$contentParams2 = props.contentParams) !== null && _props$contentParams2 !== void 0 && (_props$contentParams3 = _props$contentParams2.dataSetConfig) !== null && _props$contentParams3 !== void 0 && _props$contentParams3.labelField) {
var _data$props$contentPa, _props$contentParams4, _props$contentParams5;
if ((data === null || data === void 0 ? void 0 : (_data$props$contentPa = data[props === null || props === void 0 ? void 0 : (_props$contentParams4 = props.contentParams) === null || _props$contentParams4 === void 0 ? void 0 : (_props$contentParams5 = _props$contentParams4.dataSetConfig) === null || _props$contentParams5 === void 0 ? void 0 : _props$contentParams5.labelField]) === null || _data$props$contentPa === void 0 ? void 0 : _data$props$contentPa.length) > limitNum) {
setError("\u6570\u636E\u91CF\u8D85\u8FC7" + limitNum + "\u6761\uFF0C\u4E0D\u4E88\u4EE5\u5C55\u793A\uFF0C\u8BF7\u4F18\u5316\u6570\u636E\u6216\u4FEE\u6539\u914D\u7F6E");
return;
}
}
var option = getChartOption();
if (props !== null && props !== void 0 && props.contentParams) {
var _props$contentParams6, _props$contentParams7, _props$contentParams11, _props$contentParams12, _props$contentParams13, _props$contentParams14, _props$contentParams15, _props$contentParams16, _props$contentParams17, _props$contentParams18, _props$contentParams20, _props$contentParams21, _props$contentParams26, _props$contentParams27, _props$contentParams29, _props$contentParams34, _props$contentParams35, _props$contentParams36, _props$contentParams52, _props$contentParams53, _props$contentParams54, _props$contentParams67, _props$contentParams68;
var seriesItem = {
type: 'line'
};
//面积模式
if (props !== null && props !== void 0 && (_props$contentParams6 = props.contentParams) !== null && _props$contentParams6 !== void 0 && (_props$contentParams7 = _props$contentParams6.areaStyle) !== null && _props$contentParams7 !== void 0 && _props$contentParams7.show) {
var _props$contentParams8, _props$contentParams9;
seriesItem.areaStyle = {
opacity: (props === null || props === void 0 ? void 0 : (_props$contentParams8 = props.contentParams) === null || _props$contentParams8 === void 0 ? void 0 : _props$contentParams8.areaStyle.opacity) / 100
};
if (props !== null && props !== void 0 && (_props$contentParams9 = props.contentParams) !== null && _props$contentParams9 !== void 0 && _props$contentParams9.areaStyle.color) {
var _props$contentParams10;
seriesItem.areaStyle.color = props === null || props === void 0 ? void 0 : (_props$contentParams10 = props.contentParams) === null || _props$contentParams10 === void 0 ? void 0 : _props$contentParams10.areaStyle.color;
}
}
//折线特殊配置
switch (props === null || props === void 0 ? void 0 : (_props$contentParams11 = props.contentParams) === null || _props$contentParams11 === void 0 ? void 0 : (_props$contentParams12 = _props$contentParams11.lineSpecial) === null || _props$contentParams12 === void 0 ? void 0 : _props$contentParams12._transition) {
case 'normal':
break;
case 'smooth':
seriesItem.smooth = true;
break;
case 'step':
seriesItem.step = 'middle';
break;
}
//平均线
if (props !== null && props !== void 0 && (_props$contentParams13 = props.contentParams) !== null && _props$contentParams13 !== void 0 && (_props$contentParams14 = _props$contentParams13.lineSpecial) !== null && _props$contentParams14 !== void 0 && _props$contentParams14._averageLine) {
seriesItem.markLine = {
data: [{
type: 'average',
name: 'Avg'
}]
};
}
//最大最小值
if (props !== null && props !== void 0 && (_props$contentParams15 = props.contentParams) !== null && _props$contentParams15 !== void 0 && (_props$contentParams16 = _props$contentParams15.lineSpecial) !== null && _props$contentParams16 !== void 0 && _props$contentParams16._maxMinPoint) {
seriesItem.markPoint = {
data: [{
type: 'max',
name: 'Max'
}, {
type: 'min',
name: 'Min'
}]
};
}
//数据点图标
if (props !== null && props !== void 0 && (_props$contentParams17 = props.contentParams) !== null && _props$contentParams17 !== void 0 && (_props$contentParams18 = _props$contentParams17.lineSpecial) !== null && _props$contentParams18 !== void 0 && _props$contentParams18._symbolSet) {
var _props$contentParams19;
seriesItem = Object.assign(seriesItem, props === null || props === void 0 ? void 0 : (_props$contentParams19 = props.contentParams) === null || _props$contentParams19 === void 0 ? void 0 : _props$contentParams19.lineSpecial._symbolSet);
}
//折线样式
if (props !== null && props !== void 0 && (_props$contentParams20 = props.contentParams) !== null && _props$contentParams20 !== void 0 && (_props$contentParams21 = _props$contentParams20.lineSpecial) !== null && _props$contentParams21 !== void 0 && _props$contentParams21._lineType) {
var _props$contentParams22, _props$contentParams23, _props$contentParams24, _props$contentParams25;
seriesItem.lineStyle = {
type: props === null || props === void 0 ? void 0 : (_props$contentParams22 = props.contentParams) === null || _props$contentParams22 === void 0 ? void 0 : (_props$contentParams23 = _props$contentParams22.lineSpecial) === null || _props$contentParams23 === void 0 ? void 0 : _props$contentParams23._lineType,
width: props === null || props === void 0 ? void 0 : (_props$contentParams24 = props.contentParams) === null || _props$contentParams24 === void 0 ? void 0 : (_props$contentParams25 = _props$contentParams24.lineSpecial) === null || _props$contentParams25 === void 0 ? void 0 : _props$contentParams25._lineWidth
};
}
//数据堆叠
if (props !== null && props !== void 0 && (_props$contentParams26 = props.contentParams) !== null && _props$contentParams26 !== void 0 && (_props$contentParams27 = _props$contentParams26.stackSet) !== null && _props$contentParams27 !== void 0 && _props$contentParams27.show) {
var _props$contentParams28;
seriesItem = Object.assign(seriesItem, props === null || props === void 0 ? void 0 : (_props$contentParams28 = props.contentParams) === null || _props$contentParams28 === void 0 ? void 0 : _props$contentParams28.stackSet);
}
//标签
if (props !== null && props !== void 0 && (_props$contentParams29 = props.contentParams) !== null && _props$contentParams29 !== void 0 && _props$contentParams29.label) {
var _props$contentParams30, _props$contentParams31, _props$contentParams32, _props$contentParams33;
seriesItem.label = {
show: props === null || props === void 0 ? void 0 : (_props$contentParams30 = props.contentParams) === null || _props$contentParams30 === void 0 ? void 0 : _props$contentParams30.label.show,
color: (props === null || props === void 0 ? void 0 : (_props$contentParams31 = props.contentParams) === null || _props$contentParams31 === void 0 ? void 0 : _props$contentParams31.label.color) || 'inherit',
position: props === null || props === void 0 ? void 0 : (_props$contentParams32 = props.contentParams) === null || _props$contentParams32 === void 0 ? void 0 : _props$contentParams32.label.position
};
switch (props === null || props === void 0 ? void 0 : (_props$contentParams33 = props.contentParams) === null || _props$contentParams33 === void 0 ? void 0 : _props$contentParams33.label._showPlan) {
case 'normal':
break;
case 'pop':
seriesItem.label.padding = 5;
seriesItem.label.backgroundColor = 'rgba(255, 255, 255, 0.3)';
seriesItem.label.borderRadius = 100;
break;
case 'popDark':
seriesItem.label.padding = 5;
seriesItem.label.backgroundColor = 'rgba(0, 0, 0, 0.3)';
seriesItem.label.borderRadius = 100;
break;
}
}
//高亮配置
seriesItem.emphasis = {};
//高亮下的面积
if (props !== null && props !== void 0 && (_props$contentParams34 = props.contentParams) !== null && _props$contentParams34 !== void 0 && (_props$contentParams35 = _props$contentParams34.areaStyle) !== null && _props$contentParams35 !== void 0 && (_props$contentParams36 = _props$contentParams35._emphasisSel) !== null && _props$contentParams36 !== void 0 && _props$contentParams36.length) {
var _props$contentParams37, _props$contentParams38, _props$contentParams39, _props$contentParams46, _props$contentParams47, _props$contentParams48;
//先继承基础值
seriesItem.emphasis.areaStyle = _lodash["default"].cloneDeep(seriesItem.areaStyle);
if (props !== null && props !== void 0 && (_props$contentParams37 = props.contentParams) !== null && _props$contentParams37 !== void 0 && (_props$contentParams38 = _props$contentParams37.areaStyle) !== null && _props$contentParams38 !== void 0 && (_props$contentParams39 = _props$contentParams38._emphasisSel) !== null && _props$contentParams39 !== void 0 && _props$contentParams39.includes('color')) {
var _props$contentParams40, _props$contentParams41, _props$contentParams42;
//需要设置颜色，但颜色不一定配置了
if (props !== null && props !== void 0 && (_props$contentParams40 = props.contentParams) !== null && _props$contentParams40 !== void 0 && (_props$contentParams41 = _props$contentParams40.areaStyle) !== null && _props$contentParams41 !== void 0 && (_props$contentParams42 = _props$contentParams41._emphasis) !== null && _props$contentParams42 !== void 0 && _props$contentParams42.color) {
var _props$contentParams43, _props$contentParams44, _props$contentParams45;
seriesItem.emphasis.areaStyle.color = props === null || props === void 0 ? void 0 : (_props$contentParams43 = props.contentParams) === null || _props$contentParams43 === void 0 ? void 0 : (_props$contentParams44 = _props$contentParams43.areaStyle) === null || _props$contentParams44 === void 0 ? void 0 : (_props$contentParams45 = _props$contentParams44._emphasis) === null || _props$contentParams45 === void 0 ? void 0 : _props$contentParams45.color;
} else {
delete seriesItem.emphasis.areaStyle.color;
}
}
if (props !== null && props !== void 0 && (_props$contentParams46 = props.contentParams) !== null && _props$contentParams46 !== void 0 && (_props$contentParams47 = _props$contentParams46.areaStyle) !== null && _props$contentParams47 !== void 0 && (_props$contentParams48 = _props$contentParams47._emphasisSel) !== null && _props$contentParams48 !== void 0 && _props$contentParams48.includes('opacity')) {
var _props$contentParams49, _props$contentParams50, _props$contentParams51;
seriesItem.emphasis.areaStyle.opacity = (props === null || props === void 0 ? void 0 : (_props$contentParams49 = props.contentParams) === null || _props$contentParams49 === void 0 ? void 0 : (_props$contentParams50 = _props$contentParams49.areaStyle) === null || _props$contentParams50 === void 0 ? void 0 : (_props$contentParams51 = _props$contentParams50._emphasis) === null || _props$contentParams51 === void 0 ? void 0 : _props$contentParams51.opacity) / 100;
}
}
//高亮下的标签
if (props !== null && props !== void 0 && (_props$contentParams52 = props.contentParams) !== null && _props$contentParams52 !== void 0 && (_props$contentParams53 = _props$contentParams52.label) !== null && _props$contentParams53 !== void 0 && (_props$contentParams54 = _props$contentParams53._emphasisSel) !== null && _props$contentParams54 !== void 0 && _props$contentParams54.length) {
var _props$contentParams55, _props$contentParams56, _props$contentParams57, _props$contentParams61, _props$contentParams62, _props$contentParams63;
//先继承基础值
seriesItem.emphasis.label = _lodash["default"].cloneDeep(seriesItem.label);
if (props !== null && props !== void 0 && (_props$contentParams55 = props.contentParams) !== null && _props$contentParams55 !== void 0 && (_props$contentParams56 = _props$contentParams55.label) !== null && _props$contentParams56 !== void 0 && (_props$contentParams57 = _props$contentParams56._emphasisSel) !== null && _props$contentParams57 !== void 0 && _props$contentParams57.includes('color')) {
var _props$contentParams58, _props$contentParams59, _props$contentParams60;
seriesItem.emphasis.label.color = (props === null || props === void 0 ? void 0 : (_props$contentParams58 = props.contentParams) === null || _props$contentParams58 === void 0 ? void 0 : (_props$contentParams59 = _props$contentParams58.label) === null || _props$contentParams59 === void 0 ? void 0 : (_props$contentParams60 = _props$contentParams59._emphasis) === null || _props$contentParams60 === void 0 ? void 0 : _props$contentParams60.color) || 'inherit';
}
if (props !== null && props !== void 0 && (_props$contentParams61 = props.contentParams) !== null && _props$contentParams61 !== void 0 && (_props$contentParams62 = _props$contentParams61.label) !== null && _props$contentParams62 !== void 0 && (_props$contentParams63 = _props$contentParams62._emphasisSel) !== null && _props$contentParams63 !== void 0 && _props$contentParams63.includes('show')) {
var _props$contentParams64, _props$contentParams65, _props$contentParams66;
if (props !== null && props !== void 0 && (_props$contentParams64 = props.contentParams) !== null && _props$contentParams64 !== void 0 && (_props$contentParams65 = _props$contentParams64.label) !== null && _props$contentParams65 !== void 0 && (_props$contentParams66 = _props$contentParams65._emphasis) !== null && _props$contentParams66 !== void 0 && _props$contentParams66.show) {
seriesItem.emphasis.label.show = true;
} else {
seriesItem.emphasis.label.show = false;
}
}
}
//根据数据和配置填充其它属性
option.dataset = {};
option.series = [];
var newDataForTimeAxis = [];
if (props !== null && props !== void 0 && (_props$contentParams67 = props.contentParams) !== null && _props$contentParams67 !== void 0 && (_props$contentParams68 = _props$contentParams67.dataSetConfig) !== null && _props$contentParams68 !== void 0 && _props$contentParams68.labelField) {
var _props$contentParams69, _props$contentParams70, _props$contentParams83, _props$contentParams84, _props$contentParams85, _props$contentParams86, _props$contentParams87, _props$contentParams94, _props$contentParams95, _props$contentParams96;
var dim = [];
if (props !== null && props !== void 0 && (_props$contentParams69 = props.contentParams) !== null && _props$contentParams69 !== void 0 && (_props$contentParams70 = _props$contentParams69.lineSpecial) !== null && _props$contentParams70 !== void 0 && _props$contentParams70._timeAxis) {
var _props$contentParams$2;
//时间轴
var needFillTimeAxis = true;
if (Array.isArray(data)) {
newDataForTimeAxis = _lodash["default"].cloneDeep(data);
} else {
var _data$props$contentPa2;
//对象模式，直接组装出所需格式
needFillTimeAxis = false;
if ((_data$props$contentPa2 = data[props.contentParams.dataSetConfig.labelField]) !== null && _data$props$contentPa2 !== void 0 && _data$props$contentPa2.length) {
data[props.contentParams.dataSetConfig.labelField].forEach(function (timeValue, timeIndex) {
var _props$contentParams$;
var dataItem = {};
(_props$contentParams$ = props.contentParams.dataSetConfig.lineArr) === null || _props$contentParams$ === void 0 ? void 0 : _props$contentParams$.forEach(function (lineSet, lineIndex) {
if (lineSet) {
var _data$lineSet$field;
var timeMark = '系列' + (lineIndex + 1);
dataItem[timeMark] = timeValue;
dataItem[lineSet.field] = (_data$lineSet$field = data[lineSet.field]) === null || _data$lineSet$field === void 0 ? void 0 : _data$lineSet$field[timeIndex];
}
});
newDataForTimeAxis.push(dataItem);
});
}
}
(_props$contentParams$2 = props.contentParams.dataSetConfig.lineArr) === null || _props$contentParams$2 === void 0 ? void 0 : _props$contentParams$2.forEach(function (lineSet, lineIndex) {
if (lineSet) {
var _lineSet$extraStyle, _props$contentParams71, _props$contentParams72;
var timeMark = '系列' + (lineIndex + 1);
if (needFillTimeAxis) {
//补上独立的时间
newDataForTimeAxis.forEach(function (eachItem) {
eachItem[timeMark] = eachItem[props.contentParams.dataSetConfig.labelField];
});
}
dim.push({
name: timeMark,
displayName: '',
type: 'time'
});
dim.push({
name: lineSet.field,
type: 'number'
});
var newSeriesItem = _lodash["default"].cloneDeep(seriesItem);
if ((_lineSet$extraStyle = lineSet.extraStyle) !== null && _lineSet$extraStyle !== void 0 && _lineSet$extraStyle.color) {
var _lineSet$extraStyle2;
newSeriesItem.itemStyle = {
color: (_lineSet$extraStyle2 = lineSet.extraStyle) === null || _lineSet$extraStyle2 === void 0 ? void 0 : _lineSet$extraStyle2.color
};
}
//需要用到field的特殊配置先修改好
if (props !== null && props !== void 0 && (_props$contentParams71 = props.contentParams) !== null && _props$contentParams71 !== void 0 && (_props$contentParams72 = _props$contentParams71.label) !== null && _props$contentParams72 !== void 0 && _props$contentParams72.show) {
var _props$contentParams73, _props$contentParams74;
if (props !== null && props !== void 0 && (_props$contentParams73 = props.contentParams) !== null && _props$contentParams73 !== void 0 && _props$contentParams73.label._beforeTxt || props !== null && props !== void 0 && (_props$contentParams74 = props.contentParams) !== null && _props$contentParams74 !== void 0 && _props$contentParams74.label._afterTxt) {
var _props$contentParams75, _props$contentParams76;
//特殊格式
newSeriesItem.label.formatter = (props === null || props === void 0 ? void 0 : (_props$contentParams75 = props.contentParams) === null || _props$contentParams75 === void 0 ? void 0 : _props$contentParams75.label._beforeTxt) + " {@" + lineSet.field + "} " + (props === null || props === void 0 ? void 0 : (_props$contentParams76 = props.contentParams) === null || _props$contentParams76 === void 0 ? void 0 : _props$contentParams76.label._afterTxt);
}
}
option.series.push(newSeriesItem);
}
});
} else {
var _props$contentParams$3;
//类目轴
dim.push(props.contentParams.dataSetConfig.labelField);
(_props$contentParams$3 = props.contentParams.dataSetConfig.lineArr) === null || _props$contentParams$3 === void 0 ? void 0 : _props$contentParams$3.forEach(function (lineSet) {
if (lineSet) {
var _lineSet$extraStyle3, _props$contentParams77, _props$contentParams78;
dim.push(lineSet.field);
var newSeriesItem = _lodash["default"].cloneDeep(seriesItem);
if ((_lineSet$extraStyle3 = lineSet.extraStyle) !== null && _lineSet$extraStyle3 !== void 0 && _lineSet$extraStyle3.color) {
var _lineSet$extraStyle4;
newSeriesItem.itemStyle = {
color: (_lineSet$extraStyle4 = lineSet.extraStyle) === null || _lineSet$extraStyle4 === void 0 ? void 0 : _lineSet$extraStyle4.color
};
}
//需要用到field的特殊配置先修改好
if (props !== null && props !== void 0 && (_props$contentParams77 = props.contentParams) !== null && _props$contentParams77 !== void 0 && (_props$contentParams78 = _props$contentParams77.label) !== null && _props$contentParams78 !== void 0 && _props$contentParams78.show) {
var _props$contentParams79, _props$contentParams80;
if (props !== null && props !== void 0 && (_props$contentParams79 = props.contentParams) !== null && _props$contentParams79 !== void 0 && _props$contentParams79.label._beforeTxt || props !== null && props !== void 0 && (_props$contentParams80 = props.contentParams) !== null && _props$contentParams80 !== void 0 && _props$contentParams80.label._afterTxt) {
var _props$contentParams81, _props$contentParams82;
//特殊格式
newSeriesItem.label.formatter = (props === null || props === void 0 ? void 0 : (_props$contentParams81 = props.contentParams) === null || _props$contentParams81 === void 0 ? void 0 : _props$contentParams81.label._beforeTxt) + " {@" + lineSet.field + "} " + (props === null || props === void 0 ? void 0 : (_props$contentParams82 = props.contentParams) === null || _props$contentParams82 === void 0 ? void 0 : _props$contentParams82.label._afterTxt);
}
}
option.series.push(newSeriesItem);
}
});
}
if (props !== null && props !== void 0 && (_props$contentParams83 = props.contentParams) !== null && _props$contentParams83 !== void 0 && (_props$contentParams84 = _props$contentParams83.lineSpecial) !== null && _props$contentParams84 !== void 0 && _props$contentParams84._timeAxis) {
//时间轴
option.dataset.source = newDataForTimeAxis;
} else {
//类目轴
option.dataset.source = data;
}
if ((props === null || props === void 0 ? void 0 : (_props$contentParams85 = props.contentParams) === null || _props$contentParams85 === void 0 ? void 0 : (_props$contentParams86 = _props$contentParams85.lineSpecial) === null || _props$contentParams86 === void 0 ? void 0 : (_props$contentParams87 = _props$contentParams86._minSet) === null || _props$contentParams87 === void 0 ? void 0 : _props$contentParams87.type) === 'auto') {
var _props$contentParams$4;
//数值轴需要自动配置最小值
var min = Infinity;
(_props$contentParams$4 = props.contentParams.dataSetConfig.lineArr) === null || _props$contentParams$4 === void 0 ? void 0 : _props$contentParams$4.forEach(function (lineSet) {
if (lineSet) {
if (Array.isArray(data)) {
data.forEach(function (eachItem) {
//0 不做考虑
if (eachItem[lineSet.field]) {
min = Math.min(min, eachItem[lineSet.field]);
}
});
} else if (Array.isArray(data[lineSet.field])) {
//0 不做考虑
min = Math.min.apply(Math, [min].concat(data[lineSet.field].filter(function (eachNum) {
return eachNum !== 0;
})));
}
}
});
if (min !== Infinity) {
var _props$contentParams88, _props$contentParams89, _props$contentParams90, _props$contentParams91, _props$contentParams92, _props$contentParams93;
min = min * (props === null || props === void 0 ? void 0 : (_props$contentParams88 = props.contentParams) === null || _props$contentParams88 === void 0 ? void 0 : (_props$contentParams89 = _props$contentParams88.lineSpecial) === null || _props$contentParams89 === void 0 ? void 0 : (_props$contentParams90 = _props$contentParams89._minSet) === null || _props$contentParams90 === void 0 ? void 0 : _props$contentParams90.autoNum) / 100;
var autoStep = (props === null || props === void 0 ? void 0 : (_props$contentParams91 = props.contentParams) === null || _props$contentParams91 === void 0 ? void 0 : (_props$contentParams92 = _props$contentParams91.lineSpecial) === null || _props$contentParams92 === void 0 ? void 0 : (_props$contentParams93 = _props$contentParams92._minSet) === null || _props$contentParams93 === void 0 ? void 0 : _props$contentParams93.autoStep) || 1;
min = min - min % autoStep;
var pointIndex = String(autoStep).indexOf('.') + 1;
var precision = pointIndex > 0 ? String(autoStep).length - pointIndex : 0;
min = min.toFixed(precision);
if (option.yAxis.type === 'value') {
option.yAxis.min = min;
} else {
option.xAxis.min = min;
}
}
} else if ((props === null || props === void 0 ? void 0 : (_props$contentParams94 = props.contentParams) === null || _props$contentParams94 === void 0 ? void 0 : (_props$contentParams95 = _props$contentParams94.lineSpecial) === null || _props$contentParams95 === void 0 ? void 0 : (_props$contentParams96 = _props$contentParams95._minSet) === null || _props$contentParams96 === void 0 ? void 0 : _props$contentParams96.type) === 'set') {
//手动设置
if (option.yAxis.type === 'value') {
var _props$contentParams97, _props$contentParams98, _props$contentParams99;
option.yAxis.min = props === null || props === void 0 ? void 0 : (_props$contentParams97 = props.contentParams) === null || _props$contentParams97 === void 0 ? void 0 : (_props$contentParams98 = _props$contentParams97.lineSpecial) === null || _props$contentParams98 === void 0 ? void 0 : (_props$contentParams99 = _props$contentParams98._minSet) === null || _props$contentParams99 === void 0 ? void 0 : _props$contentParams99.setNum;
} else {
var _props$contentParams100, _props$contentParams101, _props$contentParams102;
option.xAxis.min = props === null || props === void 0 ? void 0 : (_props$contentParams100 = props.contentParams) === null || _props$contentParams100 === void 0 ? void 0 : (_props$contentParams101 = _props$contentParams100.lineSpecial) === null || _props$contentParams101 === void 0 ? void 0 : (_props$contentParams102 = _props$contentParams101._minSet) === null || _props$contentParams102 === void 0 ? void 0 : _props$contentParams102.setNum;
}
}
option.dataset.dimensions = dim;
}
}
//自定义转换数据和配置项 （这是灵境项目中的写法）
// if (props.formatOptionCode) {
// try {
// let func;
// let txt = `func = ${props.formatOptionCode}`;
// eval(txt);
// option = func(option, data);
// } catch (e) {
// console.error(e);
// message.error("Echarts配置项转换出错");
// }
// }
//自定义转换数据和配置项 （低代码引擎中可以直接编写可运行的函数）
if (props.formatOptionCode) {
try {
option = props.formatOptionCode(option, data);
} catch (e) {
console.error(e);
_message2["default"].error('Echarts配置项转换出错');
}
}
console.log('option', option);
if (myChartRef.current) {
console.log("开始绘制", myChartRef.current);
myChartRef.current.clear();
myChartRef.current.resize();
myChartRef.current.setOption(option);
}
setError(null);
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-chartBox'
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: chartDomRef,
className: _variables.bizCssPrefix + '-chartDom',
style: props.style || {}
}), error ? /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-errorMsg'
}, error) : null);
};
var _default = exports["default"] = ChartLine;