@ebiz/designer-components 0.0.18

package/src/components/charts/components/HoneycombChart/index.less

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ */
+.hc-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .hc-row {
+        position: relative;
+    }
+
+    .hc-node {
+        display: inline-block;
+        position: relative;
+        vertical-align: bottom;
+    }
+
+    .hc-tooltip {
+        display: none;
+        z-index: 999;
+        left: -9999px;
+        top: -9999px;
+        padding: 16px;
+        min-width: 200px;
+        position: absolute;
+        border-radius: 4px;
+        background: #FAFAFA;
+        transition: all 200ms linear;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+        user-select: text;
+        &.dark {
+            color: #FFFFFF;
+            background: #393939;
+            box-shadow: 0px 0px 8px rgba(210, 210, 210, 0.2);
+        }
+    }
+}

package/src/components/charts/components/JadeJueChart/BaseOption.js

@@ -0,0 +1,40 @@
+/**
+ * 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 sum = 0;
+const BaseOption = {
+  tooltip: {},
+  angleAxis: {
+    min: 0,
+    sum: 0,
+    max: (sum * 4) / 3,
+  },
+  polar: {},
+  series: []
+};
+// 堆叠图中首、中间、尾、背景条 四种的圆角文本占位。需要等自适应代码执行完毕，再替换成为真实的数值
+const borderRadiusText = 'barWith/2';
+
+const CHARTTYPE = {
+  BASE: 'base',
+  PROCESS: 'process',
+  STACK: 'stack'
+};
+
+const defaultSeries = {
+  type: 'bar',
+  stack: 'a',
+  coordinateSystem: 'polar',
+  z: 2,
+};
+
+export default BaseOption;
+export { borderRadiusText, CHARTTYPE, defaultSeries };

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

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

@@ -0,0 +1,262 @@
+/**
+ * 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 { getColor } from '../../util/color';
+import defendXSS from '../../util/defendXSS';
+import { borderRadiusText, CHARTTYPE } from './BaseOption';
+import chartToken from './chartToken';
+
+const cloudThemeBarWidth = {
+  large: 8,
+  medium: 6,
+  small: 4
+};
+
+const defaultThemeBarWidth = {
+  large: 16,
+  medium: 12,
+  small: 8
+};
+
+const gap = {
+  large: 8,
+  medium: 4,
+  small: 0
+};
+// 以208尺寸为界限，小于208限定宽度为8，间隙为12；大于208则主题规则
+const outerRingLimit = 208;
+
+// 主题中 线宽由线数量来决定
+function setThemeBarRule(theme, data, baseOpt, chartInstance) {
+  const isCloud = theme.includes('cloud');
+  let barWidth, textGap;
+  if (data.length >= 5) {
+    barWidth = isCloud ? cloudThemeBarWidth.small : defaultThemeBarWidth.small;
+    textGap = gap.small;
+  } else if (data.length === 4) {
+    barWidth = isCloud ? cloudThemeBarWidth.medium : defaultThemeBarWidth.medium;
+    textGap = gap.medium;
+  } else if (data.length <= 3) {
+    barWidth = isCloud ? cloudThemeBarWidth.large : defaultThemeBarWidth.large;
+    textGap = gap.large;
+  }
+  let outerRing = getOuterRing(baseOpt, chartInstance);
+  if (outerRing < outerRingLimit / 2) {
+    barWidth = isCloud ? 4 : 8;
+    textGap = 0;
+  }
+  return { barWidth, textGap };
+}
+
+// 主题中 线间距为文本的行高 + 字间距（当前规范字体12 行高为20） 减去线宽 
+// 计算内圈的大小，用外圈尺寸 - (lineHeight*data.length)
+function setThemeRadius(iChartOption, baseOpt, chartInstance, textGap) {
+  const lineHeight = 20;
+  const { data } = iChartOption;
+  let outerRing = getOuterRing(baseOpt, chartInstance);
+  let innerRing = outerRing - ((lineHeight + textGap) * data.length);
+  baseOpt.polar.radius[0] = innerRing;
+}
+
+function getOuterRing(baseOpt, chartInstance) {
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+  const canvasRadius = width > height ? height / 2 : width / 2;
+  let outerRing = baseOpt.polar?.radius[1] || '60%';
+  if (typeof outerRing === 'number') {
+    return outerRing;
+  } else if (outerRing.indexOf('%') > -1) {
+    return (Number(outerRing.slice(0, -1)) / 100) * canvasRadius;
+  }
+}
+
+// 配置玉玦图默认线宽为8
+export function setbarWidth(iChartOption, baseOpt, chartInstance, chartType) {
+  const { barWidth, theme, data, position } = iChartOption;
+  // 有配置主题时，根据规范设置线宽 与 线间距
+  let themeBarWidth;
+  if (theme) {
+    let themeBarRile = setThemeBarRule(theme, data, baseOpt, chartInstance);
+    themeBarWidth = themeBarRile.barWidth;
+    // 配置了position.radius 且第一个为auto, 自动计算内圈
+    if (!position?.radius || position?.radius?.[0] === 'auto') {
+      setThemeRadius(iChartOption, baseOpt, chartInstance, themeBarRile.textGap);
+    }
+  }
+  baseOpt.series.forEach(series => {
+    series.barWidth = barWidth ? barWidth : themeBarWidth || 8;
+    if (chartType === CHARTTYPE.STACK) {
+      series.barWidth += chartToken.itemBorderWidth;
+    }
+    series.data.forEach(dataItem => {
+      if (dataItem?.itemStyle?.borderRadius) {
+        dataItem.itemStyle.borderRadius = dataItem.itemStyle.borderRadius.map(item => {
+          if (typeof (item) === 'string') {
+            item = Number(item.replace(borderRadiusText, series.barWidth / 2));
+          }
+          return item;
+        });
+      }
+    });
+  });
+}
+
+// 配置玉玦图的起点角度及文本位置(兼容老属性startAngle及labelAlign)
+export function setStartAngle(iChartOption, baseOpt) {
+  if (!iChartOption?.angleAxis?.startAngle) {
+    if (!iChartOption.startAngle) {
+      iChartOption.startAngle = 90;
+    }
+    baseOpt.angleAxis.startAngle = iChartOption.startAngle;
+  }
+  if (!iChartOption?.radiusAxis?.axisLabel?.align) {
+    if (!iChartOption.labelAlign) {
+      iChartOption.labelAlign = 'right';
+    }
+    baseOpt.radiusAxis.axisLabel.align = iChartOption.labelAlign;
+  }
+}
+
+/**
+ * 为第一种数据类型单独配置legend.data和对应颜色
+ * @param {*} iChartOption
+ * @param {*} baseOpt
+ */
+export function handleLegendData(iChartOption, baseOpt, chartType) {
+  const { data, color } = iChartOption;
+  if (chartType !== CHARTTYPE.BASE) {
+    return;
+  }
+  baseOpt.legend.data = [];
+
+  // 图例使用反转数据，由外向内展示图例
+  cloneDeep(data).reverse().forEach((dataItem, index) => {
+    baseOpt.legend.data.push({
+      name: dataItem.name,
+      itemStyle: {
+        color: getColor(color, index),
+      },
+    });
+  });
+}
+
+function handleJadeJueFormatter(JadeJueTooltip, baseOpt, chartType) {
+  JadeJueTooltip.formatter = params => {
+    let htmlString = '';
+    let value = params.data.beforeChangeValue;
+    let name = params.data.name || params.name;
+    if (chartType === CHARTTYPE.PROCESS) {
+      value = baseOpt.series[params.seriesIndex].beforeChangeValue;
+      name = baseOpt.series[params.seriesIndex].name;
+    }
+    htmlString +=
+      `<span style="display:inline-block;margin-right:5px;margin-left:8px;border-radius:50%;height:10px;">${defendXSS(name)}</span>` +
+      '<br/>' +
+      `<span style="display:inline-block;margin-right:5px;margin-left:8px;border-radius:50%;height:10px;width:10px;background:${defendXSS(params.color)}"></span>` +
+      '<span style="display:inline-block;margin-right:5px;border-radius:50%;height:10px;">' +
+      `${defendXSS(name)}</span>` +
+      `<span style="display:inline-block;margin-right:8px;margin-left:25px;font-weight:bold">${defendXSS(value)}</span>`;
+    return htmlString;
+  };
+}
+
+// 配置悬浮提示框样式
+export function setTooltip(formatter, baseOpt, chartType) {
+  const JadeJueTooltip = cloneDeep(baseOpt.tooltip);
+  if (formatter) {
+    JadeJueTooltip.formatter = formatter;
+  } else {
+    handleJadeJueFormatter(JadeJueTooltip, baseOpt, chartType);
+  }
+  JadeJueTooltip.trigger = 'item';
+  return JadeJueTooltip;
+}
+
+/**
+ * 允许自定义柱体最小占比（场景不支持使用原生的barMinAngle），设置了之后，需要变更传入的data
+ * @param {*} iChartOption
+ * @param {*} baseOpt
+ */
+export function handleMinRatio(iChartOption, baseOpt, chartType) {
+  const { barMinRatio, data, tipHtml, showBackground = true } = iChartOption;
+  if (barMinRatio) {
+    const minValue = (barMinRatio * baseOpt.angleAxis.sum) / 100;
+    if (chartType === CHARTTYPE.PROCESS) {
+      baseOpt.series.forEach(item => {
+        item.beforeChangeValue = item.data[0];
+        if (item.data[0] <= minValue) {
+          item.data[0] = minValue;
+        }
+      });
+    } else if (chartType === CHARTTYPE.BASE) {
+      baseOpt.series.forEach((series, index) => {
+        series.data.forEach((dataItem, index_) => {
+          if (series.name === dataItem.name) {
+            dataItem.beforeChangeValue = dataItem.value;
+            if (dataItem.value <= minValue) {
+              dataItem.value = minValue;
+              data[index].value = minValue;
+            }
+          }
+        });
+      });
+      if (showBackground) {
+        data.forEach((item, index) => {
+          baseOpt.series[baseOpt.series.length - 1].data[index].value = baseOpt.angleAxis.sum - item.value;
+        });
+      }
+    }
+    // 配置了barMinRatio会修改data中的value值，需要重新设置tooltip进行覆盖
+    baseOpt.tooltip = setTooltip(tipHtml, baseOpt, chartType);
+  }
+}
+
+const bindLegendEvent = ({ baseOption, chartType }, chartInstance) => {
+  const newSeries = cloneDeep(baseOption.series);
+
+  const baseCallback = (params) => {
+    for (let type in params.selected) {
+      if (!params.selected[type]) {
+        // 图例隐藏，对应背景色柱条的值应该为sum
+        newSeries[newSeries.length - 1].data.find(v => v.name === type).value = baseOption.angleAxis.sum;
+      } else {
+        // 图例显示，对于背景色柱条的值应该为sum-value
+        newSeries[newSeries.length - 1].data.find(v => v.name === type).value = baseOption.angleAxis.sum - newSeries.find(v => v.name === type).data.find(v => v.name === type).value;
+      }
+    }
+  };
+
+  const stackCallback = (params) => {
+    // 图例显隐，对应背景色柱条的值应该为sum-其他系列
+    newSeries[newSeries.length - 1].data.forEach((item, index) => {
+      let newValue = 0;
+      newSeries.slice(0, newSeries.length - 1).forEach((v, key) => {
+        if (params.selected[v.name]) {
+          newValue += v.data[index]?.value ?? 0;
+        }
+      });
+      item.value = baseOption.angleAxis.sum - newValue;
+    });
+  };
+
+  const callbackMap = {
+    [CHARTTYPE.BASE]: baseCallback,
+    [CHARTTYPE.STACK]: stackCallback
+  };
+
+  chartInstance.on('legendselectchanged', (params) => {
+    callbackMap[chartType](params);
+    baseOption.series = newSeries;
+    chartInstance.setOption(baseOption);
+  });
+};
+export { bindLegendEvent };

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

@@ -0,0 +1,246 @@
+/**
+ * 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 } from '../../util/color';
+import { handleMinRatio } from './handleOption';
+import chartToken from './chartToken';
+import merge from '../../util/merge';
+import { getTextWidth } from '../../util/dom';
+import { borderRadiusText, CHARTTYPE, defaultSeries } from './BaseOption';
+
+// 根据数据值绑定上圆角
+const bindBorderRaduis = (data) => {
+  data.forEach(item => {
+    let hasValueIndexArr = [];
+    item.children.forEach((v, key) => {
+      if (v.value) {
+        hasValueIndexArr.push(key);
+      }
+    });
+    item.children.forEach((v, key) => {
+      if (hasValueIndexArr.includes(key)) {
+        if (hasValueIndexArr.length === 1) {
+          v.itemStyle = {
+            borderRadius: [borderRadiusText, borderRadiusText, borderRadiusText, borderRadiusText]
+          };
+          return;
+        }
+        let keyIndex = hasValueIndexArr.findIndex((a) => a === key);
+        if (keyIndex === 0) {
+          v.itemStyle = {
+            borderRadius: [borderRadiusText, 0, borderRadiusText, 0]
+          };
+        } else if (keyIndex === hasValueIndexArr.length - 1) {
+          v.itemStyle = {
+            borderRadius: [0, borderRadiusText, 0, borderRadiusText]
+          };
+        } else {
+          v.itemStyle = {
+            borderRadius: [0, 0, 0, 0]
+          };
+        }
+      }
+    });
+  });
+};
+
+function createSeries(iChartOption, baseOpt, sum, legendData) {
+  const { showBackground = true, data } = iChartOption;
+  bindBorderRaduis(data);
+  for (let i = 0; i <= legendData.length - 1; i++) {
+    let seriesData = [];
+    data.forEach(item => {
+      seriesData.push(item.children.find(v => {
+        if (v.type === legendData[i]) {
+          v.sum = baseOpt.angleAxis.sum;
+          return v;
+        }
+      }));
+    });
+    baseOpt.series.push({
+      ...defaultSeries,
+      data: seriesData,
+      name: legendData[i],
+    });
+  }
+  if (showBackground) {
+    const placeHolderData = [];
+    data.forEach((_, index) => {
+      let typeSum = 0;
+      baseOpt.series.forEach((v) => {
+        typeSum += v.data[index]?.value ?? 0;
+      });
+      placeHolderData.push({
+        type: 'stack背景占位',
+        value: baseOpt.angleAxis.sum - typeSum,
+        itemStyle: { color: chartToken.itemColor },
+        sum: 0
+      });
+    });
+    baseOpt.series.push({
+      ...defaultSeries,
+      data: placeHolderData,
+      silent: true,
+      roundCap: true,
+      z: 1
+    });
+  }
+  baseOpt.series.forEach((series, index) => {
+    series.sum = sum;
+    series.itemStyle = {
+      borderColor: chartToken.itemBorderColor,
+      borderWidth: chartToken.itemBorderWidth,
+    };
+  });
+}
+
+const setRadiusAxis = (baseOpt, data, chartType, iChartOption) => {
+  const { labelContent = 'name', showBackground = true } = iChartOption;
+  baseOpt.radiusAxis.z = 10;
+  if (chartType === CHARTTYPE.PROCESS) {
+    baseOpt.radiusAxis.data = [];
+    return;
+  } else {
+    baseOpt.radiusAxis.data = data.map(item => item.name);
+  }
+  const getRatio = (params) => {
+    const index = params[1];
+    let value = 0;
+    let ratio = 0;
+    if (chartType === CHARTTYPE.STACK) {
+      (showBackground ? baseOpt.series.slice(0, -1) : baseOpt.series).forEach(val => {
+        value += val.data[index]?.value ?? 0;
+      });
+    } else {
+      value = baseOpt.series[index].data[index].beforeChangeValue ?? baseOpt.series[index].data[index].value ?? 0;
+    }
+    ratio = value / baseOpt.angleAxis.sum;
+    return ratio;
+  };
+  const iChartLabelFormatter = iChartOption?.radiusAxis?.axisLabel?.formatter;
+  if (iChartLabelFormatter) {
+    baseOpt.radiusAxis.axisLabel.formatter = (...params) => iChartLabelFormatter(...params, getRatio(params));
+  } else {
+    if (labelContent === 'name') {
+      return;
+    } else if (labelContent === 'nameWithRatio') {
+      const iChartLabelRich = iChartOption?.radiusAxis?.axisLabel?.rich ?? {};
+      const defaultLabelRich = {
+        name: {
+          color: chartToken.labelValueColor,
+          padding: [0, chartToken.labelPadding, 0, 0],
+          align: 'right',
+        },
+        ratio: {
+          color: chartToken.labelRatioColor,
+          // 设置宽度才能保证name也右对齐
+          width: getTextWidth('100%', baseOpt.radiusAxis.axisLabel.fontSize),
+          align: 'right',
+        }
+      };
+      baseOpt.radiusAxis.axisLabel.rich = merge(defaultLabelRich, iChartLabelRich);
+      baseOpt.radiusAxis.axisLabel.formatter = (...params) => `{name|${params[0]}}{ratio|${(getRatio(params) * 100).toFixed(0) + '%'}}`;
+    }
+  }
+};
+
+// 配置玉玦图的seriesData数据（value,name,color）
+export function setSeriesData(iChartOption, baseOpt, chartType) {
+  let { showBackground = true, data, color, roundCap = true } = iChartOption;
+  if (chartType === CHARTTYPE.PROCESS) {
+    data.forEach((dataItem, index) => {
+      baseOpt.series.push({
+        ...defaultSeries,
+        data: [dataItem.value],
+        roundCap: false,
+        name: dataItem.name,
+        beforeChangeValue: undefined,
+        showBackground,
+        backgroundStyle: { color: chartToken.itemColor }
+      });
+    });
+  } else if (chartType === CHARTTYPE.BASE) {
+    data.forEach((dataItem, index) => {
+      const newData = [];
+      data.forEach(v => {
+        const newIndex = data.length - 1 - index;
+        newData.push({
+          ...v,
+          value: v.name === dataItem.name ? dataItem.value : 0,
+          itemStyle: {
+            color: Array.isArray(color) ? getColor(color, newIndex) : color,
+          },
+          sum: baseOpt.angleAxis.sum,
+          beforeChangeValue: undefined,
+          index: newIndex
+        });
+      });
+      baseOpt.series.push({
+        ...defaultSeries,
+        data: newData,
+        roundCap,
+        name: dataItem.name,
+      });
+    });
+    if (showBackground) {
+      let bgData = [];
+      data.forEach(dataItem => {
+        bgData.push({
+          ...dataItem,
+          itemStyle: {
+            color: chartToken.itemColor,
+          },
+          value: baseOpt.angleAxis.sum - (dataItem.value ?? 0),
+          sum: 0,
+        });
+      });
+      baseOpt.series[data.length] = {
+        ...defaultSeries,
+        data: bgData,
+        z: 1,
+        roundCap,
+        // 关闭灰色进度鼠标hover事件
+        silent: true,
+      };
+    }
+  } else {
+    let legendData = [];
+    data.forEach(item => {
+      legendData = legendData.concat(item.children.map(v => v.type));
+    });
+    legendData = Array.from(new Set(legendData));
+    // 将数据按照legend的顺序排列好
+    data.forEach((item, index) => {
+      item.children.sort((a, b) => legendData.findIndex(v => v === a.type) - legendData.findIndex(v => v === b.type));
+    });
+    createSeries(iChartOption, baseOpt, baseOpt.angleAxis.sum, legendData);
+  }
+
+  // 自定义柱体最小占比
+  handleMinRatio(iChartOption, baseOpt, chartType);
+
+  // 配置展示每项data的名称,及显示层级
+  setRadiusAxis(baseOpt, data, chartType, iChartOption);
+}
+
+// 对非堆叠类型数据取反（已对iChartOption进行深拷贝），实现数据从外向内展示（echarts默认为内向外）
+export function reverseData(iChartOption, that) {
+  const { type = CHARTTYPE.BASE, data } = iChartOption;
+  let noChildData = data.every(item => (!item.children || !item.children.length));
+  if (type === CHARTTYPE.PROCESS) {
+    that.chartType = CHARTTYPE.PROCESS;
+  } else if (type === CHARTTYPE.BASE || noChildData) {
+    that.chartType = CHARTTYPE.BASE;
+    iChartOption.data = iChartOption.data.reverse();
+  } else {
+    that.chartType = CHARTTYPE.STACK;
+  }
+};

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

@@ -0,0 +1,71 @@
+/**
+ * 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 './BaseOption';
+import cloneDeep from '../../util/cloneDeep';
+import { setSeriesData, reverseData } from './handleSeries';
+import { handleLabelFormatter } from './labelFormatter';
+import PolarCoordSys from '../../option/PolarSys';
+import { setStartAngle, setbarWidth, handleLegendData, bindLegendEvent } from './handleOption';
+import { CHART_TYPE } from '../../util/constants';
+
+class JadeJueChart {
+
+  static name = CHART_TYPE.JADGEJUE;
+  static chartType;
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.baseOption = cloneDeep(BaseOption);
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(cloneDeep(iChartOption));
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    iChartOption.position = iChartOption.position || iChartOption.chartPosition;
+    iChartOption.max = iChartOption.max || iChartOption.calibrationValue;
+    // 对非堆叠类型数据取反（已对iChartOption进行深拷贝），实现数据从外向内展示（echarts默认为内向外）
+    reverseData(iChartOption, this);
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.JADGEJUE);
+    // 配置玉玦图的标定值和两种data下不同的angleAxis.sum和angleAxis.max
+    handleLabelFormatter(iChartOption, this.baseOption, this.chartType);
+    // 配置玉玦图的seriesData数据（value,name,color）
+    setSeriesData(iChartOption, this.baseOption, this.chartType);
+    // 设置默认线宽为(8=>16)
+    setbarWidth(iChartOption, this.baseOption, chartInstance, this.chartType);
+    // 配置玉玦图的起点角度及文本位置
+    setStartAngle(iChartOption, this.baseOption);
+    // 为第一种数据类型单独配置legend.data和对应颜色
+    handleLegendData(iChartOption, this.baseOption, this.chartType);
+    // 绑定图例点击事件，更新背景柱条对应series的数据
+    bindLegendEvent(this, chartInstance);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+
+  resize(callback){
+    setbarWidth(this.iChartOption, this.baseOption, this.chartInstance, this.chartType);
+    callback(this.baseOption)
+  }
+}
+
+export default JadeJueChart;