@ebiz/designer-components 0.0.18

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

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

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

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

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

@@ -0,0 +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才可以使用趋势线功能');
+    }
+  }
+}
+
+
+

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

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

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

@@ -0,0 +1,96 @@
+/**
+ * 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 BaseOption from '../../option/base';
+import cloneDeep from '../../util/cloneDeep';
+import { getLegendData, getXAxisData } from './handleData';
+import { setSeries, handleSeriesExtra } from './handleSeries';
+import { setTooltip } from './handleOptipn';
+import { handleTrendLine } from './handleTrendLine';
+import { setDataset, setVisualMap } from './handleVisualMap';
+import RectCoordSys from '../../option/RectSys';
+import { mergeSeries, mergeVisualMap } from '../../util/merge';
+import { CHART_TYPE } from '../../util/constants';
+
+class BubbleChart {
+
+  static name = CHART_TYPE.BUBBLE
+
+  constructor(iChartOption, chartInstance, plugins) {
+    this.baseOption = {};
+    this.baseOption = cloneDeep(BaseOption);
+    this.iChartOption = {};
+    this.chartInstance = chartInstance;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(plugins);
+  }
+
+  updateOption(plugins) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BUBBLE);
+    // 增加气泡图的默认悬浮提示框
+    setTooltip(this.baseOption, iChartOption);
+    // 组装基础数据
+    const legendData = getLegendData(iChartOption.data);
+    // 设置x轴类型，是目录型，还是数值型
+    const { xAxisType } = iChartOption;
+    if (
+      legendData &&
+      legendData[0] &&
+      iChartOption.data[legendData[0]] &&
+      iChartOption.data[legendData[0]][0] &&
+      iChartOption.data[legendData[0]][0][0] &&
+      typeof iChartOption.data[legendData[0]][0][0] === 'string'
+    ) {
+      this.baseOption.xAxis.forEach(item => {
+        item.type = xAxisType || 'category';
+        item.data = getXAxisData(iChartOption.data);
+      });
+    } else {
+      this.baseOption.xAxis.forEach(item => {
+        item.type = xAxisType || 'value';
+      });
+    }
+    // 赋值数据
+    this.baseOption.legend.data = this.baseOption.legend.data || legendData;
+    this.baseOption.series = setSeries({
+      legendData,
+      data: iChartOption.data,
+      markLine: iChartOption.markLine,
+      color: this.baseOption.color,
+      iChartOption,
+    });
+    // 添加dataset
+    this.baseOption.dataset = setDataset(iChartOption);
+    // 设置VisualMap，通过数值映射气泡大小
+    this.baseOption.visualMap = setVisualMap(this.baseOption, iChartOption, legendData);
+    // 针对趋势线的需求，图表需要进行特殊处理
+    handleTrendLine(this.baseOption, iChartOption, plugins, legendData);
+    // 添加seires属性
+    handleSeriesExtra(this.baseOption, iChartOption);
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption);
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default BubbleChart;

package/src/components/charts/components/BulletChart/bulletChartOption.js

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ *
+ */
+// 子弹图柱条响应式配置
+const BulletChartOption = (width, option, iChartOption) => {
+
+  // 计算柱子宽度
+  let barWidth;
+  let backgroundWidth;
+  const rows = option.series[0].data.length;
+  const intervalRows = rows;
+
+  // 柱子宽度为16px的初始间距 
+  const interval = (width - rows * 16) / intervalRows
+
+  if (interval >= 16) {
+    barWidth = 16;
+  }
+  else {
+    const flag = (width - intervalRows * 16) / rows
+    barWidth = flag > 2 ? flag : 2
+  }
+
+  // 柱子背景宽度为32px的初始间距 
+  const intervalBG = (width - rows * 32) / intervalRows
+
+  if (intervalBG >= 8) {
+    backgroundWidth = 32;
+  }
+  else {
+    const flag = (width - intervalRows * 8) / rows
+    backgroundWidth = flag > 9 ? flag : 9
+  }
+
+  // 计算阈值的偏移量和阈值宽度
+  let symbolSize;
+  option.series.forEach(item => {
+    if (item.type === 'scatter') {
+      symbolSize = item.symbolSize;
+    }
+  });
+  if (iChartOption.direction === 'horizontal') {
+    symbolSize[1] = backgroundWidth;
+  } else {
+    symbolSize[0] = backgroundWidth;
+  }
+
+  option.series.forEach(item => {
+    if (item.color) {
+      Object.assign(item, {
+        barWidth: backgroundWidth,
+      });
+    } else {
+      Object.assign(item, {
+        barWidth
+      });
+    }
+
+  });
+};
+
+const updateWidth = (baseOption, chartInstance, iChartOption) => {
+  let width;
+  if (chartInstance.getModel()) {
+    if (iChartOption.direction === 'horizontal') {
+      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().height;
+    } else {
+      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().width;
+    }
+    BulletChartOption(width, baseOption, iChartOption);
+  }
+}
+
+export default updateWidth;

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

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

@@ -0,0 +1,74 @@
+/**
+ * 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 xAxis from '../../option/config/xAxis';
+import yAxis from '../../option/config/yAxis';
+import defendXSS from '../../util/defendXSS';
+import { CHART_TYPE } from '../../util/constants';
+
+/**
+ * Tips提示框回调函数
+ */
+ function toolTipFormatter(params) {
+    
+	// 矩形部分不显示toolTip
+	if(params.seriesIndex > 1) {
+		return
+	}
+  let htmlString = `<div style="margin-bottom:4px;">${defendXSS(params.name)}</div>`;
+	htmlString += `
+		<div>
+			<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${defendXSS(
+				params.color,
+				)};">
+			</span>
+			<span style="margin-left:5px;">
+                            <span style="display:inline-block;margin-right:8px;min-width:60px;">${defendXSS(
+        params.seriesName,
+      )}</span>
+			<span style="font-weight:bold">
+				${defendXSS(params.value)}
+			</span>
+		</div>
+	`
+  return htmlString;
+}
+
+function handleXaxis(baseOpt, iChartOpt) {
+  const basicXaxis = xAxis(iChartOpt);
+  basicXaxis[0].type = 'value';
+  basicXaxis[0].axisLine.show = false;
+  baseOpt.xAxis = basicXaxis;
+}
+
+function handleYaxis(baseOpt, iChartOpt) {
+  const basicYaxis = yAxis(baseOpt, iChartOpt, CHART_TYPE.BULLET);
+  baseOpt.yAxis = basicYaxis;
+}
+
+function handleTooltip(baseOpts, iChartOpt) {
+  if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
+    baseOpts.tooltip.formatter = toolTipFormatter;
+  }
+}
+
+/**
+ * 设置柱状图的方向
+ */
+function setDirection(baseOption, direction) {
+  if (direction && direction === 'horizontal') {
+    const temp = baseOption.xAxis;
+    baseOption.xAxis = baseOption.yAxis;
+    baseOption.yAxis = temp;
+  }
+}
+
+export { handleXaxis, handleYaxis, handleTooltip, setDirection};