@easyv/charts 1.3.19 → 1.3.20

package/commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']}

package/lib/components/Legend.js

@@ -62,7 +62,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$config$unselect$ = _ref$config$unselect.opacity,
       opacity = _ref$config$unselect$ === void 0 ? 1 : _ref$config$unselect$,
       filterData = _ref.filterData,
-      formatter = _ref.formatter;
+      formatter = _ref.formatter,
+      judge = _ref.judge;
   if (!show) return null;
 
   var _series = (0, _utils.sortPie)(series, order);
@@ -77,7 +78,14 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var dataset = e.currentTarget.dataset;
     var name = dataset.name;
     filterData && interactive && filterData(name);
-  }, [interactive, filterData]);
+  }, [interactive, filterData]); //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
+
+  if (judge == 0) {
+    _series.forEach(function (d) {
+      d.percent = 0;
+    });
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread({

package/lib/components/PieChart.js

@@ -357,7 +357,22 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       return d.y;
     });
     return arcsFunc;
+  }, [angle]); //此处创建arcsFuncTwo的原因是为了兼容数据全为零
+
+  var arcsFuncTwo = (0, _react.useMemo)(function () {
+    var _getAngle2 = getAngle(angle),
+        _getAngle2$startAngle = _getAngle2.startAngle,
+        startAngle = _getAngle2$startAngle === void 0 ? 0 : _getAngle2$startAngle,
+        _getAngle2$endAngle = _getAngle2.endAngle,
+        endAngle = _getAngle2$endAngle === void 0 ? 360 : _getAngle2$endAngle;
+
+    var arcsFunc = (0, _d3v.pie)().startAngle(startAngle * PI / 180).endAngle(endAngle * PI / 180).value(function (d) {
+      return d.y == 0 ? 1 : d.y;
+    });
+    return arcsFunc;
   }, [angle]);
+  var judgeData = 0; //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
+
   var arcs = (0, _react.useMemo)(function () {
     var _chart = Object.assign(defaultChart, chart);
 
@@ -386,9 +401,21 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
           return a.y - b.y;
         });
         break;
-    }
+    } //此处判断data中的y是否都为零,方便饼图都为零时展示
+
+
+    var arcs = 0;
+    data.forEach(function (item) {
+      judgeData += item.y;
+    });
+
+    if (judgeData == 0) {
+      arcs = arcsFuncTwo(data);
+    } else {
+      arcs = arcsFunc(data);
+    } //const arcs = arcsFunc(data); 此处是原本的传输饼图data流程
+
 
-    var arcs = arcsFunc(data);
     var legendDataWithPercent = (0, _utils.getDataWithPercent)(arcs, legendPrecision);
 
     var _legendDataWithPercent = (0, _utils.sortPie)(legendDataWithPercent, order);
@@ -427,7 +454,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         outerRadius: outerRadius
       });
     });
-  }, [data, arcsFunc, chart, legendPrecision]);
+  }, [data, arcsFunc, arcsFuncTwo, chart, legendPrecision]);
 
   var _arcs = (0, _react.useMemo)(function () {
     var seriesLength = series.size;
@@ -560,10 +587,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     config: _objectSpread(_objectSpread({}, label), {}, {
       maxRadius: maxRadius + 2
     }),
-    arcs: _arcs
+    arcs: _arcs,
+    judge: judgeData
   }))), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     series: _arcs,
-    formatter: formatter
+    formatter: formatter,
+    judge: judgeData
   }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     width: width,
     height: height,
@@ -654,7 +683,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     })));
   }), label && /*#__PURE__*/_react["default"].createElement(Label, {
     config: label,
-    arcs: _arcs
+    arcs: _arcs,
+    judge: judgeData
   }), current && /*#__PURE__*/_react["default"].createElement("g", {
     fillOpacity: y,
     style: {
@@ -665,6 +695,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     width: width,
     height: height,
     data: _arcs,
+    judge: judgeData,
     currentIndex: +currentIndex
   })))), decorate && /*#__PURE__*/_react["default"].createElement(_.ConicalGradient, {
     width: width,
@@ -676,7 +707,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     radius: radius
   }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     series: _arcs,
-    formatter: formatter
+    formatter: formatter,
+    judge: judgeData
   })));
 });
 
