@easyv/charts 1.0.59 → 1.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -763,7 +763,7 @@ var Current = function Current(_ref9) {
|
|
|
763
763
|
}, text)), //百分比值
|
|
764
764
|
showPercent && /*#__PURE__*/_react["default"].createElement("span", {
|
|
765
765
|
style: _objectSpread(_objectSpread({
|
|
766
|
-
transform: "translate(" + translatePercentX + "px," + translatePercentY + ")"
|
|
766
|
+
transform: "translate(" + translatePercentX + "px," + translatePercentY + "px)"
|
|
767
767
|
}, (0, _utils.getFontStyle)(percentFont)), {}, {
|
|
768
768
|
margin: gap / 2 + "px 0"
|
|
769
769
|
})
|
package/package.json
CHANGED
|
@@ -728,7 +728,7 @@ const Current = ({
|
|
|
728
728
|
{ //百分比值
|
|
729
729
|
showPercent && <span
|
|
730
730
|
style={{
|
|
731
|
-
transform:"translate("+translatePercentX+"px,"+translatePercentY+")",
|
|
731
|
+
transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
|
|
732
732
|
...getFontStyle(percentFont),
|
|
733
733
|
margin:gap/2+"px 0"
|
|
734
734
|
}}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as d3 from 'd3';
|
|
2
|
+
|
|
3
|
+
//只支持在svg中使用
|
|
4
|
+
//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
|
|
5
|
+
//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
|
|
6
|
+
export default function ConicGradient(props){
|
|
7
|
+
const {
|
|
8
|
+
gradientId, //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
|
|
9
|
+
colorConfig={},
|
|
10
|
+
circleConfig={}
|
|
11
|
+
} = props,
|
|
12
|
+
{
|
|
13
|
+
colorType = "linear", //渐变类型
|
|
14
|
+
colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
|
|
15
|
+
{offset:50,color:"rgba(0,255,0,0.5)"},
|
|
16
|
+
{offset:100,color:"rgba(0,0,255,0.5)"}] //渐变颜色
|
|
17
|
+
} = colorConfig,
|
|
18
|
+
{
|
|
19
|
+
innerRadius = 80, //圆环内半径
|
|
20
|
+
outerRadius = 100, //圆环外半径
|
|
21
|
+
startAngle = 0, //初始角度
|
|
22
|
+
endAngle = 360, //结束角度
|
|
23
|
+
cornerRadius = 0, //圆环两端的圆角
|
|
24
|
+
padAngle = 0 //圆环内边距，用于多个圆环之间的间距
|
|
25
|
+
} = circleConfig;
|
|
26
|
+
const arc = d3
|
|
27
|
+
.arc()
|
|
28
|
+
.innerRadius(innerRadius)
|
|
29
|
+
.outerRadius(outerRadius)
|
|
30
|
+
.startAngle((startAngle * Math.PI) / 180)
|
|
31
|
+
.endAngle((endAngle * Math.PI) / 180)
|
|
32
|
+
.cornerRadius(cornerRadius)
|
|
33
|
+
.padAngle(padAngle);
|
|
34
|
+
return <g>
|
|
35
|
+
<clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
|
|
36
|
+
<path d={arc()}></path>
|
|
37
|
+
</clipPath>
|
|
38
|
+
<foreignObject style={{
|
|
39
|
+
width:"100%",
|
|
40
|
+
height:"100%",
|
|
41
|
+
transform:`translate(-50%,-50%)`,
|
|
42
|
+
background:colorType==="pure"?
|
|
43
|
+
colors : `conic-gradient(${colorsToString(colors)})`,
|
|
44
|
+
clipPath:`url(${'#'+gradientId})`
|
|
45
|
+
}}></foreignObject>
|
|
46
|
+
</g>
|
|
47
|
+
}
|
|
48
|
+
function colorsToString(colors){
|
|
49
|
+
let s="";
|
|
50
|
+
colors.sort((a,b)=>{
|
|
51
|
+
return a.offset-b.offset;
|
|
52
|
+
}).map(d=>{
|
|
53
|
+
s=s+d.color+" "+d.offset+"%,";
|
|
54
|
+
})
|
|
55
|
+
return s.slice(0,-1)
|
|
56
|
+
}
|