style: 折线图: 不要平滑

feature/year-over-year
Lei OT 2 years ago
parent 0d3b170f01
commit 03655b5e5d

@ -34,7 +34,7 @@ class Orders extends Component {
// xAxis: { // xAxis: {
// type: 'timeCat', // type: 'timeCat',
// }, // },
smooth: true, // smooth: true,
legend: { legend: {
position: 'right-top', position: 'right-top',
title: { title: {

@ -1,5 +1,5 @@
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Mix } from '@ant-design/plots'; import { Mix, getCanvasPattern } from '@ant-design/plots';
import { merge, isEmpty, cloneDeep } from '../utils/commons'; import { merge, isEmpty, cloneDeep } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht'; import { dataFieldAlias } from '../libs/ht';
@ -66,7 +66,18 @@ export default observer((props) => {
// lineDash: [2, 2], // lineDash: [2, 2],
lineWidth: 0.5, lineWidth: 0.5,
}, },
},]; },
];
const pattern = (datum, color) => {
return getCanvasPattern({
type: String(datum.yGroup).includes(' ') ? 'line' : '',
cfg: {
backgroundColor: color,
},
});
};
const MixConfig = { const MixConfig = {
appendPadding: 15, appendPadding: 15,
height: 600, height: 600,
@ -147,7 +158,7 @@ export default observer((props) => {
// color: '#b32b19', // color: '#b32b19',
// color: '#f58269', // color: '#f58269',
legend: false, // {}, legend: false, // {},
smooth: true, // smooth: true,
yAxis: { yAxis: {
type: 'linear', type: 'linear',
tickCount: 4, tickCount: 4,
@ -162,6 +173,8 @@ export default observer((props) => {
}, },
}, },
label: false, label: false,
color: COLOR_SETS2,
pattern,
}, },
}, },
{ {
@ -181,7 +194,7 @@ export default observer((props) => {
{ yField: dataFieldAlias[yFields[1]] } { yField: dataFieldAlias[yFields[1]] }
), ),
// color: '#1AAF8B', // color: '#1AAF8B',
smooth: true, // smooth: true,
point: { point: {
size: 4, size: 4,
shape: 'cicle', shape: 'cicle',
@ -202,6 +215,17 @@ export default observer((props) => {
lineWidth: 1, lineWidth: 1,
}, },
}, },
lineStyle: (datum) => {
if (String(datum.yGroup).includes(' ')) {
return {
lineDash: [4, 4],
opacity: 0.75,
};
}
return {
opacity: 1,
};
},
}, },
}, },
{ {

@ -133,7 +133,7 @@ export default observer(() => {
xAxis: { xAxis: {
type: 'cat', type: 'cat',
}, },
smooth: true, // smooth: true,
point: { point: {
size: 4, size: 4,
shape: 'cicle', shape: 'cicle',

@ -290,7 +290,7 @@ class Orders extends Component {
return ret; return ret;
}, },
}, },
smooth: true, // smooth: true,
}; };
const pie_config = { const pie_config = {
appendPadding: 10, appendPadding: 10,

@ -151,7 +151,7 @@ const Sale_KPI = () => {
r.push(targetRow, valRow, processRow); r.push(targetRow, valRow, processRow);
return r; return r;
}, []); }, []);
const lineConfig = { appendPadding: 10, xField: 'groupDateVal', yField: 'SumML', seriesField: 'groupsLabel', isGroup: true, smooth: true, meta: comm.cloneDeep(dataFieldAlias), }; const lineConfig = { appendPadding: 10, xField: 'groupDateVal', yField: 'SumML', seriesField: 'groupsLabel', isGroup: true, smooth: false, meta: comm.cloneDeep(dataFieldAlias), };
return ( return (
<div> <div>
<Row gutter={16} className="sticky-top"> <Row gutter={16} className="sticky-top">

Loading…
Cancel
Save