diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 28252d38450fe2027c9f27d09831a184529bcf13..0ee32feddcad49996014037fc55748c70ea46991 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -60,6 +60,7 @@ class Pie extends Component { inner = 0.75, animate = true, colors, + lineWidth = 0, } = this.props; const defaultColors = colors || ['#8543E0', '#F04864', '#FACC14', '#1890FF', '#13C2C2', '#2FC25B']; @@ -73,9 +74,9 @@ class Pie extends Component { tooltip = false; formatColor = (value) => { if (value === '占比') { - return color || '#0096fa'; + return color || 'rgba(24, 144, 255, 0.85)'; } else { - return '#e9e9e9'; + return '#F0F2F5'; } }; @@ -149,11 +150,13 @@ class Pie extends Component { inner, }); - if (percent) { - chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected); - } else { - chart.intervalStack().position(Stat.summary.percent('y')).color('x', defaultColors).selected(selected); - } + chart + .intervalStack() + .position(Stat.summary.percent('y')) + .style({ lineWidth, stroke: '#fff' }) + .color('x', percent ? formatColor : defaultColors) + .selected(selected); + chart.render(); this.chart = chart; diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index 75494e572f788523d9aa34f417e0f3cb6c53c949..d9efad4a7e46495790412639c39d3476c2571975 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -56,7 +56,7 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | title | 图表标题 | ReactNode\|string | - | -| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.85)` | +| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | | margin | 图表内部间距 | array | \[32, 0, 32, 40\] | | height | 图表高度 | number | - | | data | 数据 | array<{x, y}> | - | @@ -66,7 +66,7 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | animate | 是否显示动画 | boolean | true | -| color | 图表颜色 | string | `#0096fa` | +| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | | height | 图表高度 | number | - | | hasLegend | 是否显示 legend | boolean | `false` | | margin | 图表内部间距 | array | \[32, 0, 32, 40\] | diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index 13473943c103875dc0a852e92f858fe711a101f6..f025825fd7a949bcf8fe2891b3fe657bf8064053 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/src/routes/Dashboard/Analysis.js @@ -161,7 +161,7 @@ export default class Analysis extends Component { -
+
now.y + pre, 0))} data={salesPieData} valueFormat={val => yuan(val)} - height={260} + height={268} + lineWidth={4} />
diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less index 92b28a58990f1c6c2db91497c5e6754f53489d39..7d76e9ac9fcb8cb7e3641c9a97b5c5b1fc9669d2 100644 --- a/src/routes/Dashboard/Analysis.less +++ b/src/routes/Dashboard/Analysis.less @@ -150,6 +150,9 @@ .salesCard { :global { + .abt-tabs-ink-bar { + bottom: auto; + } .ant-tabs-content { padding-top: 30px; }