@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/RadarChart/BaseOption.js

@@ -0,0 +1,248 @@
+/**
+ * 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 chartToken from './chartToken';
+
+// 雷达坐标系基础配置
+function getRadar() {
+    return {
+        // 雷达坐标系位置
+        center: ['50%', '50%'],
+        // 雷达坐标系半径
+        radius: '50%',
+        // 指示器名称与轴的距离
+        axisNameGap: 15,
+        // 指示器轴的分割段数
+        splitNumber: 4,
+        shape: 'circle',
+        // 坐标轴的标签是否响应和触发鼠标事件
+        triggerEvent: false,
+        // 坐标轴射线
+        axisLine: {
+            lineStyle: {
+                color: Token.config.radarAxisLineColor,
+                width: Token.config.radarAxisLineWidth,
+                type: Token.config.radarAxisLineType,
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: Token.config.radarAxisTickLineColor,
+                width: Token.config.radarAxisTickLineWidth,
+                type: Token.config.radarAxisTickLineType
+            }
+        },
+        // 坐标轴射线的刻度,只显示一条射线的刻度,其他射线的刻度需要在指示器数据indicator中每项单独配置axisLabel: { show: false }
+        axisLabel: {
+            show: false,
+            color: Token.config.radarAxisLabelColor,
+            fontSize: Token.config.radarAxisLabelFontSize
+        },
+        // 坐标轴圆环分隔区域填充
+        splitArea: { show: false },
+        // 坐标轴圆环分隔线
+        splitLine: {
+            lineStyle: {
+                color: Token.config.radarSplitLineColor,
+                width: Token.config.radarSplitLineWidth,
+                type: Token.config.radarSplitLineType,
+            },
+        },
+        // 坐标轴数据
+        indicator: undefined,
+        // 指示器名称样式设置
+        axisName: {
+            show: true,
+            color: Token.config.radarAxisNameColor,
+            fontSize: Token.config.radarAxisNameFontSize,
+        },
+    }
+}
+
+// 阈值线雷达坐标系基础配置
+function getMarkRadarOption() {
+    return {
+        center: undefined,
+        // 阈值线的radius应该是一个百分比，或者是实际的像素值
+        radius: undefined,
+        splitNumber: 1,
+        shape: 'circle',
+        axisName: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            show: false,
+        },
+        splitArea: {
+            show: false,
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                width: Token.config.radarSplitLineWidth,
+                color: Token.config.colorState.colorError,
+                type: 'dashed',
+            },
+        },
+        indicator: undefined,
+    };
+}
+
+
+function getRedPointerRadar() {
+    return {
+        // 雷达位置，保持和初始坐标系一致，
+        center: ['50%', '50%'],
+        // 雷达半径，保持和初始坐标系一致，
+        radius: '50%',
+        // 控制指示器名称是否显示
+        axisName: {
+            show: false,
+        },
+        startAngle: undefined, // 轴线的角度根据需求自己定义,起始点是水平方向
+        // 指示器轴的分割段数，和初始坐标轴一致
+        splitNumber: 4,
+        shape: 'circle',
+        // 坐标轴圆环分隔区域填充
+        splitArea: {
+            show: false,
+        },
+        // 坐标轴射线
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            show: false,
+        },
+        // 坐标轴圆环分隔线
+        splitLine: {
+            show: false,
+        },
+        indicator: undefined,
+    };
+}
+
+// 雷达图基础series配置
+function getSeriesUnit() {
+    return {
+        type: 'radar',
+        name: 'data',
+        // 使用的雷达坐标系
+        radarIndex: 0,
+        // 拐点的标记大小(常规减去2是为了阈值状态下hover能盖住原有symbol点)
+        symbolSize: chartToken.symbolSize,
+        // 拐点样式
+        itemStyle: {
+            // 常规场景不显示边框
+            borderWidth: chartToken.itemBorderWidth,
+            // borderWidth常规为0，此处设置borderColor为透明色+是为了避免hover移出symbol瞬间白色闪烁的问题
+            borderColor: chartToken.itemBorderColor,
+        },
+        // 填充面积
+        areaStyle: {
+            opacity: 0.15,
+        },
+        lineStyle: {
+            width: chartToken.lineWidth,
+        },
+        // 高亮的样式
+        emphasis: {
+            focus: 'none',
+            areaStyle: {
+                opacity: 0.3,
+            },
+            itemStyle: {
+                color: chartToken.emphasisItemColor,
+                borderWidth: chartToken.emphasisItemBorderWidth,
+                // borderColor颜色在各系列数据中单独设置
+            }
+        },
+        data: undefined,
+    };
+};
+
+//  自定义阈值线雷达图基础series配置
+function getThresholdSeries() {
+    return {
+        type: 'radar',
+        symbol: 'none',
+        // 拐点大小
+        symbolSize: chartToken.symbolSize,
+        silent: true,
+        // 使用的雷达坐标系的索引
+        radarIndex: 1,
+        areaStyle: {
+            color: chartToken.areaColor,
+        },
+        lineStyle: {
+            color: Token.config.colorState.colorError,
+            width: chartToken.lineWidth,
+            type: 'dashed',
+        },
+        data: undefined,
+    };
+}
+
+
+//  阈值线雷达图红点基础series配置
+function handleRedPointerSeries(index, dataValue, seriesName, isgradient = false) {
+    const { colorError } = Token.config.colorState
+    return {
+        name: 'threshold',
+        type: 'radar',
+        // 拐点大小  比常规的大小大2是为了盖住下方的点
+        symbolSize: chartToken.symbolSize + 2,
+        // 图形响应和触发鼠标事件
+        silent: false,
+        z: 99,
+        // 使用的雷达坐标系的索引
+        radarIndex: (isgradient ? 1 : 2) + index,
+        // 拐点的样式
+        itemStyle: {
+            color: colorError,
+            // borderWidth常规为0，此处设置borderColor为透明色是为了避免hover移出symbol瞬间白色闪烁的问题
+            borderColor: chartToken.itemBorderColor,
+            borderWidth: chartToken.itemBorderWidth,
+        },
+        lineStyle: {
+            width: chartToken.thresholdLineWidth,
+        },
+        emphasis: {
+            focus: 'none',
+            itemStyle: {
+                color: chartToken.emphasisItemColor,
+                borderWidth: chartToken.emphasisItemBorderWidth,
+                borderColor: colorError
+            }
+        },
+        data: [
+            {
+                value: dataValue,
+                name: seriesName, // 数据的名称，为了图例的点击消失生效，和系列的名字保持一致
+            },
+        ],
+    };
+}
+
+export default getRadar
+export { getMarkRadarOption, getThresholdSeries, getSeriesUnit, getRedPointerRadar, handleRedPointerSeries }
+

package/src/components/charts/components/RadarChart/GradientRadar/index.js

@@ -0,0 +1,421 @@
+/**
+ * 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 Paint from '../../../util/paint';
+import { appendDom } from '../../../util/dom';
+import { isString, isArray } from '../../../util/type';
+import { getExceededMarkLineValue, handleRedPointerSeries, handleRedPointerRadar } from '../handleSeries';
+import { setStateBarColor, getStateList } from '../../ProcessChart/handleSeries';
+import { getColor, codeToRGB } from '../../../util/color';
+import { handletipHtml, checkValue } from '../handleOptipn';
+import defendXSS from '../../../util/defendXSS';
+import merge from '../../../util/merge';
+import chartToken from '../chartToken';
+
+const SUFFIX_CLASSNAME = 'radarCanvas';
+
+const COEFFICIENT_X = [1, 1, -1, -1];
+
+const COEFFICIENT_Y = [-1, 1, 1, -1];
+
+class GradientRadar {
+  painter = null;
+  centerPoint = {
+    x: 0,
+    y: 0
+  };
+
+  canvasDom = null;
+  echartsIns = null;
+  iChartOption = null;
+  // 容器dom信息
+  containerDom = {
+    target: null,
+    width: 0,
+    height: 0
+  };
+
+  // 计算半径的标尺
+  radiusScale = 0;
+  radius = {
+    isArray: false,
+    value: undefined
+  };
+
+  pointsMap = null;
+  baseOption = null;
+  radarKeys = null;
+  constructor(echartsIns, params) {
+    this.echartsIns = echartsIns;
+    const container = echartsIns.getDom();
+    this.containerDom.target = container;
+    this.getContainerSize();
+    const { iChartOption, baseOption, radarKeys } = params;
+    this.iChartOption = iChartOption;
+    this.baseOption = baseOption;
+    this.radarKeys = radarKeys;
+  }
+
+  // 初始化canvas
+  init() {
+    if (!this.iChartOption.gradient) return;
+    if (!this.containerDom.target) return;
+    this.initCanvas();
+    this.moveStartToRadarCenter();
+    this.getRadius();
+    this.getPointsMap();
+    this.paintView();
+  }
+
+  paintView() {
+    this.paintGradientArea();
+    this.paintRadarArea();
+  }
+
+  getContainerSize() {
+    this.containerDom.width = this.echartsIns.getWidth();
+    this.containerDom.height = this.echartsIns.getHeight();
+  }
+
+  setCanvasSize() {
+    this.canvasDom.width = this.containerDom.width;
+    this.canvasDom.height = this.containerDom.height;
+  }
+
+  initCanvas() {
+    if (this.containerDom.target) {
+      const dom = this.containerDom.target.getElementsByClassName(`huicharts-${SUFFIX_CLASSNAME}`)[0];
+      if (dom) this.containerDom.target.removeChild(dom);
+    }
+    const canvas = document.createElement('canvas');
+    this.canvasDom = canvas;
+    canvas.id = SUFFIX_CLASSNAME;
+    canvas.className = `huicharts-${SUFFIX_CLASSNAME}`;
+    this.setCanvasSize();
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.position = 'absolute';
+    canvas.style.left = 0;
+    canvas.style.top = 0;
+    canvas.style['pointer-events'] = 'none';
+    appendDom(this.containerDom.target, canvas);
+    this.initPainter();
+  }
+
+  initPainter() {
+    const ctx = this.canvasDom.getContext('2d');
+    this.painter = new Paint(ctx);
+    this.setPainter();
+  }
+
+  setPainter() {
+    this.painter.lineCap('round');
+    this.painter.lineJoin('round');
+    this.painter.lineWidth(3);
+  }
+
+  // 根据配置获取实际半径的像素尺寸
+  convertsRadiusToNub(val) {
+    const r = this.formatterVal(val);
+    return this.isPctString(val) ? (r * this.radiusScale / 2) : r;
+  }
+
+  getRadius() {
+    this.getRadiusScale();
+    const { position } = this.iChartOption;
+    const radius = position?.radius || '50%';
+    if (isArray(radius)) {
+      this.radius.isArray = true;
+      const [inner, outer] = radius;
+      const innerR = this.convertsRadiusToNub(inner);
+      const outerR = this.convertsRadiusToNub(outer);
+      this.radius.value = [innerR, outerR];
+    }
+    else {
+      this.radius.value = this.convertsRadiusToNub(radius);
+    }
+  }
+
+  getRadiusScale() {
+    // val若是百分比，采用可视区尺寸（容器高宽中较小一项），echarts的说明
+    this.radiusScale = this.containerDom.width >= this.containerDom.height ? this.containerDom.height : this.containerDom.width;
+  }
+
+  // 移动canvas起点到雷达的起点
+  moveStartToRadarCenter() {
+    this.getCenterPoint();
+    // 保存初始画布
+    this.painter.save();
+    this.painter.translate(this.centerPoint.x, this.centerPoint.y);
+  }
+
+  formatterVal(val) {
+    if (this.isPctString(val)) {
+      return Number.parseFloat(val) / 100;
+    }
+    return Number.parseFloat(val);
+  }
+
+  getPoint(val, isY) {
+    const size = isY ? this.containerDom.height : this.containerDom.width;
+    const actualVal = this.formatterVal(val);
+    return this.isPctString(val) ? actualVal * size : actualVal;
+  }
+
+  // 判断是否是百分比
+  isPctString(val) {
+    return isString(val) && val.includes('%');
+  }
+
+  // 获取中心坐标
+  getCenterPoint() {
+    const { position } = this.iChartOption;
+    const center = position?.center || ['50%', '50%'];
+    const x = this.getPoint(center[0]);
+    const y = this.getPoint(center[1], true);
+    this.centerPoint.x = x;
+    this.centerPoint.y = y;
+  }
+
+  //   清空画布
+  clearCanvas() {
+    this.painter.restore();
+    this.painter.clearRect(0, 0, this.containerDom.width, this.containerDom.height);
+  }
+
+  paintRadarArea() {
+    if (!this.pointsMap) return;
+    this.pointsMap.forEach((point, pointIndex) => {
+      pointIndex === this.pointsMap.length - 1 ? this.paintRadarSide(point, this.pointsMap[0]) : this.paintRadarSide(point, this.pointsMap[pointIndex + 1]);
+    });
+    this.pointsMap.forEach((point) => {
+      this.paintPoint(point);
+    });
+  }
+
+  clipGradientArea() {
+    this.painter.save();
+    this.painter.beginPath();
+    this.pointsMap.forEach((point, index) => {
+      const [x, y] = point.point;
+      index === 0 ? this.painter.moveTo(x, y) : this.painter.lineTo(x, y);
+      if (index === this.pointsMap.length - 1) {
+        const first = this.pointsMap[0];
+        this.painter.lineTo(first.point[0], first.point[1]);
+      }
+    });
+    this.painter.clip();
+  }
+
+  paintGradientArea() {
+    if (!this.pointsMap) return;
+    this.clipGradientArea();
+    const colorEnd = 'rgba(255,255,255,0.01)';
+    this.pointsMap.forEach(point => {
+      const [x, y] = point.point;
+      const { color } = point;
+      if (!color.includes('#')) throw new Error('RadarChart.gradient,currently, only hexadecimal colors are supported,such as #FFFFFF');
+      const colorStart = codeToRGB(color, 0.2);
+      const radius = point.distance * 0.9;
+      const radialGradient = this.painter.createRadialGradient(x, y, 0, x, y, radius);
+      radialGradient.addColorStop(0, colorStart);
+      radialGradient.addColorStop(1, colorEnd);
+      this.painter.beginPath();
+      this.painter.fillStyle(radialGradient);
+      this.painter.moveTo(x, y);
+      this.painter.arc(x, y, radius, 0, 2 * Math.PI);
+      this.painter.fill();
+      this.painter.closePath();
+    });
+    this.painter.restore();
+  }
+
+  paintPoint(point) {
+    const x = point.point[0];
+    const y = point.point[1];
+    const fillColor = chartToken.gradientItemBorderColor;
+    const r = (chartToken.symbolSize + 1 - (2 * chartToken.lineWidth)) / 2 < 0 ? 0 : (chartToken.symbolSize + 1 - (2 * chartToken.lineWidth)) / 2;
+    this.painter.fillStyle(fillColor);
+    this.painter.beginPath();
+    this.painter.moveTo(x, y);
+    this.painter.arc(x, y, r, 0, 2 * Math.PI);
+    this.painter.fill();
+    this.painter.closePath();
+  }
+
+  paintRadarSide(point, nextPoint) {
+    const x = point.point[0];
+    const y = point.point[1];
+    const x1 = nextPoint.point[0];
+    const y1 = nextPoint.point[1];
+    const linearGradient = this.painter.createLinearGradient(x, y, x1, y1);
+    linearGradient.addColorStop(0, point.color);
+    linearGradient.addColorStop(1, nextPoint.color);
+    this.painter.strokeStyle(linearGradient);
+    this.painter.beginPath();
+    this.painter.moveTo(x, y);
+    this.painter.lineTo(x1, y1);
+    this.painter.stroke();
+    this.painter.closePath();
+  }
+
+  // 点到圆心的距离
+  getPointDistanceFromCenter(dataItem) {
+    const { dataName, dataValue } = dataItem;
+    const max = this.baseOption.radar[0].indicator.find(item => item.name === dataName).max;
+    if (this.radius.isArray) {
+      return (this.radius.value[1] - this.radius.value[0]) * (dataValue / max) + this.radius.value[0];
+    }
+    return this.radius.value * (dataValue / max);
+  }
+
+  //  逆时针方向方向，象限特殊判断和常规角度不一致
+  judgeQuadrants(angle) {
+    if (angle >= 0 && angle < 90) {
+      return 4;
+    }
+    else if (angle >= 90 && angle < 180) {
+      return 3;
+    }
+    else if (angle >= 180 && angle < 270) {
+      return 2;
+    }
+    else if (angle >= 270 && angle <= 360) {
+      return 1;
+    }
+  }
+
+  getJsAngle(angle) {
+    return angle * Math.PI / 180;
+  }
+
+  getPointCoordinate(dataItem, dataIndex, distance) {
+    // echarts加角度以逆时针的方向从90度加角度，特殊处理
+    const angle = (360 / this.radarKeys.length) * dataIndex;
+    let x = 0;
+    let y = 0;
+    const quadrant = this.judgeQuadrants(angle);
+    const nubAngle = angle - (90 * (4 - quadrant));
+    const actualAngle = this.getJsAngle(nubAngle);
+    const isEvenQuadrant = quadrant % 2 === 0;
+    x = (isEvenQuadrant ? Math.sin(actualAngle) : Math.cos(actualAngle)) * COEFFICIENT_X[quadrant - 1];
+    y = (isEvenQuadrant ? Math.cos(actualAngle) : Math.sin(actualAngle)) * COEFFICIENT_Y[quadrant - 1];
+    x = x * distance;
+    y = y * distance;
+    return [x, y];
+  }
+
+  setSeries() {
+    if (!this.pointsMap) return;
+    const seriesUnit = this.baseOption.series[0];
+    seriesUnit.lineStyle.opacity = 0;
+    seriesUnit.areaStyle.opacity = 0;
+    seriesUnit.emphasis = {};
+    this.pointsMap.forEach((item, index) => {
+      const { seriesName, dataName, dataValue, color } = item;
+      const dataNameIndex = this.radarKeys.indexOf(dataName);
+      const unitRadar = handleRedPointerRadar(this.baseOption, this.radarKeys, dataNameIndex, dataName);
+      const unitPointerSeries = handleRedPointerSeries(index, dataValue, seriesName, true);
+      unitPointerSeries.itemStyle.color = color;
+      unitPointerSeries.emphasis.itemStyle.color = color;
+      unitPointerSeries.emphasis.itemStyle.borderColor = color;
+      this.baseOption.radar.push(unitRadar);
+      this.baseOption.series.push(unitPointerSeries);
+    });
+  }
+
+  getPointColor(value, index) {
+    const { state, color } = this.iChartOption;
+    if (state) {
+      const stateList = getStateList(state);
+      return setStateBarColor(value, stateList);
+    }
+    else {
+      return getColor(color, index);
+    }
+  }
+
+  // 获取数据点的集合
+  getPointsMap() {
+    const { data } = this.iChartOption;
+    const exceeded = getExceededMarkLineValue(data, 0, false);
+    this.pointsMap = exceeded.map((item, index) => {
+      const color = this.getPointColor(item.dataValue, index);
+      const distance = this.getPointDistanceFromCenter(item);
+      const point = this.getPointCoordinate(item, index, distance);
+      return { ...item, color, point, distance };
+    });
+  }
+
+  setLegend() {
+    this.baseOption.legend.show = false;
+  }
+
+  tipFormatter() {
+    this.baseOption.tooltip.formatter = params => {
+      const seriesdata = params.data;
+      const dataName = seriesdata.name;
+      let value = seriesdata.value;
+      if (params.seriesName === 'threshold') {
+        value = this.radarKeys.map(key => {
+          return this.iChartOption.data[dataName][key];
+        });
+      }
+      let htmlString = `<div style="margin-bottom:4px;">${defendXSS(dataName)}</div>`;
+      value.forEach((item, index) => {
+        const color = this.pointsMap[index].color;
+        htmlString += `<div style="margin-bottom:4px;">
+            <span style="display:inline-block;width:8px;
+            height:8px;margin-right:8px;border-radius:5px;
+            background-color:${defendXSS(color)};"></span>
+            <span style="display:inline-block;margin-right:8px;
+            min-width:60px;font-size:12px">${defendXSS(this.radarKeys[index])}</span>
+            <span style="font-size:14px">${defendXSS(checkValue(item))}</span>
+            </div>`;
+      });
+      return htmlString;
+    };
+  }
+
+  setTooltip() {
+    const { tipHtml, tooltip } = this.iChartOption;
+    tipHtml ? handletipHtml(this.baseOption.tooltip, tipHtml, this.radarKeys) : this.tipFormatter();
+    if (tooltip) {
+      merge(this.baseOption.tooltip, tooltip);
+    }
+    // 针对tooltip中传formatter做特殊处理
+    if (tooltip?.formatter) {
+      this.baseOption.tooltip.formatter = (params, ticket, callback) => {
+        return tooltip.formatter(params, this.radarKeys, ticket, callback);
+      };
+    }
+  }
+
+  refreshConfig() {
+    this.getContainerSize();
+    this.setCanvasSize();
+    // 修改canva的宽高属性会导致之前的ctx失效
+    this.setPainter();
+    this.moveStartToRadarCenter();
+    this.getRadius();
+    this.getPointsMap();
+  }
+
+  resize() {
+    if (this.containerDom.target && this.canvasDom) {
+      if (this.painter) this.clearCanvas();
+      this.refreshConfig();
+      this.paintView();
+    }
+  }
+}
+
+export default GradientRadar;

package/src/components/charts/components/RadarChart/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.RADAR)
+
+export default chartToken;