@@ -714,12 +746,20 @@ var Current = function Current(_ref9) {
       width = _ref9.width,
       height = _ref9.height,
       data = _ref9.data,
+      judge = _ref9.judge,
       currentIndex = _ref9.currentIndex;
 
   var _data = (0, _react.useMemo)(function () {
     var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
     return (0, _utils.sortPie)(legendDataWithPercent, '');
-  }, [data, precision]);
+  }, [data, precision]); //数据容错,当data都为零那么需要进行以下容错
+
+
+  if (judge == 0) {
+    _data.forEach(function (d) {
+      d.percent = 0, d.value = 0;
+    });
+  }
 
   var currentData = _data[currentIndex];
   if (!currentData) return null;
@@ -832,13 +872,22 @@ var Label = function Label(_ref10) {
       _ref10$config$percent2 = _ref10$config$percent.sameColor,
       percentSameColor = _ref10$config$percent2 === void 0 ? false : _ref10$config$percent2,
       arcs = _ref10.arcs,
+      judge = _ref10.judge,
       animation = _ref10.animation;
 
   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
+  // console.log('judeg1111',judge)
   var _arcs = (0, _react.useMemo)(function () {
     return (0, _utils.getDataWithPercent)(arcs, precision);
-  }, [arcs, precision]); // useEffect(() => {
+  }, [arcs, precision]); //数据做出容错
+
+
+  if (judge == 0) {
+    _arcs.forEach(function (d) {
+      d.percent = 0;
+    });
+  } // useEffect(() => {
   //   if (labels) {
   //     const children = [...labels.children];
   //     const bbox = children.reduce(
@@ -989,11 +1038,19 @@ var RingLabel = function RingLabel(_ref12) {
       precision = _ref12$config$percent.precision,
       _ref12$config$percent2 = _ref12$config$percent.sameColor,
       percentSameColor = _ref12$config$percent2 === void 0 ? false : _ref12$config$percent2,
+      judge = _ref12.judge,
       arcs = _ref12.arcs;
 
   var _arcs = (0, _react.useMemo)(function () {
     return (0, _utils.getDataWithPercent)(arcs, precision);
-  }, [arcs, precision]);
+  }, [arcs, precision]); //数据做出容错
+
+
+  if (judge == 0) {
+    _arcs.forEach(function (d) {
+      d.percent = 0;
+    });
+  }
 
   return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref13, index) {
     var _ref13$series$color = _ref13.series.color,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.3.19",
+  "version": "1.3.20",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Legend.js

@@ -28,6 +28,7 @@ export default memo(
     },
     filterData,
     formatter,
+    judge
   }) => {
     if (!show) return null;
     const _series = sortPie(series, order);
@@ -43,6 +44,14 @@ export default memo(
       [interactive, filterData]
     );
 
+     //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
+     
+     if (judge == 0) {
+       _series.forEach((d) => {
+         d.percent=0
+       })
+     }
+
     return (
       <div
         className='__easyv-legend-wrapper'

package/src/components/PieChart.js

@@ -271,6 +271,7 @@ const Component = memo(
     onEvent,
     data:originData = [],
   }) => {
+    
     const data =originData.map(d=>({...d,y:d.y<0?0:d.y}));
     const prevIndex = useRef(null);
     const { precision: legendPrecision } = legend.config.percent;
@@ -293,7 +294,16 @@ const Component = memo(
         .value((d) => d.y);
       return arcsFunc;
     }, [angle]);
-
+    //此处创建arcsFuncTwo的原因是为了兼容数据全为零
+    const arcsFuncTwo = useMemo(() => {
+      const { startAngle = 0, endAngle = 360 } = getAngle(angle);
+      const arcsFunc = pie()
+        .startAngle((startAngle * PI) / 180)
+        .endAngle((endAngle * PI) / 180)
+        .value((d) => d.y==0?1:d.y);
+      return arcsFunc;
+    }, [angle]);
+    let judgeData = 0  //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
     const arcs = useMemo(() => {
       const _chart = Object.assign(defaultChart, chart);
       const {
@@ -317,8 +327,22 @@ const Component = memo(
           arcsFunc.sort((a, b) => a.y - b.y);
           break;
       }
+       
+      //此处判断data中的y是否都为零,方便饼图都为零时展示
+
+      let arcs = 0
+      data.forEach(function(item){
+        judgeData+=item.y
+      });
+      if (judgeData == 0) {
+        arcs = arcsFuncTwo(data)
+        
+      } else {
+        arcs = arcsFunc(data)
+      }
+     
 
-      const arcs = arcsFunc(data);
+      //const arcs = arcsFunc(data); 此处是原本的传输饼图data流程
       const legendDataWithPercent = getDataWithPercent(arcs, legendPrecision);
       const _legendDataWithPercent = sortPie(legendDataWithPercent, order);
 
@@ -349,7 +373,7 @@ const Component = memo(
         innerRadius,
         outerRadius,
       }));
-    }, [data, arcsFunc, chart, legendPrecision]);
+    }, [data, arcsFunc,arcsFuncTwo, chart, legendPrecision]);
 
     const _arcs = useMemo(() => {
       const seriesLength = series.size;
@@ -516,11 +540,12 @@ const Component = memo(
               <RingLabel
                 config={{ ...label, maxRadius: maxRadius + 2 }}
                 arcs={_arcs}
+                judge={judgeData}
               />
             )}
           </g>
         </ChartContainer>
-        <Legend {...legend} series={_arcs} formatter={formatter} />
+        <Legend {...legend} series={_arcs} formatter={formatter}  judge = {judgeData}/>
       </>
     ) : (
       <>
@@ -669,6 +694,7 @@ const Component = memo(
                       )
                     }
                     <defs>
