@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

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

@@ -1,102 +1,102 @@
-/**
- * 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 defendXSS from '../../util/defendXSS';
-import chartToken from './chartToken';
-// 获取bar的series数据
-export function getSeriesData(data, type) {
-  const seriesData = [];
-  if (type === 'normal') {
-    data.forEach((item, i) => {
-      seriesData[i] = [];
-      for (let j = 0; j < data.length; j++) {
-        if (i == j) {
-          seriesData[i][j] = item.value;
-        } else {
-          seriesData[i][j] = 0;
-        }
-      }
-    });
-  } else {
-    data.forEach((item) => {
-      seriesData.push(item.value);
-    });
-  }
-
-  return seriesData;
-}
-
-// pie文本数据旋转
-function angleText(i, num) {
-  // 每个元素的角度
-  const everyAngle = 360 / num;
-  // 文字现在所在的角度
-  const currentAngle = i * everyAngle + everyAngle / 2;
-  if (currentAngle >= 90 && currentAngle <= 270) {
-    return 180 - currentAngle;
-  } else {
-    return 360 - currentAngle;
-  }
-}
-
-// 获取pie旋转文本数据
-export function getLabelData(data) {
-  const labelData = [];
-  const length = data.length;
-  data.forEach((item, i) => {
-    const obj = {
-      name: `${item.name} `,
-      value: 1,
-      label: {
-        rotate: angleText(i, length),
-      },
-    };
-    labelData.push(obj);
-  });
-  return labelData;
-}
-
-function tooltipFormatter(params) {
-  const seriesName = params.name;
-  const color = params.color;
-  const value = params.value;
-  const htmlString = `<div>
-                            <span style="display:inline-block;width:10px;height:10px;
-                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
-                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
-                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
-                            <span>${defendXSS(value)}</span>
-                       </div>`;
-  return htmlString;
-}
-
-/**
- * 配置默认的鼠标悬浮提示框
- */
-export function setTooltip(baseOpt) {
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = tooltipFormatter;
-  }
-}
-
-/**
- * 配置标签层级样式
- */
-export function setLabel(baseOpt) {
-  if (baseOpt.radiusAxis) {
-    baseOpt.radiusAxis.z = 2;
-    baseOpt.radiusAxis.axisLabel.color = chartToken.labelColor;
-  }
-  if (baseOpt.angleAxis) {
-    baseOpt.angleAxis.zlevel = 2;
-    baseOpt.angleAxis.axisLine.show = false;
-  }
-}
+/**
+ * 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 defendXSS from '../../util/defendXSS';
+import chartToken from './chartToken';
+// 获取bar的series数据
+export function getSeriesData(data, type) {
+  const seriesData = [];
+  if (type === 'normal') {
+    data.forEach((item, i) => {
+      seriesData[i] = [];
+      for (let j = 0; j < data.length; j++) {
+        if (i == j) {
+          seriesData[i][j] = item.value;
+        } else {
+          seriesData[i][j] = 0;
+        }
+      }
+    });
+  } else {
+    data.forEach((item) => {
+      seriesData.push(item.value);
+    });
+  }
+
+  return seriesData;
+}
+
+// pie文本数据旋转
+function angleText(i, num) {
+  // 每个元素的角度
+  const everyAngle = 360 / num;
+  // 文字现在所在的角度
+  const currentAngle = i * everyAngle + everyAngle / 2;
+  if (currentAngle >= 90 && currentAngle <= 270) {
+    return 180 - currentAngle;
+  } else {
+    return 360 - currentAngle;
+  }
+}
+
+// 获取pie旋转文本数据
+export function getLabelData(data) {
+  const labelData = [];
+  const length = data.length;
+  data.forEach((item, i) => {
+    const obj = {
+      name: `${item.name} `,
+      value: 1,
+      label: {
+        rotate: angleText(i, length),
+      },
+    };
+    labelData.push(obj);
+  });
+  return labelData;
+}
+
+function tooltipFormatter(params) {
+  const seriesName = params.name;
+  const color = params.color;
+  const value = params.value;
+  const htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
+                            <span>${defendXSS(value)}</span>
+                       </div>`;
+  return htmlString;
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter;
+  }
+}
+
+/**
+ * 配置标签层级样式
+ */
+export function setLabel(baseOpt) {
+  if (baseOpt.radiusAxis) {
+    baseOpt.radiusAxis.z = 2;
+    baseOpt.radiusAxis.axisLabel.color = chartToken.labelColor;
+  }
+  if (baseOpt.angleAxis) {
+    baseOpt.angleAxis.zlevel = 2;
+    baseOpt.angleAxis.axisLine.show = false;
+  }
+}

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

