@ebiz/designer-components 0.0.19-beta.9 → 0.0.20

package/src/components/charts/components/PieChart/handleSeries.js

@@ -1,236 +1,236 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import merge from '../../util/merge';
-import setLabel from './handleLabel';
-import chartToken from './chartToken';
-import cloneDeep from '../../util/cloneDeep';
-import { percentToDecimal } from '../../util/math';
-import { isArray, isNumber, isString } from '../../util/type';
-
-export const seriesInit = () => {
-  return {
-    type: 'pie',
-    roundCap: true,
-    radius: ['0%', '50%'],
-    center: ['50%', '45%'],
-    avoidLabelOverlap: true,
-    itemStyle: {
-      borderWidth: chartToken.borderWidth,
-      borderColor: chartToken.borderColor,
-      borderRadius: chartToken.borderRadius,
-    },
-    selectedMode: false,
-    roseType: false,
-    label: {},
-    labelLine: {},
-    data: [],
-  };
-};
-
-/**
- * 根据参数计算出圆盘图的半径
- */
-function setPieRadius(pieType, radius, chartInstance) {
-  if (radius) {
-    if(pieType === 'circle' && !(isArray(radius) && radius.length === 2)){
-      return setPieCircleRadius(radius, chartInstance);
-    }else{
-      return radius;
-    }
-  } else {
-    let radius = [];
-    switch (pieType) {
-      case 'pie':
-        radius = ['0%', '50%'];
-        break;
-      case 'circle':
-        radius = ['44%', '50%'];
-        radius = setPieCircleRadius(radius, chartInstance);
-        break;
-      case 'multi-circle':
-        radius = ['44%', '50%'];
-        break;
-      default:
-        radius = ['0%', '50%'];
-        break;
-    }
-    return radius;
-  }
-}
-
-/**
- * 根据参数计算出圆盘图的圆环类型的内外半径
- */
-function setPieCircleRadius(radius, chartInstance){
-  const width = chartInstance.getWidth();
-  const height = chartInstance.getHeight();
-  const canvasRadius = width > height ? height / 2 : width / 2;
-  const barWidth = chartToken.barWidth
-  let outerRing = isArray(radius) ? radius[1] || radius[0] : radius;
-  if (isString(outerRing) && outerRing.indexOf('%') > -1) {
-    outerRing = (Number(outerRing.slice(0, -1)) / 100) * canvasRadius;
-  }
-  let innerRing = Number(outerRing) - barWidth;
-  return [innerRing, outerRing]
-}
-
-/**
- * 数据为零时添加背景
- */
-function handleEmptyData(data, series, center, radius, stillShowZeroSum, legend, colorArr) {
-  const total = data.reduce((pre, cur) => {
-    pre = pre + cur.value;
-    return pre;
-  }, 0);
-
-  if (total === 0) {
-    if (stillShowZeroSum === false) {
-      series.forEach(item => {
-        item.label = false;
-        item.itemStyle.borderWidth = chartToken.borderWidthShowZero;
-      });
-      series.push({
-        type: 'pie',
-        radius,
-        center,
-        emptyCircleStyle: {
-          color: chartToken.colorShowZero,
-        },
-        silent: true,
-        animation: false,
-      });
-    } else {
-      (legend.data !== undefined) && legend.data.forEach((item, index) => {
-        item.itemStyle = { color: colorArr[index] };
-      });
-      series.forEach(item => {
-        item.animation = false;
-        item.color = chartToken.colorShowZero;
-      });
-    }
-  }
-}
-
-function getNewRadius(radius, chartInstance) {
-  if (isNumber(radius)) {
-    return radius;
-  } else if (isString(radius)) {
-    return radius.endsWith('%') ? percentToDecimal(radius) * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2) : parseFloat(radius);
-  } else if (isArray(radius)) {
-    const decimalRadiusArr = radius.map(r => isNumber(r) ? r / Math.min(chartInstance.getWidth(), chartInstance.getHeight()) : r.endsWith('%') ? percentToDecimal(r) : parseFloat(r));
-    const decimalRadius = decimalRadiusArr[0] === 0 ? decimalRadiusArr[1] : decimalRadiusArr[0];
-    return decimalRadius * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2);
-  }
-}
-
-// 余弦定理计算最小1px时的角度
-function minAngle(radius, chartInstance) {
-  const newRadius = getNewRadius(radius, chartInstance);
-  const cosA = (newRadius ** 2 + newRadius ** 2 - 3 ** 2) / (2 * newRadius * newRadius);
-  const angleAInRadians = Math.acos(cosA);
-  const minAngle = angleAInRadians * (180 / Math.PI);
-  return minAngle;
-}
-
-// 合并默认值seriesInit到series
-function mergeDefaultSeries(seriesUnit) {
-  for (const key in seriesInit()) {
-    if (Object.hasOwnProperty.call(seriesInit(), key)) {
-      if (key === 'itemStyle') {
-        const series = cloneDeep(seriesInit());
-        seriesUnit[key] = merge(series.itemStyle, seriesUnit.itemStyle);
-      }
-      if (seriesUnit[key] === undefined) {
-        seriesUnit[key] = seriesInit()[key];
-      }
-    }
-  }
-}
-
-// 给某个data指定的颜色
-function setColor(iChartOption) {
-  const data = iChartOption.data;
-  let initColorGroup = iChartOption.initColor.concat();
-  const colorData = iChartOption.dataRules && iChartOption.dataRules.color;
-  if (colorData && isArray(initColorGroup)) {
-    for (let key in colorData) {
-      data.forEach((item, index) => {
-        if (item.name === key && initColorGroup[index] && colorData[key]) {
-          initColorGroup[index] = colorData[key];
-        }
-      })
-    }
-  }
-  iChartOption.color = initColorGroup;
-}
-
-/**
- * 组装echarts所需要的series
- * @param {数据} data
- * @returns
- */
-
-const config = [
-  'label',
-  'labelLine',
-  'itemStyle',
-  'radius',
-  'center',
-  'silent',
-  'emphasis',
-  'stillShowZeroSum',
-  'selectedMode',
-  'roseType',
-  'minAngle',
-];
-
-function handleSeries(pieType, iChartOption, chartInstance, position, legend) {
-  const { data, stillShowZeroSum } = iChartOption;
-  position = position || {};
-  iChartOption.center = position?.center;
-  iChartOption.radius = position?.radius;
-
-  // 组装series数据
-  let series = [];
-  let selfSeries = iChartOption.series;
-  if (selfSeries === undefined) {
-    selfSeries = [{}];
-  }
-  // 保留初始的颜色数组
-  iChartOption.initColor = iChartOption.color;
-  // 给某个data指定的颜色
-  setColor(iChartOption);
-  selfSeries.forEach(seriesItem => {
-    const seriesUnit = seriesItem;
-    const temp = cloneDeep(iChartOption);
-    // 处理属性的优先级
-    config.forEach(name => {
-      const existValue = merge(temp[name], seriesUnit[name]);
-      if (existValue !== undefined) {
-        seriesUnit[name] = existValue;
-      }
-    });
-    seriesUnit.data = seriesUnit.data || iChartOption.data;
-    seriesUnit.radius = setPieRadius(pieType, seriesUnit.radius, chartInstance);
-    seriesUnit.minAngle =
-      seriesUnit.minAngle !== undefined ? seriesUnit.minAngle : minAngle(seriesUnit.radius, chartInstance);
-    setLabel(seriesUnit, seriesUnit.label, seriesUnit.data);
-    // 默认样式合并
-    mergeDefaultSeries(seriesUnit);
-  });
-  // 数据和为0
-  handleEmptyData(data, selfSeries, selfSeries[0].center, selfSeries[0].radius, stillShowZeroSum, legend, iChartOption.color);
-  series = selfSeries;
-  return series;
-}
-
-export default handleSeries;
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import merge from '../../util/merge';
+import setLabel from './handleLabel';
+import chartToken from './chartToken';
+import cloneDeep from '../../util/cloneDeep';
+import { percentToDecimal } from '../../util/math';
+import { isArray, isNumber, isString } from '../../util/type';
+
+export const seriesInit = () => {
+  return {
+    type: 'pie',
+    roundCap: true,
+    radius: ['0%', '50%'],
+    center: ['50%', '45%'],
+    avoidLabelOverlap: true,
+    itemStyle: {
+      borderWidth: chartToken.borderWidth,
+      borderColor: chartToken.borderColor,
+      borderRadius: chartToken.borderRadius,
+    },
+    selectedMode: false,
+    roseType: false,
+    label: {},
+    labelLine: {},
+    data: [],
+  };
+};
+
+/**
+ * 根据参数计算出圆盘图的半径
+ */
+function setPieRadius(pieType, radius, chartInstance) {
+  if (radius) {
+    if(pieType === 'circle' && !(isArray(radius) && radius.length === 2)){
+      return setPieCircleRadius(radius, chartInstance);
+    }else{
+      return radius;
+    }
+  } else {
+    let radius = [];
+    switch (pieType) {
+      case 'pie':
+        radius = ['0%', '50%'];
+        break;
+      case 'circle':
+        radius = ['44%', '50%'];
+        radius = setPieCircleRadius(radius, chartInstance);
+        break;
+      case 'multi-circle':
+        radius = ['44%', '50%'];
+        break;
+      default:
+        radius = ['0%', '50%'];
+        break;
+    }
+    return radius;
+  }
+}
+
+/**
+ * 根据参数计算出圆盘图的圆环类型的内外半径
+ */
+function setPieCircleRadius(radius, chartInstance){
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+  const canvasRadius = width > height ? height / 2 : width / 2;
+  const barWidth = chartToken.barWidth
+  let outerRing = isArray(radius) ? radius[1] || radius[0] : radius;
+  if (isString(outerRing) && outerRing.indexOf('%') > -1) {
+    outerRing = (Number(outerRing.slice(0, -1)) / 100) * canvasRadius;
+  }
+  let innerRing = Number(outerRing) - barWidth;
+  return [innerRing, outerRing]
+}
+
+/**
+ * 数据为零时添加背景
+ */
+function handleEmptyData(data, series, center, radius, stillShowZeroSum, legend, colorArr) {
+  const total = data.reduce((pre, cur) => {
+    pre = pre + cur.value;
+    return pre;
+  }, 0);
+
+  if (total === 0) {
+    if (stillShowZeroSum === false) {
+      series.forEach(item => {
+        item.label = false;
+        item.itemStyle.borderWidth = chartToken.borderWidthShowZero;
+      });
+      series.push({
+        type: 'pie',
+        radius,
+        center,
+        emptyCircleStyle: {
+          color: chartToken.colorShowZero,
+        },
+        silent: true,
+        animation: false,
+      });
+    } else {
+      (legend.data !== undefined) && legend.data.forEach((item, index) => {
+        item.itemStyle = { color: colorArr[index] };
+      });
+      series.forEach(item => {
+        item.animation = false;
+        item.color = chartToken.colorShowZero;
+      });
+    }
+  }
+}
+
+function getNewRadius(radius, chartInstance) {
+  if (isNumber(radius)) {
+    return radius;
+  } else if (isString(radius)) {
+    return radius.endsWith('%') ? percentToDecimal(radius) * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2) : parseFloat(radius);
+  } else if (isArray(radius)) {
+    const decimalRadiusArr = radius.map(r => isNumber(r) ? r / Math.min(chartInstance.getWidth(), chartInstance.getHeight()) : r.endsWith('%') ? percentToDecimal(r) : parseFloat(r));
+    const decimalRadius = decimalRadiusArr[0] === 0 ? decimalRadiusArr[1] : decimalRadiusArr[0];
+    return decimalRadius * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2);
+  }
+}
+
+// 余弦定理计算最小1px时的角度
+function minAngle(radius, chartInstance) {
+  const newRadius = getNewRadius(radius, chartInstance);
+  const cosA = (newRadius ** 2 + newRadius ** 2 - 3 ** 2) / (2 * newRadius * newRadius);
+  const angleAInRadians = Math.acos(cosA);
+  const minAngle = angleAInRadians * (180 / Math.PI);
+  return minAngle;
+}
+
+// 合并默认值seriesInit到series
+function mergeDefaultSeries(seriesUnit) {
+  for (const key in seriesInit()) {
+    if (Object.hasOwnProperty.call(seriesInit(), key)) {
+      if (key === 'itemStyle') {
+        const series = cloneDeep(seriesInit());
+        seriesUnit[key] = merge(series.itemStyle, seriesUnit.itemStyle);
+      }
+      if (seriesUnit[key] === undefined) {
+        seriesUnit[key] = seriesInit()[key];
+      }
+    }
+  }
+}
+
+// 给某个data指定的颜色
+function setColor(iChartOption) {
+  const data = iChartOption.data;
+  let initColorGroup = iChartOption.initColor.concat();
+  const colorData = iChartOption.dataRules && iChartOption.dataRules.color;
+  if (colorData && isArray(initColorGroup)) {
+    for (let key in colorData) {
+      data.forEach((item, index) => {
+        if (item.name === key && initColorGroup[index] && colorData[key]) {
+          initColorGroup[index] = colorData[key];
+        }
+      })
+    }
+  }
+  iChartOption.color = initColorGroup;
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {数据} data
+ * @returns
+ */
+
+const config = [
+  'label',
+  'labelLine',
+  'itemStyle',
+  'radius',
+  'center',
+  'silent',
+  'emphasis',
+  'stillShowZeroSum',
+  'selectedMode',
+  'roseType',
+  'minAngle',
+];
+
+function handleSeries(pieType, iChartOption, chartInstance, position, legend) {
+  const { data, stillShowZeroSum } = iChartOption;
+  position = position || {};
+  iChartOption.center = position?.center;
+  iChartOption.radius = position?.radius;
+
+  // 组装series数据
+  let series = [];
+  let selfSeries = iChartOption.series;
+  if (selfSeries === undefined) {
+    selfSeries = [{}];
+  }
+  // 保留初始的颜色数组
+  iChartOption.initColor = iChartOption.color;
+  // 给某个data指定的颜色
+  setColor(iChartOption);
+  selfSeries.forEach(seriesItem => {
+    const seriesUnit = seriesItem;
+    const temp = cloneDeep(iChartOption);
+    // 处理属性的优先级
+    config.forEach(name => {
+      const existValue = merge(temp[name], seriesUnit[name]);
+      if (existValue !== undefined) {
+        seriesUnit[name] = existValue;
+      }
+    });
+    seriesUnit.data = seriesUnit.data || iChartOption.data;
+    seriesUnit.radius = setPieRadius(pieType, seriesUnit.radius, chartInstance);
+    seriesUnit.minAngle =
+      seriesUnit.minAngle !== undefined ? seriesUnit.minAngle : minAngle(seriesUnit.radius, chartInstance);
+    setLabel(seriesUnit, seriesUnit.label, seriesUnit.data);
+    // 默认样式合并
+    mergeDefaultSeries(seriesUnit);
+  });
+  // 数据和为0
+  handleEmptyData(data, selfSeries, selfSeries[0].center, selfSeries[0].radius, stillShowZeroSum, legend, iChartOption.color);
+  series = selfSeries;
+  return series;
+}
+
+export default handleSeries;

package/src/components/charts/components/PieChart/index.js

@@ -1,58 +1,58 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import init from '../../option/init';
-import handleMulti from './handleMulti';
-import handleSeries from './handleSeries';
-import PolarCoordSys from '../../option/PolarSys';
-import { CHART_TYPE } from '../../util/constants';
-
-class PieChart {
-
-  static name = CHART_TYPE.PIE
-
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(chartInstance);
-  }
-
-  updateOption(chartInstance) {
-    const iChartOption = this.iChartOption;
-    const type = iChartOption.type || 'circle';
-    // 装载除series之外的其他配置
-    PolarCoordSys(this.baseOption, this.iChartOption, 'PieChart');
-    // 兼容旧属性chartPosition
-    const position = iChartOption.position || iChartOption.chartPosition;
-    // 处理series数据
-    this.baseOption.series = handleSeries(type, iChartOption, chartInstance, position, this.baseOption.legend);
-    // 针对给定的color值，需要进行特殊处理
-    this.baseOption.color = iChartOption.color;
-    // 针对多重圆环图表需求，图表需要进行特殊处理
-    handleMulti(type, this.baseOption, iChartOption.legend, iChartOption.data);
-    // 是否关闭hover态的效果，默认为false
-    if (iChartOption.silent) {
-      this.baseOption.tooltip = {};
-    }
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() { }
-}
-
-export default PieChart;
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import init from '../../option/init';
+import handleMulti from './handleMulti';
+import handleSeries from './handleSeries';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+
+class PieChart {
+
+  static name = CHART_TYPE.PIE
+
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    const type = iChartOption.type || 'circle';
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, this.iChartOption, 'PieChart');
+    // 兼容旧属性chartPosition
+    const position = iChartOption.position || iChartOption.chartPosition;
+    // 处理series数据
+    this.baseOption.series = handleSeries(type, iChartOption, chartInstance, position, this.baseOption.legend);
+    // 针对给定的color值，需要进行特殊处理
+    this.baseOption.color = iChartOption.color;
+    // 针对多重圆环图表需求，图表需要进行特殊处理
+    handleMulti(type, this.baseOption, iChartOption.legend, iChartOption.data);
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {};
+    }
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default PieChart;

package/src/components/charts/components/PolarBarChart/chartToken.js

@@ -1,17 +1,17 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import Token from '../../feature/token';
-import {CHART_TYPE} from '../../util/constants'
-
-const chartToken = Token.getTokenByName(CHART_TYPE.POLAR_BAR)
-
-export default chartToken;
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.POLAR_BAR)
+
+export default chartToken;