@ebiz/designer-components 0.0.18

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

@@ -0,0 +1,170 @@
+/**
+ * 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 cloneDeep from '../../util/cloneDeep';
+import chartToken from './chartToken';
+import Token from '../../feature/token';
+
+export const seriesInit = {
+  type: 'liquidFill',
+  center: ['50%', '50%'],
+  waveAnimation: true,
+  color: '',
+  backgroundStyle: {
+    color: '',
+  },
+  outline: {
+    itemStyle: {
+      borderColor: '',
+      shadowBlur: 0,
+    },
+  },
+  itemStyle: {
+    opacity: 1,
+    shadowBlur: 5,
+    shadowColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  label: {},
+  data: [],
+};
+
+// 设置Label的属性
+function setLabel(seriesTarget, seriesSource, label) {
+  const { labelColor } = chartToken;
+  // 多个数据：series里面label存在
+  // 单个数据：没有series时一级属性label存在
+  if (seriesSource.label !== undefined) {
+    seriesTarget.label.color = labelColor;
+    seriesTarget.label.position = 'inside';
+    seriesTarget.label.show = true;
+    merge(seriesTarget.label, seriesSource.label);
+  }
+  // 多个/单个数据：series里面label不存在但一级属性label存在
+  else if (seriesSource.label === undefined && label) {
+    seriesTarget.label.color = labelColor;
+    seriesTarget.label.position = 'inside';
+    seriesTarget.label.show = true;
+    merge(seriesTarget.label, label);
+  }
+  // 多个/单个数据：series和一级属性都不存在label，设置初始值
+  else {
+    seriesTarget.label.color = labelColor;
+    seriesTarget.label.position = 'inside';
+    seriesTarget.label.show = true;
+  }
+}
+
+// 设置Outline的属性
+function setOutline(seriesTarget, seriesSource, outline) {
+  const { colorGroup } = Token.config;
+  const itemStyle = seriesTarget.outline.itemStyle;
+  // 多个数据：series里面outline存在
+  // 单个数据：没有series时一级属性outline存在
+  if (seriesSource.outline !== undefined) {
+    itemStyle.borderColor = colorGroup[0];
+    merge(seriesTarget.outline, seriesSource.outline);
+  }
+  // 多个/单个数据：series里面outline不存在但一级属性outline存在
+  else if (seriesSource.outline === undefined && outline) {
+    itemStyle.borderColor = colorGroup[0];
+    merge(seriesTarget.outline, outline);
+  }
+  // 多个/单个数据：series和一级属性都不存在outline，设置初始值
+  else {
+    itemStyle.borderColor = colorGroup[0];
+  }
+}
+
+// 设置Color的属性
+function setColor(seriesTarget, seriesSource, color) {
+  const { colorGroup } = Token.config;
+  // 多个数据：series里面color存在
+  // 单个数据：没有series时一级属性存在color
+  if (seriesSource.color !== undefined) {
+    seriesTarget.color = [...colorGroup];
+    merge(seriesTarget.color, seriesSource.color);
+  }
+  // 多个/单个数据：series里面color不存在但一级属性color存在
+  else if (seriesSource.color === undefined && color) {
+    seriesTarget.color = [...colorGroup];
+    merge(seriesTarget.color, color);
+  }
+  // 多个/单个数据：series和一级属性都不存在color，设置初始值
+  else {
+    seriesTarget.color = [...colorGroup];
+  }
+}
+
+// 设置BackgroundStyle的属性
+function setBackgroundStyle(seriesTarget, seriesSource, backgroundStyle) {
+  const { backgroundColor } = chartToken;
+  // 多个数据：series里面backgroundStyle存在
+  // 单个数据：没有series时一级属性backgroundStyle存在
+  if (seriesSource.backgroundStyle !== undefined) {
+    seriesTarget.backgroundStyle.color = backgroundColor;
+    merge(seriesTarget.backgroundStyle, seriesSource.backgroundStyle);
+  }
+  // 多个/单个数据：series里面backgroundStyle不存在但一级属性backgroundStyle存在
+  else if (seriesSource.backgroundStyle === undefined && backgroundStyle) {
+    seriesTarget.backgroundStyle.color = backgroundColor;
+    merge(seriesTarget.backgroundStyle, backgroundStyle);
+  }
+  // 多个/单个数据：series和一级属性都不存在backgroundStyle，设置初始值
+  else {
+    seriesTarget.backgroundStyle.color = backgroundColor;
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { data, shape, color, name, label, outline, backgroundStyle, waveAnimation, radius, center } = iChartOption;
+  const series = [];
+  const selfSeries = iChartOption.series;
+  if (selfSeries !== undefined && selfSeries.length != 0) {
+    selfSeries.forEach(item => {
+      const seriesUnit = cloneDeep(seriesInit);
+      item.data && (seriesUnit.data = item.data);
+      item.center && (seriesUnit.center = item.center);
+      item.radius && (seriesUnit.radius = item.radius);
+      item.shape && (seriesUnit.shape = item.shape);
+      item.waveAnimation !== undefined && (seriesUnit.waveAnimation = item.waveAnimation);
+      setColor(seriesUnit, item, color);
+      setBackgroundStyle(seriesUnit, item, backgroundStyle);
+      setOutline(seriesUnit, item, outline);
+      setLabel(seriesUnit, item, label);
+      merge(seriesUnit, item);
+      series.push(seriesUnit);
+    });
+  } else {
+    const seriesUnit = cloneDeep(seriesInit);
+    data && (seriesUnit.data = data);
+    name && (seriesUnit.name = name);
+    center && (seriesUnit.center = center);
+    radius && (seriesUnit.radius = radius);
+    shape && (seriesUnit.shape = shape);
+    waveAnimation !== undefined && (seriesUnit.waveAnimation = waveAnimation); 
+    // 配置color
+    setColor(seriesUnit, iChartOption);
+    // 配置backgroundStyle
+    setBackgroundStyle(seriesUnit, iChartOption);
+    // 配置outlineColor
+    setOutline(seriesUnit, iChartOption);
+    // 配置label
+    setLabel(seriesUnit, iChartOption);
+    series.push(seriesUnit);
+  }
+  return series;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { setSeries } from './handleSeries.js';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+import './plugSeries.js';
+import './plugView.js';
+
+export default class LiquidfillChart {
+
+  static name = CHART_TYPE.LIQUID_FILL
+
+  constructor(iChartOption, liquidChartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(liquidChartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.LIQUID_FILL);
+    // 组装series 
+    this.baseOption.series = setSeries(iChartOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+}

package/src/components/charts/components/LiquidfillChart/plugSeries.js

@@ -0,0 +1,78 @@
+import * as echarts from 'echarts';
+
+echarts.extendSeriesModel({
+
+    type: 'series.liquidFill',
+
+    optionUpdated: function () {
+        var option = this.option;
+        option.gridSize = Math.max(Math.floor(option.gridSize), 4);
+    },
+
+    getInitialData: function (option, ecModel) {
+        var dimensions = echarts.helper.createDimensions(option.data, {
+            coordDimensions: ['value']
+        });
+        var list = new echarts.List(dimensions, this);
+        list.initData(option.data);
+        return list;
+    },
+
+    defaultOption: {
+        color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
+        center: ['50%', '50%'],
+        radius: '50%',
+        amplitude: '8%',
+        waveLength: '80%',
+        phase: 'auto',
+        period: 'auto',
+        direction: 'right',
+        shape: 'circle',
+
+        waveAnimation: true,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear',
+        animationDuration: 2000,
+        animationDurationUpdate: 1000,
+
+        outline: {
+            show: true,
+            borderDistance: 8,
+            itemStyle: {
+                color: 'none',
+                borderColor: '#294D99',
+                borderWidth: 8,
+                shadowBlur: 20,
+                shadowColor: 'rgba(0, 0, 0, 0.25)'
+            }
+        },
+
+        backgroundStyle: {
+            color: '#E3F7FF'
+        },
+
+        itemStyle: {
+            opacity: 0.95,
+            shadowBlur: 50,
+            shadowColor: 'rgba(0, 0, 0, 0.4)'
+        },
+
+        label: {
+            show: true,
+            color: '#294D99',
+            insideColor: '#fff',
+            fontSize: 50,
+            fontWeight: 'bold',
+
+            align: 'center',
+            baseline: 'middle',
+            position: 'inside'
+        },
+
+        emphasis: {
+            itemStyle: {
+                opacity: 0.8
+            }
+        }
+    }
+});

package/src/components/charts/components/LiquidfillChart/plugShape.js

@@ -0,0 +1,163 @@
+import * as echarts from 'echarts';
+
+export default echarts.graphic.extendShape({
+    type: 'ec-liquid-fill',
+
+    shape: {
+        waveLength: 0,
+        radius: 0,
+        radiusY: 0,
+        cx: 0,
+        cy: 0,
+        waterLevel: 0,
+        amplitude: 0,
+        phase: 0,
+        inverse: false
+    },
+
+    buildPath: function (ctx, shape) {
+        if (shape.radiusY == null) {
+            shape.radiusY = shape.radius;
+        }
+
+        /**
+         * We define a sine wave having 4 waves, and make sure at least 8 curves
+         * is drawn. Otherwise, it may cause blank area for some waves when
+         * wave length is large enough.
+         */
+        var curves = Math.max(
+            Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
+            8
+        );
+
+        // map phase to [-Math.PI * 2, 0]
+        while (shape.phase < -Math.PI * 2) {
+            shape.phase += Math.PI * 2;
+        }
+        while (shape.phase > 0) {
+            shape.phase -= Math.PI * 2;
+        }
+        var phase = shape.phase / Math.PI / 2 * shape.waveLength;
+
+        var left = shape.cx - shape.radius + phase - shape.radius * 2;
+
+        /**
+         * top-left corner as start point
+         *
+         * draws this point
+         *  |
+         * \|/
+         *  ~~~~~~~~
+         *  |      |
+         *  +------+
+         */
+        ctx.moveTo(left, shape.waterLevel);
+
+        /**
+         * top wave
+         *
+         * ~~~~~~~~ <- draws this sine wave
+         * |      |
+         * +------+
+         */
+        var waveRight = 0;
+        for (var c = 0; c < curves; ++c) {
+            var stage = c % 4;
+            var pos = getWaterPositions(c * shape.waveLength / 4, stage,
+                shape.waveLength, shape.amplitude);
+            ctx.bezierCurveTo(pos[0][0] + left, -pos[0][1] + shape.waterLevel,
+                pos[1][0] + left, -pos[1][1] + shape.waterLevel,
+                pos[2][0] + left, -pos[2][1] + shape.waterLevel);
+
+            if (c === curves - 1) {
+                waveRight = pos[2][0];
+            }
+        }
+
+        if (shape.inverse) {
+            /**
+             * top-right corner
+             *                  2. draws this line
+             *                          |
+             *                       +------+
+             * 3. draws this line -> |      | <- 1. draws this line
+             *                       ~~~~~~~~
+             */
+            ctx.lineTo(waveRight + left, shape.cy - shape.radiusY);
+            ctx.lineTo(left, shape.cy - shape.radiusY);
+            ctx.lineTo(left, shape.waterLevel);
+        }
+        else {
+            /**
+             * top-right corner
+             *
+             *                       ~~~~~~~~
+             * 3. draws this line -> |      | <- 1. draws this line
+             *                       +------+
+             *                          ^
+             *                          |
+             *                  2. draws this line
+             */
+            ctx.lineTo(waveRight + left, shape.cy + shape.radiusY);
+            ctx.lineTo(left, shape.cy + shape.radiusY);
+            ctx.lineTo(left, shape.waterLevel);
+        }
+
+        ctx.closePath();
+    }
+});
+
+
+
+/**
+ * Using Bezier curves to fit sine wave.
+ * There is 4 control points for each curve of wave,
+ * which is at 1/4 wave length of the sine wave.
+ *
+ * The control points for a wave from (a) to (d) are a-b-c-d:
+ *          c *----* d
+ *     b *
+ *       |
+ * ... a * ..................
+ *
+ * whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
+ *
+ * @param {number} x          x position of the left-most point (a)
+ * @param {number} stage      0-3, stating which part of the wave it is
+ * @param {number} waveLength wave length of the sine wave
+ * @param {number} amplitude  wave amplitude
+ */
+function getWaterPositions(x, stage, waveLength, amplitude) {
+    if (stage === 0) {
+        return [
+            [x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2],
+            [x + 1 / 2 * waveLength / Math.PI,     amplitude],
+            [x + waveLength / 4,                   amplitude]
+        ];
+    }
+    else if (stage === 1) {
+        return [
+            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
+            amplitude],
+            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
+            amplitude / 2],
+            [x + waveLength / 4,                   0]
+        ]
+    }
+    else if (stage === 2) {
+        return [
+            [x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2],
+            [x + 1 / 2 * waveLength / Math.PI,     -amplitude],
+            [x + waveLength / 4,                   -amplitude]
+        ]
+    }
+    else {
+        return [
+            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
+            -amplitude],
+            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
+            -amplitude / 2],
+            [x + waveLength / 4,                   0]
+        ]
+    }
+}