@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/LineChart/handlePredict.js

@@ -0,0 +1,73 @@
+/**
+ * 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 cloneDeep from '../../util/cloneDeep';
+import chartToken from './chartToken';
+
+function setDashedLineVisualMap(seriesIndex, lineColor, predictIndex) {
+  const vm = {
+    type: 'piecewise',
+    seriesIndex,
+    dimension: 0,
+    show: false,
+    pieces: [
+      {
+        gte: 0,
+        lte: predictIndex,
+        color: chartToken.colorNone,
+      },
+      {
+        gt: predictIndex,
+        color: lineColor,
+      },
+    ],
+  };
+  return vm;
+}
+
+/**
+ * 针对预测值图表需求，图表需要进行特殊处理
+ */
+export function handlePredict(option, iChartOpt) {
+  const { predict, lineStyle } = iChartOpt
+  if (!predict) return
+  // VisualMap只能处理线的颜色，不能处理面积的颜色
+  let dashColor = chartToken.maskColor;
+  if (lineStyle && lineStyle.dashColor) {
+    dashColor = lineStyle.dashColor;
+  }
+  // 取出数据
+  const data = option.series;
+  const dataLength = data.length;
+  const xAxisDataLength = option.xAxis[0].data.length;
+  const predictIndex = option.xAxis[0].data.indexOf(predict);
+  // 制作虚线的series(只有匹配成功即predictIndex>-1时，才设置阈值线的样式)
+  if (predictIndex > -1) {
+    for (let index = 0; index < dataLength; index++) {
+      const temp = cloneDeep(data[index]);
+      temp.lineStyle = {
+        // 为了视觉上看不见盖住粗细+1
+        width: chartToken.lineWidth + 1,
+        type: [5, 8],
+      };
+      temp.itemStyle = {
+        opacity: 0,
+      };
+      temp.silent = true;
+      temp.showSymbol = false;
+      temp.showAllSymbol = false;
+      // 插入虚线的series
+      option.series.push(temp);
+      // 虚线颜色
+      option.visualMap.push(setDashedLineVisualMap(dataLength + index, dashColor, predictIndex, xAxisDataLength));
+    }
+  }
+}

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