+                      {/* 此处是环的发生地 */}
                       <LinearGradient
                         id={id}
                         colors={current ? currentPie : pie}
@@ -686,7 +712,7 @@ const Component = memo(
                 );
               }
             )}
-            {label && <Label config={label} arcs={_arcs} />}
+            {label && <Label config={label} arcs={_arcs}  judge = {judgeData} />}
             {current && (
               <g
                 fillOpacity={y}
@@ -697,6 +723,7 @@ const Component = memo(
                   width={width}
                   height={height}
                   data={_arcs}
+                  judge = {judgeData}
                   currentIndex={+currentIndex}
                 />
               </g>
@@ -714,7 +741,7 @@ const Component = memo(
             radius={radius}
           />
         )}
-        <Legend {...legend} series={_arcs} formatter={formatter} />
+        <Legend {...legend} series={_arcs} formatter={formatter}  judge = {judgeData} />
       </>
     );
   }
@@ -744,16 +771,28 @@ const Current = ({
         translate: { x: translateSuffixX, y: translateSuffixY },
       },
     },
+    
   },
   width,
   height,
   data,
+  judge,
   currentIndex,
 }) => {
   const _data = useMemo(() => {
     const legendDataWithPercent = getDataWithPercent(data, precision);
     return sortPie(legendDataWithPercent, '');
   }, [data, precision]);
+  
+ 
+  //数据容错,当data都为零那么需要进行以下容错
+  if (judge == 0) {
+    _data.forEach((d) => {
+      d.percent = 0, d.value = 0
+      
+    })
+  }
+
   const currentData = _data[currentIndex];
 
   if (!currentData) return null;
@@ -903,15 +942,24 @@ const Label = ({
     },
   },
   arcs,
+  judge,
   animation,
 }) => {
   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
-
+  // console.log('judeg1111',judge)
   const _arcs = useMemo(
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
+
+   //数据做出容错
+  if (judge == 0) {
+    _arcs.forEach((d) => {
+      d.percent=0
+    })
+  } 
+
   // useEffect(() => {
   //   if (labels) {
   //     const children = [...labels.children];
@@ -1121,12 +1169,20 @@ const RingLabel = ({
       sameColor: percentSameColor = false,
     },
   },
+  judge,
   arcs,
 }) => {
   const _arcs = useMemo(
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
+  
+ //数据做出容错
+ if (judge == 0) {
+   _arcs.forEach((d) => {
+     d.percent=0
+   })
+ } 
 
   return (
     <g>