Skip to content

W
wisdom-components
Commit e12aaa90 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化图表

parent d5e2e189
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 22 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ e12aaa90
......@@ -14,7 +14,7 @@ const SimgleChart = memo((props) => {
showGridLine = true,
deviceAlarmSchemes,
chartType,
justLine,
// justLine,
showBoxOption
} = props;
const chartRef = useRef();
......@@ -28,7 +28,7 @@ const SimgleChart = memo((props) => {
showMarkLine: true,
showPoint: true,
chartType,
justLine,
// justLine,
showBoxOption
};
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ e12aaa90
......@@ -80,14 +80,15 @@ const CheckboxData = [
showInTable: true,
tooltip: '本算法采用递推平均滤波法（滑动平均滤波法）对采样数据进行均值化平滑处理。',
},
{
// 需求变更，剔除
/* {
key: 'justLine',
label: '仅查看曲线',
type: '',
checked: false,
showInCurve: false,
showInTable: false,
},
},*/
{
key: 'dataThin',
label: '数据抽稀',
......@@ -360,11 +361,13 @@ const HistoryView = (props) => {
onContrastChange(contrastOption);
setShowBoxOption(false);
setChartType('lineChart');
onCheckboxChange({target: {value: false}}, 'chartType')
onCheckboxChange({target: {value: false}}, 'chartType');
onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
} else {
// 自定义
// 不需要处理
setShowBoxOption(true)
setShowBoxOption(true);
onCheckboxChange({target: {value: true}}, 'chartType');
}
};
......@@ -429,22 +432,29 @@ const HistoryView = (props) => {
// 曲线设置项选择/取消
const onCheckboxChange = (e, key, showJustLine) => {
let data = [...checkboxData];
let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
// let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
let _index1 = data.findIndex(item => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示
data.forEach((item) => {
if (item.key === key) {
item.checked = e.target.checked;
}
});
if (key === 'ignoreOutliers' && showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
if (key === 'ignoreOutliers') {
// 需求变更，仅查看曲线剔除
/* if (showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
} else {*/
data[_index1].showInCurve = true;
// data[_index1].checked = false;
// }
}
if (key === 'chartType') {
data[_index1].showInCurve = e.target.value;
data[_index1].checked = false;
data[_index].showInCurve = false;
data[_index].checked = false;
// data[_index].showInCurve = false;
// data[_index].checked = false;
}
setCheckboxData(data);
};
......@@ -463,7 +473,7 @@ const HistoryView = (props) => {
return (
(curveAccess || tableAccess) && (
<>
<Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key, showJustLine)}>
<Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
{child.label}
</Checkbox>
{child.tooltip && (
......@@ -690,7 +700,7 @@ const HistoryView = (props) => {
return;
}
dateRange.forEach((item) => {
let _showLine = checkboxData.find(item => item.key === 'justLine');
// let _showLine = checkboxData.find(item => item.key === 'justLine');
const param = {
isDilute,
zoom,
......@@ -780,7 +790,7 @@ const HistoryView = (props) => {
showGridLine={chartGrid}
prefixCls={prefixCls}
dataSource={chartDataSource}
justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
// justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
chartType={isBoxPlots ? chartType : null}
contrast={timeValue === 'contrast'}
contrastOption={contrastOption}
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ e12aaa90
......@@ -138,8 +138,8 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [];
data.push({type: 'min', name: '最小: '});
data.push({type: 'max', name: '最大: '});
data.push({type: 'min', name: '最小: ',});
data.push({type: 'max', name: '最大: ',});
return {
symbolSize: 1,
symbolOffset: [0, '50%'],
......@@ -258,7 +258,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const showPoint = _.get(config, 'showPoint', false);
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null);
const justLine = _.get(config, 'justLine', false);
// const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
......@@ -373,7 +373,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const tooltipAccessor = (unit) => {
return {
formatter: function (params, ticket, callback) {
debugger
let tooltipHeader = '';
let tooltipContent = '';
if (isArray(params)) {
......@@ -385,7 +384,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
tooltipHeader = headTemplate(params);
tooltipContent += seriesTemplate(params, unit);
}
debugger
return `
<div>
${tooltipHeader}
......@@ -471,7 +469,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
// }
};
// 增加箱线图的逻辑，单曲线才存在
if (!justLine && chartType && showBoxOption) {
if (chartType && showBoxOption) {
if (chartType === 'boxChart') {
const otherData = dataSource?.[0]?.dataModel.map(item => {
const {firstPV, lastPV, maxPV, minPV, pt} = item;
......@@ -578,9 +576,21 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
bottom: 10,
start: 0,
end: 100,
height: 28
height: 28,
type: 'inside',
zoomOnMouseWheel: true
},
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: 28,
type: 'slider',
zoomOnMouseWheel: true
}
];
xAxis.minInterval = 3600 * 1 * 1000
return {
yAxis,
grid,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment