@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.12

package/src/components/charts/components/BubbleChart/handleOptipn.js

@@ -1,63 +1,63 @@
-/**
- * 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 { changeRgbaOpacity } from '../../util/color';
-import defendXSS from '../../util/defendXSS';
-function tooltipFormatter(params) {
-  const seriesName = params.seriesName;
-  const color = params.color;
-  const data = params.data;
-  const [x, y, radius, name] = data;
-  let htmlString = `<div style="margin-bottom:4px;">
-                                ${defendXSS(seriesName)}
-                         </div>`;
-  htmlString += `<div style="margin-bottom:4px;">
-                            <span style="display:inline-block;width:10px;height:10px;
-                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
-                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
-    color,
-  )};"></span>
-                            <span>${defendXSS(name)}</span>
-                       </div>`;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
-                <span>${defendXSS(x)}</span>
-            </div>
-        `;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
-                <span>${defendXSS(y)}</span>
-            </div>
-        `;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">半径维度</span> 
-                <span>${defendXSS(radius)}</span>
-            </div>
-        `;
-  return htmlString;
-}
-
-/**
- * 配置默认的鼠标悬浮提示框
- */
-export function setTooltip(baseOpt, iChartOption) {
-  baseOpt.tooltip.trigger = 'item';
-  if (iChartOption.trigger==='axis') {
-    baseOpt.tooltip.trigger = 'axis';
-    baseOpt.tooltip.axisPointer.type = 'shadow';
-  }
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = tooltipFormatter;
-  }
+/**
+ * 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 { changeRgbaOpacity } from '../../util/color';
+import defendXSS from '../../util/defendXSS';
+function tooltipFormatter(params) {
+  const seriesName = params.seriesName;
+  const color = params.color;
+  const data = params.data;
+  const [x, y, radius, name] = data;
+  let htmlString = `<div style="margin-bottom:4px;">
+                                ${defendXSS(seriesName)}
+                         </div>`;
+  htmlString += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
+    color,
+  )};"></span>
+                            <span>${defendXSS(name)}</span>
+                       </div>`;
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                <span>${defendXSS(x)}</span>
+            </div>
+        `;
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                <span>${defendXSS(y)}</span>
+            </div>
+        `;
+  htmlString += `
+            <div>
+                <span style="display:inline-block;margin-right:8px;min-width:60px;">半径维度</span> 
+                <span>${defendXSS(radius)}</span>
+            </div>
+        `;
+  return htmlString;
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt, iChartOption) {
+  baseOpt.tooltip.trigger = 'item';
+  if (iChartOption.trigger==='axis') {
+    baseOpt.tooltip.trigger = 'axis';
+    baseOpt.tooltip.axisPointer.type = 'shadow';
+  }
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter;
+  }
 }

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

@@ -1,86 +1,86 @@
-/**
- * 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 } from '../../util/color';
-import cloneDeep from '../../util/cloneDeep';
-import { getMarkLineDefault } from '../../option/config/mark';
-import chartToken from './chartToken';
-import merge from '../../util/merge';
-
-export const seriesInit = {
-  // 数据
-  data: [],
-  // 气泡图
-  type: 'scatter',
-  // 鼠标hover时显示label，并且其他legend变成灰色
-  emphasis: {
-    label: {
-      show: true,
-      color: '#ffffff',
-      fontSize: 14,
-      formatter(param) {
-        return param.data[3];
-      },
-      position: 'top',
-    },
-  },
-  // 气泡失去焦点时，配置样式
-  blur:{},
-  // 气泡样式
-  itemStyle: {},
-};
-
-export function setSeries({ legendData, data, markLine, color, iChartOption }) {
-  // 更改hover时显示的label颜色
-  seriesInit.emphasis.label.color = chartToken.emphasisLabelColor;
-  const series = [];
-  legendData.forEach((legend, index) => {
-    const seriesUnit = cloneDeep(seriesInit);
-    const itemBorderColor = getColor(color, index);
-    // 设置图元透明度
-    const itemColor = codeToRGB(itemBorderColor, iChartOption.symbolOpacity || 0.2);
-    // 阈值线
-    if (markLine) {
-      seriesUnit.markLine = getMarkLineDefault(true);
-      if (markLine.y) {
-        seriesUnit.markLine.data.push({ yAxis: markLine.y });
-      }
-      if (markLine.x) {
-        seriesUnit.markLine.data.push({ xAxis: markLine.x });
-      }
-    }
-    // 数据 / 数据名称
-    seriesUnit.name = legend;
-    seriesUnit.data = data[legend];
-    seriesUnit.itemStyle = {
-      color: itemColor,
-      borderColor: itemBorderColor,
-      borderWidth: 1,
-    };
-    series.push(seriesUnit);
-  });
-  return series;
-}
-
-// 添加seires属性
-export function handleSeriesExtra(baseOpt, iChartOption) {
-  const { symbol, symbolRotate, symbolOffset, cursor, label, itemStyle, blur, emphasis } = iChartOption;
-  baseOpt.series.forEach(item => {
-    item.symbol = symbol;
-    item.symbolRotate = symbolRotate;
-    item.symbolOffset = symbolOffset;
-    item.cursor = cursor;
-    item.label = label;
-    merge(item.itemStyle, itemStyle);
-    merge(item.blur, blur);
-    merge(item.emphasis, emphasis);
-  });
-}
+/**
+ * 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 } from '../../util/color';
+import cloneDeep from '../../util/cloneDeep';
+import { getMarkLineDefault } from '../../option/config/mark';
+import chartToken from './chartToken';
+import merge from '../../util/merge';
+
+export const seriesInit = {
+  // 数据
+  data: [],
+  // 气泡图
+  type: 'scatter',
+  // 鼠标hover时显示label，并且其他legend变成灰色
+  emphasis: {
+    label: {
+      show: true,
+      color: '#ffffff',
+      fontSize: 14,
+      formatter(param) {
+        return param.data[3];
+      },
+      position: 'top',
+    },
+  },
+  // 气泡失去焦点时，配置样式
+  blur:{},
+  // 气泡样式
+  itemStyle: {},
+};
+
+export function setSeries({ legendData, data, markLine, color, iChartOption }) {
+  // 更改hover时显示的label颜色
+  seriesInit.emphasis.label.color = chartToken.emphasisLabelColor;
+  const series = [];
+  legendData.forEach((legend, index) => {
+    const seriesUnit = cloneDeep(seriesInit);
+    const itemBorderColor = getColor(color, index);
+    // 设置图元透明度
+    const itemColor = codeToRGB(itemBorderColor, iChartOption.symbolOpacity || 0.2);
+    // 阈值线
+    if (markLine) {
+      seriesUnit.markLine = getMarkLineDefault(true);
+      if (markLine.y) {
+        seriesUnit.markLine.data.push({ yAxis: markLine.y });
+      }
+      if (markLine.x) {
+        seriesUnit.markLine.data.push({ xAxis: markLine.x });
+      }
+    }
+    // 数据 / 数据名称
+    seriesUnit.name = legend;
+    seriesUnit.data = data[legend];
+    seriesUnit.itemStyle = {
+      color: itemColor,
+      borderColor: itemBorderColor,
+      borderWidth: 1,
+    };
+    series.push(seriesUnit);
+  });
+  return series;
+}
+
+// 添加seires属性
+export function handleSeriesExtra(baseOpt, iChartOption) {
+  const { symbol, symbolRotate, symbolOffset, cursor, label, itemStyle, blur, emphasis } = iChartOption;
+  baseOpt.series.forEach(item => {
+    item.symbol = symbol;
+    item.symbolRotate = symbolRotate;
+    item.symbolOffset = symbolOffset;
+    item.cursor = cursor;
+    item.label = label;
+    merge(item.itemStyle, itemStyle);
+    merge(item.blur, blur);
+    merge(item.emphasis, emphasis);
+  });
+}

package/src/components/charts/components/BubbleChart/handleTrendLine.js

@@ -1,119 +1,119 @@
-/**
- * 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 * as echarts from 'echarts';
-import chartToken from './chartToken';
-import { isArray } from '../../util/type'
-import { getColor } from '../../util/color';
-
-// 针对数据系列单独设置趋势线
-function setSeparateTrendLine(legendData, iChartOption, option) {
-  const { trendLineConfig, data, color } = iChartOption
-  trendLineConfig.forEach((item,index) => {
-     //dataset中原有就有一条数据集用于visualmap，此处索引从1开始
-    const setIndex=index+1
-    const { dataName, ...other } = item
-    if (dataName && legendData.includes(dataName)) {
-      const dataIndex = legendData.indexOf(dataName)
-      const lineColor = getColor(color, dataIndex)
-      const setUnit = {
-        source: data[dataName]
-      }
-      option.dataset.push(setUnit);
-      option.dataset.push({
-        transform: {
-          type: 'ecStat:regression',
-          config: other,
-        },
-        fromDatasetIndex:setIndex*2-1
-      });
-      // 趋势线
-      option.series.push({
-        name: 'trendline',
-        type: 'line',
-        smooth: true,
-        datasetIndex: setIndex*2,
-        symbolSize: 0.1,
-        symbol: 'circle',
-        label: {
-          show: true,
-          fontSize: 14,
-          color: chartToken.labelColor,
-        },
-        labelLayout: {
-          dx: -20,
-        },
-        encode: {
-          label: 2,
-          tooltip: 1,
-        },
-        silent: true,
-        itemStyle: {
-          color: lineColor
-        }
-      })
-
-    }
-  })
-}
-
-
-
-/**
- * 针对趋势线需求，图表需要进行特殊处理
- */
-export function handleTrendLine(option, iChartOption, plugins, legendData) {
-  const ecStat = plugins.ecStat;
-  if (iChartOption.trendLineConfig) {
-    if (ecStat) {
-      echarts.registerTransform(ecStat.transform.regression);
-      const isArrayConfig = isArray(iChartOption.trendLineConfig)
-      if (isArrayConfig) {
-        setSeparateTrendLine(legendData, iChartOption, option)
-      } else {
-        // 集合数据
-        option.dataset.push({
-          transform: {
-            type: 'ecStat:regression',
-            config: iChartOption.trendLineConfig,
-          },
-        });
-        // 趋势线
-        option.series.push({
-          name: 'trendline',
-          type: 'line',
-          smooth: true,
-          datasetIndex: 1,
-          symbolSize: 0.1,
-          symbol: 'circle',
-          label: {
-            show: true,
-            fontSize: 14,
-            color: chartToken.labelColor,
-          },
-          labelLayout: {
-            dx: -20,
-          },
-          encode: {
-            label: 2,
-            tooltip: 1,
-          },
-          silent: true,
-        });
-      }
-    } else {
-      throw new Error('您必须安装echarts-stat才可以使用趋势线功能');
-    }
-  }
-}
-
-
-
+/**
+ * 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 * as echarts from 'echarts';
+import chartToken from './chartToken';
+import { isArray } from '../../util/type'
+import { getColor } from '../../util/color';
+
+// 针对数据系列单独设置趋势线
+function setSeparateTrendLine(legendData, iChartOption, option) {
+  const { trendLineConfig, data, color } = iChartOption
+  trendLineConfig.forEach((item,index) => {
+     //dataset中原有就有一条数据集用于visualmap，此处索引从1开始
+    const setIndex=index+1
+    const { dataName, ...other } = item
+    if (dataName && legendData.includes(dataName)) {
+      const dataIndex = legendData.indexOf(dataName)
+      const lineColor = getColor(color, dataIndex)
+      const setUnit = {
+        source: data[dataName]
+      }
+      option.dataset.push(setUnit);
+      option.dataset.push({
+        transform: {
+          type: 'ecStat:regression',
+          config: other,
+        },
+        fromDatasetIndex:setIndex*2-1
+      });
+      // 趋势线
+      option.series.push({
+        name: 'trendline',
+        type: 'line',
+        smooth: true,
+        datasetIndex: setIndex*2,
+        symbolSize: 0.1,
+        symbol: 'circle',
+        label: {
+          show: true,
+          fontSize: 14,
+          color: chartToken.labelColor,
+        },
+        labelLayout: {
+          dx: -20,
+        },
+        encode: {
+          label: 2,
+          tooltip: 1,
+        },
+        silent: true,
+        itemStyle: {
+          color: lineColor
+        }
+      })
+
+    }
+  })
+}
+
+
+
+/**
+ * 针对趋势线需求，图表需要进行特殊处理
+ */
+export function handleTrendLine(option, iChartOption, plugins, legendData) {
+  const ecStat = plugins.ecStat;
+  if (iChartOption.trendLineConfig) {
+    if (ecStat) {
+      echarts.registerTransform(ecStat.transform.regression);
+      const isArrayConfig = isArray(iChartOption.trendLineConfig)
+      if (isArrayConfig) {
+        setSeparateTrendLine(legendData, iChartOption, option)
+      } else {
+        // 集合数据
+        option.dataset.push({
+          transform: {
+            type: 'ecStat:regression',
+            config: iChartOption.trendLineConfig,
+          },
+        });
+        // 趋势线
+        option.series.push({
+          name: 'trendline',
+          type: 'line',
+          smooth: true,
+          datasetIndex: 1,
+          symbolSize: 0.1,
+          symbol: 'circle',
+          label: {
+            show: true,
+            fontSize: 14,
+            color: chartToken.labelColor,
+          },
+          labelLayout: {
+            dx: -20,
+          },
+          encode: {
+            label: 2,
+            tooltip: 1,
+          },
+          silent: true,
+        });
+      }
+    } else {
+      throw new Error('您必须安装echarts-stat才可以使用趋势线功能');
+    }
+  }
+}
+
+
+

