@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +1,131 @@
+/**
+ * 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, codeToRGB, changeRgbaOpacity } from '../../util/color';
+import cloneDeep from '../../util/cloneDeep';
+
+function handleResObj(item, colors, index) {
+  const resObj = cloneDeep(item);
+  resObj.color = {
+    rgba: codeToRGB(getColor(colors, index), 1),
+    from: 1,
+    to: 0.2,
+  };
+  return resObj;
+}
+
+function handleTempLegend(tempLegend, legendOffset, index) {
+  if (tempLegend.orient === 'horizontal') {
+    const offset = legendOffset || 30;
+    const bottom = parseFloat(tempLegend.bottom) - index * parseFloat(offset);
+    if (tempLegend.bottom.toString().indexOf('%') !== -1) {
+      tempLegend.bottom = `${bottom}%`;
+    } else {
+      tempLegend.bottom = bottom;
+    }
+  } else {
+    const offset = legendOffset || 120;
+    const left = parseFloat(tempLegend.left) + index * parseFloat(offset);
+    if (tempLegend.left.toString().indexOf('%') !== -1) {
+      tempLegend.left = `${left}%`;
+    } else {
+      tempLegend.left = left;
+    }
+  }
+}
+
+function handleTempSeriesObj(item) {
+  const tempSeriesObj = cloneDeep(item);
+  tempSeriesObj.itemStyle = {
+    color: item.color.rgba,
+  };
+  return tempSeriesObj;
+}
+
+/**
+ * 递归遍历数据
+ * @param {*} data
+ * @param {*} innerData
+ * @param {*} innerIndex
+ */
+function installInnerData(data, innerData, innerIndex) {
+  data.children &&
+    data.children.forEach((citem, cindex) => {
+      if (!innerData[innerIndex]) {
+        innerData[innerIndex] = [];
+      }
+      const colorFrom =
+        data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 1);
+      const colorTo = data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 2);
+      citem.color = {
+        rgba: changeRgbaOpacity(data.color.rgba, colorFrom),
+        from: colorFrom,
+        to: colorTo,
+      };
+      innerData[innerIndex].push(citem);
+      // 如果还有子层，则继续递归遍历
+      if (citem.children) {
+        installInnerData(citem, innerData, innerIndex + 1);
+      }
+    });
+}
+
+// 针对多重圆环图表需求，图表需要进行特殊处理
+function handleMulti(type, baseOption, legend, data) {
+  if (type === 'multi-circle') {
+    const colors = baseOption.color;
+    // 给源数据添加颜色属性
+    const outer = data.map((item, index) => {
+      const resObj = handleResObj(item, colors, index);
+      return resObj;
+    });
+    // 组装子层数据，给每个子数据赋值颜色
+    const inner = [];
+    const innerIndex = 0;
+    outer.forEach(data => {
+      installInnerData(data, inner, innerIndex);
+    });
+    // 组装series
+    inner.forEach((innerData, innerIndex) => {
+      const tempSeries = cloneDeep(baseOption.series[0]);
+      tempSeries.data = innerData.map(item => {
+        const tempSeriesObj = handleTempSeriesObj(item);
+        return tempSeriesObj;
+      });
+
+      const innerDiff = parseFloat(tempSeries.radius[1]) - parseFloat(tempSeries.radius[0]);
+      tempSeries.radius = tempSeries.radius.map(item => {
+        return `${parseFloat(item) + innerDiff * (innerIndex + 1)}%`;
+      });
+      baseOption.series.push(tempSeries);
+    });
+    baseOption.series.forEach(i => {
+      i.label = { show: false };
+      i.labelLine = { show: false };
+    });
+    // 组装legend
+    const dataArray = [outer].concat(inner);
+    const originLegend = baseOption.legend;
+    const legendOffset = legend.offset;
+    baseOption.legend = [];
+    dataArray.forEach((array, index) => {
+      const tempLegend = cloneDeep(originLegend);
+      const tempLegendData = array.map(item => {
+        return item.name;
+      });
+      tempLegend.data = tempLegendData;
+      handleTempLegend(tempLegend, legendOffset, index);
+      baseOption.legend.push(tempLegend);
+    });
+  }
+}
+
+export default handleMulti;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +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;
+}
+