@@ -1,127 +1,127 @@
-/**
- * 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 { getColor } from '../../util/color';
-import chartToken from './chartToken';
-
-function getSeriesInit(type) {
-  const baseSeries = {
-    type: 'bar',
-    coordinateSystem: 'polar',
-    emphasis: {
-      focus: 'series',
-    },
-    animation: true,
-    data: [],
-  };
-  return type === 'normal'
-    ? {
-      ...baseSeries,
-      barGap: '-100%',
-      barCategoryGap: '40%',
-      itemStyle: {
-        borderRadius: [0, 0, 2, 2],
-      },
-    }
-    : {
-      ...baseSeries,
-      barWidth: '96%',
-      itemStyle: {},
-    };
-};
-
-// 利用pie文本rotate特性作为x轴的文本
-function getPieInit() {
-  return {
-    type: 'pie',
-    label: {
-      show: true,
-      fontSize: 12,
-      color: chartToken.labelColor,
-      position: 'inside',
-    },
-    itemStyle: {
-      color: 'transparent',
-    },
-    animation: false,
-    silent: true,
-    data: undefined,
-    center: undefined
-  };
-}
-
-/**
- * 设置bar类型的series.itemStyle(因为数据属于一个series，不设置的话所有图元都是一个颜色)
- * @param {*} iChartOption
- * @param {*} seriesUnit
- */
-export function handleBarItemStyle(iChartOption, seriesUnit) {
-  const { color, data } = iChartOption;
-  const seriesColor = {};
-  const typeArr = [];
-  data.forEach((item, index) => {
-    if (typeArr.indexOf(item.type) === -1) {
-      seriesColor[item.type] = [];
-      typeArr.push(item.type);
-    }
-    seriesColor[item.type].push(index);
-  });
-  seriesUnit.itemStyle.color = ({ dataIndex }) => {
-    let num = 0;
-    for (const i in seriesColor) {
-      if (Object.hasOwnProperty.call(seriesColor, i)) {
-        if (seriesColor[i].indexOf(dataIndex) !== -1) {
-          return getColor(color, num);
-        }
-        num++;
-      }
-    }
-  };
-}
-
-/**
- * 组装echarts所需要的series
- * @param {图表数据} seriesData
- * @param {文本数据} LabelData
- * @param {坐标} polar
- * @returns
- */
-export function setSeries(seriesData, labelData, iChartOption, polar, type) {
-  const { data, label } = iChartOption;
-  const series = [];
-  if (type === 'normal') {
-    data.forEach((item, i) => {
-      const seriesUnit = getSeriesInit(type)
-      seriesUnit.name = item.name;
-      seriesUnit.data = seriesData[i];
-      series.push(seriesUnit);
-    });
-  } else {
-    const seriesUnit = getSeriesInit(type)
-    seriesUnit.data = seriesData;
-    handleBarItemStyle(iChartOption, seriesUnit);
-    series.push(seriesUnit);
-  }
-  // 需要显示角度轴坐标文本
-  const showLabel = label ? label.show : true;
-  if (showLabel && type === 'normal') {
-    const pieUnit = getPieInit()
-    pieUnit.data = labelData;
-    pieUnit.center = polar.center;
-    // 外radius
-    const radius = polar.radius[1];
-    const radiusN = Number(radius.substring(0, radius.length - 1));
-    pieUnit.radius = [radius, `${radiusN + 8}%`];
-    series.push(pieUnit);
-  }
-  return series;
-}
-
+/**
+ * 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 { getColor } from '../../util/color';
+import chartToken from './chartToken';
+
+function getSeriesInit(type) {
+  const baseSeries = {
+    type: 'bar',
+    coordinateSystem: 'polar',
+    emphasis: {
+      focus: 'series',
+    },
+    animation: true,
+    data: [],
+  };
+  return type === 'normal'
+    ? {
+      ...baseSeries,
+      barGap: '-100%',
+      barCategoryGap: '40%',
+      itemStyle: {
+        borderRadius: [0, 0, 2, 2],
+      },
+    }
+    : {
+      ...baseSeries,
+      barWidth: '96%',
+      itemStyle: {},
+    };
+};
+
+// 利用pie文本rotate特性作为x轴的文本
+function getPieInit() {
+  return {
+    type: 'pie',
+    label: {
+      show: true,
+      fontSize: 12,
+      color: chartToken.labelColor,
+      position: 'inside',
+    },
+    itemStyle: {
+      color: 'transparent',
+    },
+    animation: false,
+    silent: true,
+    data: undefined,
+    center: undefined
+  };
+}
+
+/**
+ * 设置bar类型的series.itemStyle(因为数据属于一个series，不设置的话所有图元都是一个颜色)
+ * @param {*} iChartOption
+ * @param {*} seriesUnit
+ */
+export function handleBarItemStyle(iChartOption, seriesUnit) {
+  const { color, data } = iChartOption;
+  const seriesColor = {};
+  const typeArr = [];
+  data.forEach((item, index) => {
+    if (typeArr.indexOf(item.type) === -1) {
+      seriesColor[item.type] = [];
+      typeArr.push(item.type);
+    }
+    seriesColor[item.type].push(index);
+  });
+  seriesUnit.itemStyle.color = ({ dataIndex }) => {
+    let num = 0;
+    for (const i in seriesColor) {
+      if (Object.hasOwnProperty.call(seriesColor, i)) {
+        if (seriesColor[i].indexOf(dataIndex) !== -1) {
+          return getColor(color, num);
+        }
+        num++;
+      }
+    }
+  };
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {图表数据} seriesData
+ * @param {文本数据} LabelData
+ * @param {坐标} polar
+ * @returns
+ */
+export function setSeries(seriesData, labelData, iChartOption, polar, type) {
+  const { data, label } = iChartOption;
+  const series = [];
+  if (type === 'normal') {
+    data.forEach((item, i) => {
+      const seriesUnit = getSeriesInit(type)
+      seriesUnit.name = item.name;
+      seriesUnit.data = seriesData[i];
+      series.push(seriesUnit);
+    });
+  } else {
+    const seriesUnit = getSeriesInit(type)
+    seriesUnit.data = seriesData;
+    handleBarItemStyle(iChartOption, seriesUnit);
+    series.push(seriesUnit);
+  }
+  // 需要显示角度轴坐标文本
+  const showLabel = label ? label.show : true;
+  if (showLabel && type === 'normal') {
+    const pieUnit = getPieInit()
+    pieUnit.data = labelData;
+    pieUnit.center = polar.center;
+    // 外radius
+    const radius = polar.radius[1];
+    const radiusN = Number(radius.substring(0, radius.length - 1));
+    pieUnit.radius = [radius, `${radiusN + 8}%`];
+    series.push(pieUnit);
+  }
+  return series;
+}
+

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

@@ -1,62 +1,62 @@
-/**
- * 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 { getSeriesData, getLabelData, setTooltip, setLabel } from './handleOption';
-import { setSeries } from './handleSeries';
-import PolarCoordSys from '../../option/PolarSys';
-import { CHART_TYPE } from '../../util/constants';
-
-export default class PolarBarChart {
-
-    static name = CHART_TYPE.POLAR_BAR
-
-    constructor(iChartOption, chartInstance) {
-        this.baseOption = {};
-        this.iChartOption = {};
-        // 组装 iChartOption, 补全默认值
-        this.iChartOption = init(iChartOption);
-        // 根据 iChartOption 组装 baseOption
-        this.updateOption(chartInstance);
-    }
-
-    updateOption(chartInstance) {
-        const iChartOption = this.iChartOption;
-        const data = iChartOption.data;
-        // 装载除series之外的其他配置
-        PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.POLAR_BAR);
-        const type = iChartOption.type || 'normal';
-        // angleAxis赋值
-        this.baseOption.angleAxis.data = [];
-        if (type !== 'normal') {
-            this.baseOption.angleAxis.axisLabel.show = true;
-        }
-        if (data) {
-            data.forEach(item => {
-                this.baseOption.angleAxis.data.push(item.name);
-            });
-            // tooltip悬浮框
-            setTooltip(this.baseOption);
-            // 调整label标签和图层的层级
-            setLabel(this.baseOption);
-            // legend数据
-            this.baseOption.legend.data = type === 'normal' ? data : [];
-            // series bar数据
-            const seriesData = getSeriesData(data, type);
-            // pie数据
-            const labelData = getLabelData(data);
-            this.baseOption.series = setSeries(seriesData, labelData, iChartOption, this.baseOption.polar, type);
-        }
-    }
-    getOption() {
-        return this.baseOption;
-    }
+/**
+ * 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 { getSeriesData, getLabelData, setTooltip, setLabel } from './handleOption';
+import { setSeries } from './handleSeries';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class PolarBarChart {
+
+    static name = CHART_TYPE.POLAR_BAR
+
+    constructor(iChartOption, chartInstance) {
+        this.baseOption = {};
+        this.iChartOption = {};
+        // 组装 iChartOption, 补全默认值
+        this.iChartOption = init(iChartOption);
+        // 根据 iChartOption 组装 baseOption
+        this.updateOption(chartInstance);
+    }
+
+    updateOption(chartInstance) {
+        const iChartOption = this.iChartOption;
+        const data = iChartOption.data;
+        // 装载除series之外的其他配置
+        PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.POLAR_BAR);
+        const type = iChartOption.type || 'normal';
+        // angleAxis赋值
+        this.baseOption.angleAxis.data = [];
+        if (type !== 'normal') {
+            this.baseOption.angleAxis.axisLabel.show = true;
+        }
+        if (data) {
+            data.forEach(item => {
+                this.baseOption.angleAxis.data.push(item.name);
+            });
+            // tooltip悬浮框
+            setTooltip(this.baseOption);
+            // 调整label标签和图层的层级
+            setLabel(this.baseOption);
+            // legend数据
+            this.baseOption.legend.data = type === 'normal' ? data : [];
+            // series bar数据
+            const seriesData = getSeriesData(data, type);
+            // pie数据
+            const labelData = getLabelData(data);
+            this.baseOption.series = setSeries(seriesData, labelData, iChartOption, this.baseOption.polar, type);
+        }
+    }
+    getOption() {
+        return this.baseOption;
+    }
 }