package/src/components/charts/components/BubbleChart/handleVisualMap.js

@@ -1,50 +1,50 @@
-/**
- * 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 min from '../../util/sort/min';
-import max from '../../util/sort/max';
-
-export function setVisualMap(baseOption, iChartOption, legendData) {
-  const visualMap = [];
-  const bubbleSize = iChartOption.bubbleSize || [10, 70];
-  const radius = baseOption.dataset[0].source.map(item => {
-    return item[2];
-  });
-  const minValue = min(radius);
-  const maxValue = max(radius);
-  const seriesIndex = new Array(legendData.length).fill(0).map((item, index) => {
-    return index;
-  });
-  visualMap.push({
-    show: false,
-    dimension: 2,
-    min: minValue,
-    max: maxValue,
-    seriesIndex,
-    inRange: {
-      symbolSize: bubbleSize,
-    },
-  });
-  return visualMap;
-}
-
-// 设置数据集
-export function setDataset(iChartOption) {
-  let source = [];
-  Object.keys(iChartOption.data).forEach(key => {
-    source = source.concat(iChartOption.data[key]);
-  });
-  return [
-    {
-      source,
-    },
-  ];
-}
+/**
+ * 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 min from '../../util/sort/min';
+import max from '../../util/sort/max';
+
+export function setVisualMap(baseOption, iChartOption, legendData) {
+  const visualMap = [];
+  const bubbleSize = iChartOption.bubbleSize || [10, 70];
+  const radius = baseOption.dataset[0].source.map(item => {
+    return item[2];
+  });
+  const minValue = min(radius);
+  const maxValue = max(radius);
+  const seriesIndex = new Array(legendData.length).fill(0).map((item, index) => {
+    return index;
+  });
+  visualMap.push({
+    show: false,
+    dimension: 2,
+    min: minValue,
+    max: maxValue,
+    seriesIndex,
+    inRange: {
+      symbolSize: bubbleSize,
+    },
+  });
+  return visualMap;
+}
+
+// 设置数据集
+export function setDataset(iChartOption) {
+  let source = [];
+  Object.keys(iChartOption.data).forEach(key => {
+    source = source.concat(iChartOption.data[key]);
+  });
+  return [
+    {
+      source,
+    },
+  ];
+}