diff --git a/Analysis/src/components/Charts/Pie/index.tsx b/Analysis/src/components/Charts/Pie/index.tsx index cbf95909e82c7067896956f163681b1a3cb85f24..47c836630e8014b2d7fe27c9a89748c99c1621bc 100644 --- a/Analysis/src/components/Charts/Pie/index.tsx +++ b/Analysis/src/components/Charts/Pie/index.tsx @@ -34,14 +34,10 @@ export interface IPieProps { valueFormat?: (value: string) => string | React.ReactNode; subTitle?: React.ReactNode; } - -/* eslint react/no-danger:0 */ - interface IPieState { legendData: Array<{ checked: boolean; x: string; color: string; percent: number; y: string }>; legendBlock: boolean; } - class Pie extends Component { state: IPieState = { legendData: [], @@ -74,7 +70,9 @@ class Pie extends Component { window.cancelAnimationFrame(this.requestRef); } window.removeEventListener('resize', this.resize); - (this.resize as any).cancel(); + if (this.resize) { + (this.resize as any).cancel(); + } } getG2Instance = (chart: G2.Chart) => { @@ -85,8 +83,6 @@ class Pie extends Component { }); }; - root!: HTMLDivElement; - chart: G2.Chart | undefined; // for custom lengend view getLegendData = () => { if (!this.chart) return; @@ -94,7 +90,7 @@ class Pie extends Component { if (!geom) return; const items = geom.get('dataArray') || []; // 获取图形对应的 - const legendData = items.map((item: Array) => { + const legendData = items.map((item: { color: any; _origin: any }[]) => { /* eslint no-underscore-dangle:0 */ const origin = item[0]._origin; origin.color = item[0].color; @@ -106,7 +102,6 @@ class Pie extends Component { legendData, }); }; - handleRoot = (n: HTMLDivElement) => { this.root = n; }; @@ -128,6 +123,8 @@ class Pie extends Component { legendData, }); }; + root!: HTMLDivElement; + chart: G2.Chart | undefined; // for window resize auto responsive legend @Bind() @@ -139,7 +136,11 @@ class Pie extends Component { window.removeEventListener('resize', this.resize); return; } - if ((this.root!.parentNode! as HTMLDivElement).clientWidth <= 380) { + if ( + this.root && + this.root.parentNode && + (this.root.parentNode as HTMLElement).clientWidth <= 380 + ) { if (!legendBlock) { this.setState({ legendBlock: true, @@ -160,11 +161,13 @@ class Pie extends Component { hasLegend = false, className, style, - height = 1, + height = 0, forceFit = true, percent, + color, inner = 0.75, animate = true, + colors, lineWidth = 1, } = this.props; @@ -183,9 +186,12 @@ class Pie extends Component { let data = propsData || []; let selected = propsSelected; let tooltip = propsTooltip; + + const defaultColors = colors; data = data || []; selected = selected || true; tooltip = tooltip || true; + let formatColor; const scale = { x: { @@ -200,6 +206,12 @@ class Pie extends Component { if (percent || percent === 0) { selected = false; tooltip = false; + formatColor = (value: string) => { + if (value === '占比') { + return color || 'rgba(24, 144, 255, 0.85)'; + } + return '#F0F2F5'; + }; data = [ { @@ -221,7 +233,7 @@ class Pie extends Component { }), ]; - const padding: [number, number, number, number] = [12, 0, 12, 0]; + const padding = [12, 0, 12, 0] as [number, number, number, number]; const dv = new DataView(); dv.source(data).transform({ @@ -248,9 +260,10 @@ class Pie extends Component { diff --git a/Analysis/src/components/OfflineData.tsx b/Analysis/src/components/OfflineData.tsx index a2f5c4755b6a0adb4cccdf23edf76ac42175631b..18992698573cf680bb03faec48e21b6986bfada7 100755 --- a/Analysis/src/components/OfflineData.tsx +++ b/Analysis/src/components/OfflineData.tsx @@ -13,34 +13,36 @@ const CustomTab = ({ }: { data: IOfflineData; currentTabKey: string; -}) => ( - - - - } - gap={2} - total={`${data.cvr * 100}%`} - theme={currentKey !== data.name ? 'light' : undefined} - /> - - - - - -); +}) => { + return ( + + + + } + gap={2} + total={`${data.cvr * 100}%`} + theme={currentKey !== data.name ? 'light' : undefined} + /> + + + + + + ); +}; const { TabPane } = Tabs; diff --git a/Analysis/src/components/ProportionSales.tsx b/Analysis/src/components/ProportionSales.tsx index 29c7cf45e7ebb0351cb70137c74e2f970fc24e42..da2f3be1faf07fb0043e87ddc7561440c68050cb 100755 --- a/Analysis/src/components/ProportionSales.tsx +++ b/Analysis/src/components/ProportionSales.tsx @@ -21,57 +21,59 @@ const ProportionSales = ({ salesType: 'all' | 'online' | 'stores'; salesPieData: ISalesData[]; handleChangeSalesType?: (e: RadioChangeEvent) => void; -}) => ( - - } - bodyStyle={{ padding: 24 }} - extra={ -
- {dropdownGroup} -
- - - - - - - - - - - +}) => { + return ( + + } + bodyStyle={{ padding: 24 }} + extra={ +
+ {dropdownGroup} +
+ + + + + + + + + + + +
-
- } - style={{ marginTop: 24 }} - > -
-

- -

- } - total={() => {salesPieData.reduce((pre, now) => now.y + pre, 0)}} - data={salesPieData} - valueFormat={value => {value}} - height={248} - lineWidth={4} - /> -
- -); +
+

+ +

+ } + total={() => {salesPieData.reduce((pre, now) => now.y + pre, 0)}} + data={salesPieData} + valueFormat={value => {value}} + height={248} + lineWidth={4} + /> +
+ + ); +}; export default ProportionSales; diff --git a/Analysis/src/utils/Yuan.tsx b/Analysis/src/utils/Yuan.tsx index 415e95574b059a85ba89116446f6f72620e34bdd..fe51f4346dc2cd82ea8f54717c78787c5801b424 100644 --- a/Analysis/src/utils/Yuan.tsx +++ b/Analysis/src/utils/Yuan.tsx @@ -1,18 +1,20 @@ import React from 'react'; -import { yuan } from 'ant-design-pro/lib/Charts'; +import { yuan } from '../components/Charts'; /** * 减少使用 dangerouslySetInnerHTML */ -export default class Yuan extends React.PureComponent { +export default class Yuan extends React.Component<{ + children: React.ReactText; +}> { componentDidMount() { - this.rendertoHtml(); + this.renderToHtml(); } componentDidUpdate() { - this.rendertoHtml(); + this.renderToHtml(); } - - rendertoHtml = () => { + main: HTMLSpanElement | undefined | null; + renderToHtml = () => { const { children } = this.props; if (this.main) { this.main.innerHTML = yuan(children);