@@ -0,0 +1,266 @@
+/**
+ * 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 cloneDeep from '../../util/cloneDeep';
+import { isString, isObject } from '../../util/type';
+import { getMarkLineDefault, getMarkPointDefault, setThresholdMarkLineLabel } from '../../option/config/mark';
+import chartToken from './chartToken';
+import Token from '../../feature/token';
+import { getColor } from '../../util/color';
+
+
+export const seriesInit = () => {
+  return {
+    label: { show: false },
+    // 连线上的小圆点样式
+    symbol: 'circle',
+    symbolSize: chartToken.symbolSize,
+    showSymbol: false,
+    // 数据
+    data: [],
+    // 线形
+    type: 'line',
+    // 线条样式
+    lineStyle: {
+      width: chartToken.lineWidth,
+    },
+    massive: false,
+    // 折线阶梯
+    step: false,
+    // 折线平滑
+    smooth: false,
+    // 阈值线
+    markLine: null,
+    // 峰值标志
+    markPoint: null,
+    // 折线点的每个样式配置项
+    itemStyle: {
+      //避免hover时偶现实心symbol的情况
+      opacity: 0
+    },
+    emphasis: {
+      itemStyle: {
+        borderColor: undefined,
+        borderWidth: chartToken.border,
+        color: chartToken.maskColor,
+        opacity: 1
+      }
+    }
+  };
+};
+
+//  hover使用emphasis去变更symbol的样式
+function setItemBorderColor(seriesUnit, index, colors) {
+  const color = getColor(colors, index)
+  seriesUnit.emphasis.itemStyle.borderColor = color
+}
+
+
+function handleItemStyle(seriesUnit, itemStyle) {
+  if (!itemStyle) return;
+  // 兼容老版本的 itemStyle.symbolSize
+  if (itemStyle.symbolSize) {
+    seriesUnit.symbolSize = itemStyle.symbolSize;
+  }
+  for (const key in itemStyle) {
+    if (Object.hasOwnProperty.call(itemStyle, key)) {
+      seriesUnit.itemStyle[key] = itemStyle[key];
+    }
+  }
+}
+
+function isTopOrBottom(markLine, seriesUnit, flag) {
+  let position = '';
+  let markLinePosition = '';
+  let markLineLabel = '';
+  let markLineColor = '';
+  let markLinelLineStyle;
+  let markLineData = {};
+  if (flag === 'top') {
+    position = markLine.top;
+    markLinePosition = markLine.topPosition
+    markLineLabel = markLine.topLabel;
+    markLineColor = markLine.topColor;
+    markLinelLineStyle = markLine.topLine
+  } else {
+    position = markLine.bottom;
+    markLinePosition = markLine.bottomPosition
+    markLineLabel = markLine.bottomLabel;
+    markLineColor = markLine.bottomColor
+    markLinelLineStyle = markLine.bottomLine
+  }
+  if (isString(position)) {
+    markLineData = { type: position };
+  } else {
+    markLineData = { yAxis: position };
+  }
+
+  markLineData.label = { show: false, position: 'insideEndTop', lineHeight: 20 };
+  markLineData.lineStyle = {};
+  // 没有配置颜色，认为是阈值线，加载阈值线的label配置
+  if (!markLineColor) {
+    setThresholdMarkLineLabel(markLineData)
+  }
+  markLinePosition && (markLineData.label.position = markLinePosition);
+  if (markLineLabel) {
+    markLineData.label.show = true
+    markLineData.label.color = 'inherit'
+    markLineData.label.formatter = markLineLabel
+  }
+  if (markLineColor === 'auto') {
+    markLineColor = undefined;
+  }
+  if (markLineColor) {
+    markLineData.label.color = markLineColor
+    markLineData.lineStyle.color = markLineColor
+  }
+  if (markLinelLineStyle === false) {
+    markLineData.lineStyle.color = chartToken.colorNone;
+  }
+  seriesUnit.markLine.data.push(markLineData);
+}
+
+function handleMarkLine(markLine, seriesUnit, seriesName) {
+  seriesUnit.markLine = getMarkLineDefault()
+  if (markLine.top && !(markLine.topUse && markLine.topUse.indexOf(seriesName) === -1)) {
+    isTopOrBottom(markLine, seriesUnit, 'top')
+  }
+  if (markLine.bottom && !(markLine.bottomUse && markLine.bottomUse.indexOf(seriesName) === -1)) {
+    isTopOrBottom(markLine, seriesUnit, 'bottom')
+  }
+}
+
+function handleMarkPoint(markPoint, seriesUnit, seriesName) {
+  seriesUnit.markPoint = getMarkPointDefault();
+  const { colorError } = Token.config.colorState
+  if (markPoint.max && !(markPoint.maxUse && markPoint.maxUse.indexOf(seriesName) === -1)) {
+    const max = {
+      type: 'max',
+      symbolOffset: [0, -11],
+      itemStyle: { color: markPoint.maxColor || colorError },
+    };
+    if (markPoint.maxColor == 'auto') delete max.itemStyle;
+    seriesUnit.markPoint.data.push(max);
+  }
+  if (markPoint.min && !(markPoint.minUse && markPoint.minUse.indexOf(seriesName) === -1)) {
+    const min = {
+      type: 'min',
+      symbolOffset: [0, 11],
+      symbolRotate: 180,
+      itemStyle: { color: markPoint.minColor || colorError },
+    };
+    if (markPoint.minColor == 'auto') delete min.itemStyle;
+    seriesUnit.markPoint.data.push(min);
+  }
+}
+
+
+function setStack(stack, seriesUnit) {
+  for (const name in stack) {
+    if (Object.hasOwnProperty.call(stack, name)) {
+      const stackArray = stack[name];
+      const seriesName = seriesUnit.name;
+      if (stackArray.indexOf(seriesName) !== -1) {
+        seriesUnit.stack = name;
+      }
+      break;
+    }
+  }
+}
+
+function handleStack(stack, seriesUnit) {
+  if (stack === true) {
+    seriesUnit.stack = 'Total';
+    return;
+  }
+  if (isObject(stack)) {
+    setStack(stack, seriesUnit)
+  }
+}
+
+function handleFocus(focus, seriesUnit) {
+  if (focus) {
+    seriesUnit.emphasis = {
+      ...seriesUnit.emphasis,
+      focus: 'series',
+      blurScope: 'global',
+    };
+  }
+}
+
+function handleSeries(params) {
+  const {
+    stack,
+    focus,
+    massive,
+    isStep,
+    series,
+    isSmooth,
+    markLine,
+    markPoint,
+    legendData,
+    seriesData,
+    localSeriesUnit,
+    colors
+  } = params;
+  legendData.forEach((legend, index) => {
+    const seriesUnit = cloneDeep(localSeriesUnit);
+    // 折线平滑
+    seriesUnit.smooth = isSmooth || false;
+    // 大数据
+    seriesUnit.large = massive || false;
+    seriesUnit.sampling = massive ? 'lttb' : false;
+    // 折线阶梯
+    seriesUnit.step = (isStep && 'middle') || false;
+    // 阈值线
+    markLine && handleMarkLine(markLine, seriesUnit, legend);
+    // 峰值标记
+    markPoint && handleMarkPoint(markPoint, seriesUnit, legend);
+    // 聚焦效果
+    focus && handleFocus(focus, seriesUnit);
+    // 数据 / 数据名称
+    seriesUnit.name = legend;
+    seriesUnit.data = seriesData[legend];
+    setItemBorderColor(seriesUnit, index, colors)
+    // 堆叠效果
+    stack && handleStack(stack, seriesUnit);
+    series.push(seriesUnit);
+  });
+}
+
+function handleYaxis(series, yAxis) {
+  if (Array.isArray(yAxis)) {
+    yAxis.forEach((y, index) => {
+      series.forEach((s, indexs) => {
+        if (y.dataName && y.dataName.includes(s.name)) {
+          series[indexs].yAxisIndex = index;
+        }
+      });
+    });
+  }
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setSeries(params) {
+  const { yAxis, itemStyle } = params;
+  // 防止同一个页面的不同lineChart之间出现样式串通
+  const localSeriesUnit = seriesInit();
+  // 覆盖用户传入的itemStyle
+  handleItemStyle(localSeriesUnit, itemStyle);
+  // 拼装series
+  const series = [];
+  handleSeries({ ...params, series, localSeriesUnit });
+  // 配置多个series的y轴index
+  handleYaxis(series, yAxis);
+  return series;
+}

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

@@ -0,0 +1,138 @@
+/**
+ * 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';
+import { isNumber } from '../../util/type';
+import { getColor } from '../../util/color';
+import Token from '../../feature/token';
+import chartToken from './chartToken'
+
+function handleVisualMapItem({ index, topColor, top, bottom, bottomColor, vmColor, defaultColor }) {
+  const visualMapItem = {
+    show: false,
+    type: 'piecewise',
+    dimension: 1,
+    seriesIndex: index,
+    pieces: [
+      {
+        gte: top, // 大于 top 的
+        color: topColor,
+      },
+      {
+        gt: bottom,
+        lt: top, // 小于 top, 大于 bottom 的，为正常颜色
+        color: defaultColor,
+      },
+      {
+        lte: bottom, // 小于 bottom
+        color: bottomColor,
+      },
+    ],
+    outOfRange: {
+      color: vmColor,
+    },
+  };
+
+  return visualMapItem;
+}
+
+export function setVisualMap(legendData, seriesData, iChartOpt, baseOpt) {
+  const visualMap = [];
+  const { color: colors, markLine } = iChartOpt
+  if (markLine) {
+    let topValue = markLine.top;
+    let bottomValue = markLine.bottom;
+    const vmColor = Token.config.colorState.colorError;
+    const topColor = markLine.topColor || vmColor;
+    const bottomColor = markLine.bottomColor || vmColor;
+    if (!isNumber(topValue)) {
+      topValue = undefined;
+    }
+    if (!isNumber(bottomValue)) {
+      bottomValue = undefined;
+    }
+    if (topValue === undefined && bottomValue === undefined) {
+      return visualMap;
+    }
+    if (topValue !== undefined && bottomValue !== undefined && bottomValue >= topValue) {
+      throw new Error('阈值线bottom的值必须小于阈值线top的值');
+    }
+    legendData.forEach((legendName, index) => {
+      const data = seriesData[legendName];
+      const minData = min(data);
+      const maxData = max(data);
+      const defaultColor = getColor(colors, index)
+      let bottom = bottomValue;
+      let top = topValue;
+      if (markLine.topUse && markLine.topUse.indexOf(legendName) === -1) {
+        top = undefined;
+      }
+      if (markLine.bottomUse && markLine.bottomUse.indexOf(legendName) === -1) {
+        bottom = undefined;
+      }
+      if (top === undefined && bottom === undefined) {
+        return;
+      }
+      // 阈值无下限
+      if (bottom === undefined) {
+        bottom = Math.min(top - 0.01, minData - 0.01);
+      }
+      // 阈值无上限
+      if (top === undefined) {
+        top = Math.max(bottom + 0.01, maxData + 0.01);
+      }
+      // 根据数据大小映射颜色
+      const visualMapItem = handleVisualMapItem({ index, topColor, top, bottom, bottomColor, vmColor, defaultColor });
+      visualMap.push(visualMapItem);
+      const seriesUnit = baseOpt.series[index]
+      //  阈值情景下hover的emphasis中itemstyle要在数据中单独设置，覆盖通用emphasis配置
+      transformData(
+        seriesUnit,
+        data,
+        defaultColor,
+        {
+          topColor,
+          top,
+          bottom,
+          bottomColor
+        })
+    });
+  }
+  return visualMap;
+}
+
+function transformData(seriesUnit, data, defaultColor, markLineConfig) {
+  const { topColor, top, bottom, bottomColor } = markLineConfig
+  const newData = data.map(item => {
+    let borderColor = defaultColor
+    if (bottom < item && item < top) {
+      return item
+    }
+    if (item >= top) {
+      borderColor = topColor
+    }
+    if (item <= bottom) {
+      borderColor = bottomColor
+    }
+    return {
+      value: item,
+      emphasis: {
+        itemStyle: {
+          borderColor,
+          color: chartToken.maskColor,
+          opacity: 1
+        }
+      }
+    }
+  })
+  seriesUnit.data = newData
+}

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

@@ -0,0 +1,133 @@
+/**
+ * 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 mini from '../../feature/mini/miniLineChart';
+import { setSeries } from './handleSeries';
+import cloneDeep from '../../util/cloneDeep';
+import BaseOption from '../../option/base';
+import { setVisualMap } from './handleVisualMap';
+import { handlePredict } from './handlePredict';
+import { topArea, bottomArea } from './AreaChart';
+import { mergeVisualMap, mergeSeries } from '../../util/merge';
+import { handleData, onlyOnePoint, discrete, setTooltip } from './handleOptipn';
+import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
+import { lttb } from '../../feature/performance/lttb';
+import { CHART_TYPE } from '../../util/constants';
+
+
+class LineChart {
+
+  static name = CHART_TYPE.LINE
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.baseOption = cloneDeep(BaseOption);
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.LINE);
+    // x轴key值
+    const xAxisKey = xkey(iChartOption);
+    const data = iChartOption.massive ? lttb(iChartOption.data) : iChartOption.data
+    // x轴数据
+    const xAxisData = xdata(data, xAxisKey);
+    // 图例数据
+    const legendData = ldata(data, xAxisKey);
+    // 连线的数据
+    const seriesData = ydata(data, legendData);
+    // 给图例和x轴赋值
+    handleData(this.baseOption, legendData, xAxisData);
+    // 组装series
+    this.baseOption.series = setSeries({
+      seriesData,
+      legendData,
+      yAxis: iChartOption.yAxis,
+      focus: iChartOption.focus,
+      stack: iChartOption.stack,
+      isStep: iChartOption.step,
+      isArea: iChartOption.area,
+      colors: this.baseOption.color,
+      isSmooth: iChartOption.smooth,
+      markLine: iChartOption.markLine,
+      markPoint: iChartOption.markPoint,
+      splitLine: iChartOption.splitLine,
+      labelHtml: iChartOption.labelHtml,
+      itemStyle: iChartOption.itemStyle,
+      massive: iChartOption.massive,
+      colors: iChartOption.color
+    });
+    // 设置VisualMap，通过数值映射颜色
+    this.baseOption.visualMap = setVisualMap(legendData, seriesData, iChartOption, this.baseOption);
+    // 针对预测值图表需求，图表需要进行特殊处理
+    handlePredict(this.baseOption, iChartOption);
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {};
+    }
+    // 当数据只有一条时，显示数据点
+    onlyOnePoint(this.baseOption);
+    // 针对离散数据, 创建同名Series, 显示离散数据的单个点
+    discrete(iChartOption, this.baseOption);
+    setTooltip(this.baseOption, iChartOption,legendData)
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption);
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption);
+    // 处理特性
+    mini(iChartOption, this.baseOption);
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain(echartsIns) {
+    const YAxiMax = this.getYAxisMaxValue(echartsIns, 0);
+    const YAxiMin = this.getYAxisMinValue(echartsIns, 0);
+    // 面积图上部红色阈值区域需要在二次计算中实现 -- 在原有Series上添加areaStyle
+    topArea(this.baseOption, this.iChartOption, YAxiMin);
+    // 面积图下部红色阈值区域需要在二次计算中实现 -- 植入假的同名Series
+    bottomArea(this.baseOption, this.iChartOption, YAxiMax);
+    // 合并用户自定义series
+    mergeSeries(this.iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  /**
+   * 图表渲染完毕后，获得y刻度的最大值
+   * @param {echartsIns为图表实例} echartsIns
+   * @param {index为yAxis数组下标} index
+   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
+   */
+  getYAxisMaxValue(echartsIns, index) {
+    return echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[1];
+  }
+
+  /**
+   * 图表渲染完毕后，获得y轴刻度的最小值
+   * @param {echartsIns为图表实例} echartsIns
+   * @param {index为yAxis数组下标} index
+   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
+   */
+  getYAxisMinValue(echartsIns, index) {
+    return echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[0];
+  }
+}
+
+export default LineChart;

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