@ebiz/designer-components 0.0.18

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

@@ -0,0 +1,48 @@
+/**
+ * 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 { getColor } from '../../util/color';
+import Token from '../../feature/token';
+
+export function setVisualMap(legendData, seriesData, markLine, colors) {
+  const visualMap = [];
+  if (markLine) {
+    const topValue = markLine.top;
+    const bottomValue = markLine.bottom;
+    legendData.forEach((legendName, index) => {
+      const data = seriesData[legendName];
+      const minData = min(data);
+      const maxData = max(data);
+      const bottom = bottomValue || minData - 1;
+      const top = topValue || maxData + 1;
+      // 根据数据大小映射颜色
+      visualMap.push({
+        show: false,
+        type: 'piecewise',
+        dimension: 1,
+        seriesIndex: index,
+        pieces: [
+          {
+            gt: bottom,
+            lt: top,
+            color: getColor(colors, index),
+          },
+        ],
+        outOfRange: {
+          color:Token.config.colorState.colorError,
+        },
+      });
+    });
+  }
+  return visualMap;
+}

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

@@ -0,0 +1,151 @@
+/**
+ * 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 LineChart from '../LineChart';
+import mini from '../../feature/mini/miniBarChart';
+import init from '../../option/init';
+import cloneDeep from '../../util/cloneDeep';
+import BaseOption from '../../option/base';
+import updateWidth from './barChartOption';
+import { mergeVisualMap, mergeSeries } from '../../util/merge';
+import { setStack, setDirection, setDoubleSides } from './handleOptipn';
+import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
+import { setSeries, setRange, setMarkLine, setWaterFall, setLimitFormatter } from './handleSeries';
+import { CHART_TYPE, ADAPTIVE_THEME } from '../../util/constants';
+
+class BarChart {
+
+  static name = CHART_TYPE.BAR
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.baseOption = cloneDeep(BaseOption);
+    this.chartInstance = chartInstance;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BAR);
+    // x轴key值
+    const xAxisKey = xkey(iChartOption);
+    // x轴数据
+    const xAxisData = xdata(iChartOption.data, xAxisKey);
+    // 图例数据
+    const legendData = ldata(iChartOption.data, xAxisKey);
+    // 连线的数据
+    const seriesData = ydata(iChartOption.data, legendData);
+    // 赋值数据
+    this.baseOption.legend.data = iChartOption.legend.data || legendData;
+    this.baseOption.xAxis.forEach(item => {
+      item.data = xAxisData;
+    });
+    this.baseOption.series = setSeries(seriesData, legendData, iChartOption);
+    // 给堆叠图的柱子中间加上空白缝隙，并覆盖图例的点击事件
+    setStack(this.baseOption, iChartOption, legendData, seriesData);
+    // 针对数据均为正数的双向柱状图进行一些特殊处理
+    setDoubleSides(this.baseOption, iChartOption);
+    // 针对瀑布图表需求，图表需要进行特殊处理
+    setWaterFall(this.baseOption, iChartOption);
+    // 针对区间图表需求，图表需要进行特殊处理
+    setRange(this.baseOption, iChartOption);
+    // 针对阈值线变色，图表需要进行特殊处理
+    setMarkLine(this.baseOption, iChartOption);
+    // 设置柱状图的方向
+    setDirection(this.baseOption, iChartOption.direction);
+    // 对 tooltip.formatter 进行二次封装
+    setLimitFormatter(this.baseOption, iChartOption, seriesData);
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {};
+    }
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption);
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption);
+    // 处理特性
+    mini(iChartOption, this.baseOption);
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain() {
+    let baseOption = this.baseOption;
+    const iChartOption = this.iChartOption;
+    const lineDataName = iChartOption.lineDataName;
+    // 折柱混合
+    if (lineDataName && lineDataName.length > 0) {
+      const lineChartBaseOpt = new LineChart(iChartOption, {}, this.chartInstance);
+      const lineBaseOption = lineChartBaseOpt.getOption();
+      const lineSeries = lineBaseOption.series;
+      const barSeries = baseOption.series;
+      lineDataName.forEach(lineName => {
+        let bar = null;
+        let line = null;
+        for (let i = 0; i < lineSeries.length; i++) {
+          if (lineSeries[i].name === lineName) {
+            line = lineSeries[i];
+            break;
+          }
+        }
+        for (let i = 0; i < barSeries.length; i++) {
+          if (barSeries[i].name === lineName) {
+            bar = barSeries[i];
+            break;
+          }
+        }
+        for (const key in line) {
+          if (Object.hasOwnProperty.call(line, key)) {
+            bar[key] = line[key];
+          }
+        }
+      });
+    }
+    // 如果存在 dataZoom，提前返回
+    if (this.baseOption.dataZoom[0].show === true) {
+      return;
+    };
+    // 如果用户自定义了 barWidth，提前返回
+    if (this.iChartOption.itemStyle?.barWidth) {
+      return;
+    }
+    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
+      updateWidth(baseOption, this.chartInstance, this.iChartOption);
+    }
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+
+  // 自适应柱条宽度
+  resize(callback) {
+    // 如果存在 dataZoom，提前返回
+    if (this.baseOption.dataZoom[0].show === true) {
+      return;
+    };
+    // 如果用户自定义了 barWidth，提前返回
+    if (this.iChartOption.itemStyle?.barWidth) {
+      return;
+    }
+    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
+      updateWidth(this.baseOption, this.chartInstance, this.iChartOption);
+      callback && callback(this.baseOption);
+    }
+  }
+}
+
+export default BarChart;

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

@@ -0,0 +1,122 @@
+/**
+ * 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 { insertStateDom, removeStateDom } from '../../util/init/insert';
+
+export default class BaseChart {
+    // 图表渲染容器
+    dom;
+    // 图表渲染配置
+    option
+
+    constructor() {
+        // 必须实现 init 方法，初始化图表渲染容器
+        if (this.init === undefined) {
+            throw new Error('This chart has not overwrite "init" callback!');
+        }
+        // 必须实现 setSimpleOption 方法，初始化图表渲染配置
+        if (this.setSimpleOption === undefined) {
+            throw new Error('This chart has not overwrite "setSimpleOption" callback!');
+        }
+        // 必须实现 render 方法，调用时开始渲染图表
+        if (this.render === undefined) {
+            throw new Error('This chart has not overwrite "render" callback!');
+        }
+        // 必须实现 onRenderReady 方法
+        if (this.onRenderReady === undefined) {
+            throw new Error('This chart has not overwrite "onRenderReady" callback!');
+        }
+        // 必须实现 refresh 方法，传入新的option，刷新图表
+        if (this.refresh === undefined) {
+            throw new Error('This chart has not overwrite "refresh" callback!');
+        }
+        // 必须实现 refreshData 方法，传入新的data，刷新图表
+        if (this.refreshData === undefined) {
+            throw new Error('This chart has not overwrite "refreshData" callback!');
+        }
+        // 必须实现 setResize 方法，该方法一般手动调用，实现图表自适应宽度
+        if (this.setResize === undefined) {
+            throw new Error('This chart has not overwrite "setResize" callback!');
+        }
+        // 必须实现 uninstall 方法，清空图表容器，卸载所有监听事件
+        if (this.uninstall === undefined) {
+            throw new Error('This chart has not overwrite "uninstall" callback!');
+        }
+    }
+
+    // 加载状态
+    showLoading(option) {
+        insertStateDom(this.dom, 'loading', option);
+    }
+
+    hideLoading() {
+        removeStateDom(this.dom, 'loading');
+    }
+
+    closeLoading() {
+        removeStateDom(this.dom, 'loading');
+    }
+
+    // 错误状态
+    showError(option) {
+        insertStateDom(this.dom, 'error', option);
+    }
+
+    closeError() {
+        removeStateDom(this.dom, 'error');
+    }
+
+    // 空数据状态
+    showEmpty(option) {
+        insertStateDom(this.dom, 'empty', option);
+    }
+
+    closeEmpty() {
+        removeStateDom(this.dom, 'empty');
+    }
+
+    // 阶段空数据状态
+    showStageEmpty(option) {
+        insertStateDom(this.dom, 'stage_empty', option);
+    }
+
+    closeStageEmpty() {
+        removeStateDom(this.dom, 'stage_empty');
+    }
+
+    // 自定义数据状态
+    showState(option) {
+        insertStateDom(this.dom, 'custom', option);
+    }
+
+    closeState() {
+        removeStateDom(this.dom, 'custom');
+    }
+
+    // 传入自定义DOM
+    showCustomDom(callback) {
+        if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return;
+        if (getComputedStyle(this.dom).position === ('static' || '')) {
+            this.dom.style.position = 'relative';
+        }
+        let customContainer = document.createElement('div');
+        customContainer.className = 'huicharts-custom-dom';
+        customContainer.setAttribute('style', 'position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center');
+        this.dom.appendChild(customContainer);
+        callback(customContainer);
+    }
+
+    // 删除自定义DOM
+    closeCustomDom() {
+        let customContainer = this.dom.getElementsByClassName('huicharts-custom-dom');
+        this.dom.removeChild(customContainer[0]);
+    }
+}

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

package/src/components/charts/components/BoxplotChart/handleOption.js

@@ -0,0 +1,64 @@
+/**
+ * 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 defendXSS from '../../util/defendXSS';
+
+/**
+ * 设置图的方向
+ */
+export function setDirection(baseOption, direction) {
+  if (direction && direction === 'horizontal') {
+    const temp = baseOption.xAxis;
+    baseOption.xAxis = baseOption.yAxis;
+    baseOption.yAxis = temp;
+  }
+}
+
+function tooltipFormatter(params) {
+  const { data, color, seriesType } = params
+  const labels = ['最大值', '上四分位数', '中位数', '下四分位数', '最小值'];
+  const labeLen = labels.length
+  let htmlString = '';
+  if (seriesType === 'boxplot') {
+    const arr = [];
+    labels.forEach((item, index) => {
+      htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:4px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="display:inline-block;width:90px">${defendXSS(item)}:</span><span>${defendXSS(
+        data[labeLen - index]
+      )}</span>
+                       </div>`;
+      arr.push(htmlString);
+    });
+    htmlString = arr.join('<br/>');
+  } else {
+    htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:4px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="display:inline-block;width:90px">离散点</span><span>${defendXSS(
+      data[1]
+    )}</span>
+                       </div>`;
+  }
+  return htmlString;
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter;
+  }
+}

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

@@ -0,0 +1,150 @@
+/**
+ * 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 chartToken from './chartToken';
+import { getColor, codeToRGB } from '../../util/color';
+import merge from '../../util/merge';
+
+function getDatasetInit() {
+  return [
+    {
+      source: [],
+    },
+    {
+      transform: {
+        type: 'boxplot',
+      },
+    },
+    {
+      fromDatasetIndex: 1,
+      fromTransformResult: 1,
+    },
+  ];
+}
+
+
+function getBoxplotUnitSeries() {
+  return {
+    name: 'boxplot',
+    type: 'boxplot',
+    datasetIndex: 1,
+    itemStyle: {
+      color: undefined,
+      borderColor: undefined,
+      borderWidth: chartToken.boxplotItemStyleBorderWidth,
+    },
+    emphasis: {
+      itemStyle: {
+        color: undefined,
+        borderWidth: chartToken.boxplotEmphasisItemStyleBorderWidth,
+        shadowBlur: 0,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0
+      }
+    }
+  }
+}
+
+function getScatterUnitSeries() {
+  return {
+    name: 'outlier',
+    type: 'scatter',
+    datasetIndex: 2,
+    symbolSize: chartToken.scatterSymbolSize,
+    itemStyle: {
+      color: undefined,
+      // 常规场景不显示边框
+      borderWidth: chartToken.scatterItemBorderWidth,
+      // borderWidth常规为0，此处设置borderColor为透明色+是为了避免hover移出symbol瞬间白色闪烁的问题
+      borderColor: chartToken.scatterItemBorderColor,
+    },
+    emphasis: {
+      itemStyle: {
+        color: chartToken.scatterEmphasisItemColor,
+        borderWidth: chartToken.scatterEmphasisItemBorderWidth,
+        // borderColor颜色在各系列数据中单独设置
+      }
+    }
+  }
+}
+
+/**
+ * 组装echarts所需要的dataset
+ * @param {传入数据} data
+ * @returns
+ */
+export function setDataset(data) {
+  const dataset = getDatasetInit()
+  dataset[0].source = data;
+  return dataset;
+}
+
+function getSeriesColor(color, index = 0) {
+  const seriesColor = getColor(color, index)
+  const itemColor = codeToRGB(seriesColor, 0.15)
+  const emphasisColor = codeToRGB(seriesColor, 0.3)
+  return { seriesColor, itemColor, emphasisColor }
+}
+
+function getBoxplotSeries(iChartOpt, index = 0) {
+  const { color } = iChartOpt
+  const unitSeries = getBoxplotUnitSeries()
+  const { seriesColor, itemColor, emphasisColor } = getSeriesColor(color, index)
+  unitSeries.itemStyle.color = itemColor;
+  unitSeries.itemStyle.borderColor = seriesColor;
+  unitSeries.emphasis.itemStyle.color = emphasisColor;
+  return unitSeries
+}
+
+
+function getScatterSeries(iChartOpt) {
+  const { color } = iChartOpt
+  const unitSeries = getScatterUnitSeries()
+  const { seriesColor } = getSeriesColor(color)
+  unitSeries.itemStyle.color = seriesColor;
+  unitSeries.emphasis.itemStyle.borderColor = seriesColor;
+  return unitSeries
+}
+
+
+export function setDefaultSeries(baseOpt, iChartOpt) {
+  const boxplotSeries = getBoxplotSeries(iChartOpt)
+  const scatterSeries = getScatterSeries(iChartOpt)
+  const series = [boxplotSeries, scatterSeries]
+  baseOpt.series = series
+}
+
+
+function setSeries(baseOpt, iChartOpt) {
+  // 配置默认dataset
+  if (iChartOpt.data && !iChartOpt.dataset) {
+    baseOpt.dataset = setDataset(iChartOpt.data);
+    setDefaultSeries(baseOpt, iChartOpt);
+  }
+  // 自定义dataset和series
+  if (iChartOpt.dataset && iChartOpt.series) {
+    baseOpt.dataset = iChartOpt.dataset;
+    const series = iChartOpt.series.map((item, index) => {
+      if (item.type === 'boxplot') {
+        const boxplotUnitSeries = getBoxplotSeries(iChartOpt, index);
+        merge(boxplotUnitSeries, item);
+        return boxplotUnitSeries;
+      }
+      else {
+        return item;
+      }
+    });
+    baseOpt.series = series;
+  }
+}
+
+
+export default setSeries

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

@@ -0,0 +1,47 @@
+/**
+ * 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';
+import { setDirection, setTooltip } from './handleOption';
+import RectCoordSys from '../../option/RectSys';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class BoxplotChart {
+
+  static name = CHART_TYPE.BOXPLOT
+
+  constructor(iChartOption) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.iChartOption = init(iChartOption);
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BOXPLOT);
+    // 箱形图data必须设为undefined
+    this.baseOption.xAxis[0].data = undefined;
+    // 提示框trigger设为item
+    this.baseOption.tooltip.trigger = 'item';
+    setSeries(this.baseOption,iChartOption)
+    // 横向
+    setDirection(this.baseOption, iChartOption.direction);
+    // 提示框
+    setTooltip(this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+}

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

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

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ *
+ */
+/**
+ * 从数据中拿出legend-data
+ */
+export function getLegendData(data) {
+  return Object.keys(data);
+}
+
+/**
+ * 从数据中拿出x轴的坐标数据
+ */
+export function getXAxisData(data) {
+  const xAxisData = [];
+  const dataValues = Object.values(data);
+  dataValues.forEach((item) => {
+    item.forEach((val) => {
+      if (xAxisData.indexOf(val[0]) === -1) {
+        xAxisData.push(val[0]);
+      }
+    });
+  });
+  return xAxisData;
+}