@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +1,66 @@
+/**
+ * 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';
+import { CHARTTYPE } from './BaseOption';
+import cloneDeep from '../../util/cloneDeep';
+
+// 配置默认鼠标悬浮提示框
+export function defaultTooltipFormatter(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = params => {
+      let htmlString = '';
+      const bgColor = params.data.borderColor || params.data.color;
+      htmlString +=
+        `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color
+          :${defendXSS(bgColor)};">` +
+        '</span>' +
+        `<span style="display:inline-block;margin-left:5px">${defendXSS(params.data.type)}</span>` +
+        '<br/>' +
+        `<span style="display:inline-block;">${defendXSS(params.data.label)}</span>` +
+        `<span style="display:inline-block;margin-left:10px;">${defendXSS(params.data.value)}</span>` +
+        '<br/>';
+      return htmlString;
+    };
+  }
+}
+
+const judgeType = (that) => {
+  const { iChartOption: { type, data } } = that;
+  if (!data || !data.length) throw new Error('聚合气泡图必须定义data数据');
+  const noChild = data.every(item => !item.children || !item.children.length);
+  for (let i in CHARTTYPE) {
+    if (type === CHARTTYPE[i]) {
+      that.chartType = CHARTTYPE[i];
+    }
+  }
+  if (!that.chartType) {
+    that.chartType = CHARTTYPE[noChild ? 'NON_NESTED' : 'NESTED'];
+  }
+};
+
+const bindLegendEvent = (baseOpt, chartInstance) => {
+  let originSource = cloneDeep(baseOpt.dataset[0].source);
+  chartInstance.on('legendselectchanged', function (params) {
+    let newSource = [originSource[0]];
+    for (let type in params.selected) {
+      if (params.selected[type]) {
+        newSource = newSource.concat(originSource.filter(v => v.type === type));
+      }
+    }
+    baseOpt.dataset[0].source = newSource;
+    setTimeout(() => {
+      chartInstance.setOption(baseOpt);
+    }, 20);
+  });
+};
+
+export { judgeType, bindLegendEvent };

package/src/components/charts/components/AssembleBubbleChart/handleRootData.js

@@ -0,0 +1,165 @@
+/**
+ * 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 { random } from '../../util/math';
+import { CHARTTYPE } from './BaseOption';
+
+function setChartPosition(polarInfo, chartInstance) {
+  let radius = polarInfo.radius, widthDis, heightDis;
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+
+  const getNumber = (value, { callback1, callback2, callback3 }) => {
+    let correctValue;
+    if (typeof value !== 'number') {
+      if (value.indexOf('%') !== -1) { // 有百分比的字符串数字
+        correctValue = callback1(value);
+      } else { // 无百分比的字符串数字
+        correctValue = callback2(value);
+      }
+    } else { // 数值
+      correctValue = callback3(value);
+    }
+    return correctValue;
+  };
+
+  radius = getNumber(radius, {
+    callback1: (value) => value.substring(0, value.indexOf('%')) / 100,
+    callback2: (value) => parseFloat(value) / Math.min(height, width),
+    callback3: (value) => value / Math.min(height, width),
+  });
+
+  widthDis = getNumber(polarInfo.center[0], {
+    callback1: (value) => width * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
+    callback2: (value) => parseFloat(value),
+    callback3: (value) => value,
+  });
+
+  heightDis = getNumber(polarInfo.center[1], {
+    callback1: (value) => height * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
+    callback2: (value) => parseFloat(value),
+    callback3: (value) => value,
+  });
+
+  return { radius, widthDis, heightDis };
+}
+
+export function handleRootData(d3, { baseOption, chartInstance, iChartOption, chartType }) {
+  // polar的信息会在index中被删除，此处需要储存一份用于计算节点坐标等。
+  const polarInfo = cloneDeep(baseOption.polar);
+  const { textStyle = {}, sortType = 'decline' } = iChartOption;
+  let distance = iChartOption.distance;
+  if (iChartOption.distance === undefined) {
+    switch (chartType) {
+      case CHARTTYPE.NON_NESTED:
+        distance = 50;
+        break;
+      default:
+        distance = 5;
+        break;
+    }
+  }
+  const stratify = (sourceData) => {
+    let sortResult = d3
+      .stratify()
+      .parentId(function (d) {
+        return d.id.substring(0, d.id.lastIndexOf('.'));
+      })(sourceData)
+      .sum(function (d) {
+        return d.value || 0;
+      });
+    switch (sortType) {
+      case 'decline': // 降序（中心向外，球尺寸依次减小）
+        sortResult = sortResult.sort((a, b) => b.value - a.value);
+        break;
+      case 'ascend': // 升序（中心向外，球尺寸依次增大）
+        sortResult = sortResult.sort((a, b) => a.value - b.value);
+        break;
+      case 'unset':  // 不设置
+        break;
+      default:
+        break;
+    }
+    return sortResult;
+  };
+  // 给baseOptionion设置renderItem,且只能设置一次，多次则会造成视图重叠
+  baseOption.series[baseOption.series.length - 1].renderItem = (params, api) => {
+    const displayRoot = stratify(baseOption.dataset[0].source);
+    const context = params.context;
+    if (!context.layout) {
+      context.layout = true;
+      context.nodes = {};
+      d3
+        .pack()
+        .size([api.getWidth() - 2, api.getHeight() - 2])
+        .padding(distance)(displayRoot);
+      displayRoot.descendants().forEach(node => { context.nodes[node.id] = node; });
+    }
+    const node = context.nodes[api.value('id')];
+    if (!node || node.r <= 0) {
+      return;
+    }
+    // 设置label值是否显示，若有嵌套则不显示，否则显示
+    const nodeName = (!node.children || !node.children.length) ? node.data.label : '';
+    const { radius, widthDis, heightDis } = setChartPosition(polarInfo, chartInstance);
+    return {
+      type: 'circle',
+      // 定义球的坐标及半径
+      shape: {
+        cx: node.x * radius + widthDis,
+        cy: node.y * radius + heightDis,
+        // 若移动页面使得球的半径小于0时则取反
+        r: node.r * radius > 0 ? node.r * radius : -node.r * radius,
+      },
+      transition: ['shape'],
+      z2: api.value('depth') * 2,
+      // 定义球的文本信息等
+      textContent: {
+        type: 'text',
+        style: {
+          text: (node.depth !== 0 && node.data.showLabel) ? (textStyle.formatter && textStyle.formatter(node) || nodeName) : '',
+          fontFamily: 'Arial',
+          width: node.r,
+          height: node.r,
+          borderRadius: node.r,
+          // 文本溢出显示
+          overflow: 'visible',
+          fontSize: Math.max(node.r / 3, 12),
+          fill: chartType !== CHARTTYPE.NESTED ? '#ffffff' : node.data.textColor, // 设计稿白主题默认白色
+          ...textStyle
+        },
+      },
+      // 设置文本显示的位置
+      textConfig: { position: 'inside' },
+      style: {
+        // 设置球的边框色
+        stroke: node.data.borderColor,
+        // 设置球的背景色
+        fill: node.data.color,
+      },
+      // 设置球的跳动范围
+      keyframeAnimation: {
+        duration: 3000,
+        loop: true,
+        delay: random() * 2000,
+        keyframes: [
+          { y: -3, percent: 0.5, easing: 'cubicOut' },
+          { y: 0, percent: 1, easing: 'bounceOut' },
+          { x: -3, percent: 0.5, easing: 'cubicOut' },
+          { x: 0, percent: 1, easing: 'bounceOut' },
+        ],
+      },
+    };
+  };
+}
+
+

package/src/components/charts/components/AssembleBubbleChart/handleSeriesData.js

@@ -0,0 +1,70 @@
+/**
+ * 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 { CHARTTYPE } from "./BaseOption";
+import { getColor, codeToRGB } from "../../util/color";
+import chartToken from "./chartToken";
+
+export function handleSeriesData(iChartOption, baseOpt, chartType) {
+  const sourceData = [
+    {
+      depth: 0,
+      id: 'option',
+      value: 1255,
+      type: undefined,
+      label: undefined,
+    }
+  ];
+  const legendData = [];
+
+  const loopData = (data, depth = 1, parentInfo = { id: 'option' }) => {
+    data.forEach((item, index) => {
+      item.depth = depth;
+      item.id = `${parentInfo.id}.${index}`;
+      item.textColor = chartToken.labelColor;
+      if (depth === 1) {
+        let hasRecordIndex = legendData.findIndex(v => v === item.type);
+        item.color = getColor(iChartOption.color, hasRecordIndex !== -1 ? hasRecordIndex : legendData.length);
+        item.borderColor = item.color;
+      } else {
+        item.type = parentInfo.type;
+        item.color = parentInfo.color;
+        item.borderColor = parentInfo.borderColor;
+      }
+      sourceData.push(item);
+      if (!legendData.includes(item.type)) {
+        legendData.push(item.type);
+      }
+      if (chartType === CHARTTYPE.NESTED && item.children && item.children.length) {
+        if (item.depth === 1) {
+          item.color = codeToRGB(item.color, .2);
+        }
+        loopData(item.children, depth + 1, item);
+      }
+    });
+  };
+
+  loopData(iChartOption.data);
+
+  baseOpt.dataset[0].source = sourceData;
+
+  baseOpt.legend.data = legendData;
+
+  [...legendData].reverse().forEach((item) => {
+    baseOpt.series.unshift({
+      name: item,
+      type: 'pie',
+      data: [],
+      radius: ['0%', '0%'],
+      colorBy: 'data',
+    });
+  });
+}

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

@@ -0,0 +1,65 @@
+/**
+ * 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 BaseOption from './BaseOption';
+import { defaultTooltipFormatter, judgeType, bindLegendEvent } from './handleOption';
+import { handleRootData } from './handleRootData';
+import { handleSeriesData } from './handleSeriesData';
+import init from '../../option/init';
+import { isArray } from '../../util/type';
+import { CHART_TYPE } from '../../util/constants';
+import PolarCoordSys from '../../option/PolarSys';
+
+class AssembleBubbleChart {
+
+  static name = CHART_TYPE.ASSEMBLE_BUBBLE;
+  static chartType;
+
+  constructor(iChartOption, chartInstance, plugins) {
+    this.baseOption = cloneDeep(BaseOption);
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    this.plugins = plugins;
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    this.iChartOption.position = this.iChartOption.position ?? this.iChartOption.chartPosition;
+    const { d3 } = this.plugins;
+    if (!d3) throw new Error('您必须安装d3才可以使用聚合气泡图');
+    if (!isArray(this.iChartOption.color)) { this.iChartOption.color = [this.iChartOption.color]; }
+    // 判断图表类型
+    judgeType(this);
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.ASSEMBLE_BUBBLE);
+    // 补齐默认的tooltip.formatter
+    defaultTooltipFormatter(this.baseOption);
+    // 处理dataset、legend.data、补全series
+    handleSeriesData(this.iChartOption, this.baseOption, this.chartType);
+    // 编写自定义renderItem函数
+    handleRootData(d3, this);
+    // 聚合气泡图属于自定义系列，使用polar会报错，需要删除
+    delete this.baseOption.polar;
+    // 自定义系列的图例点击事件需要自行绑定
+    bindLegendEvent(this.baseOption, chartInstance);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption(option) {
+    this.baseOption = option;
+  }
+}
+
+export default AssembleBubbleChart;

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

@@ -0,0 +1,162 @@
+/**
+ * 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 BaseChart from '../BaseChart';
+import * as echarts from 'echarts'
+import { CHART_TYPE } from '../../util/constants';
+
+// 常规的调用方法
+let amapPromise = null
+
+export default class AutonaviMapChart extends BaseChart {
+
+  static name = CHART_TYPE.AUTONAVI_MAP
+
+  constructor() {
+    super();
+    // 图表echarts实例
+    this.echartsIns = null;
+    // 图表icharts实例
+    this.ichartsIns = null;
+
+    // 图表echarts配置项
+    this.eChartOption = null;
+    // 图表icharts配置项
+    this.iChartOption = null;
+
+    // 图表渲染容器
+    this.dom = null;
+    // 图表配置项
+    this.option = null;
+  }
+
+  getAmap (option) {
+    if (!amapPromise) {
+      const key = option.key;
+      const url = option.url;
+      const version = option.version || option.ver || option.v;
+      amapPromise = new Promise((resolve) => {
+        const cbName = 'amap' + Date.now();
+        let script = document.createElement('script');
+        window[cbName] = resolve;
+        let src = `${url}?v=${version}&key=${key}`;
+        if (option.plugin) {
+          src += `&plugin=${option.plugin}`;
+        }
+        script.src = `${src}&callback=${cbName}`;
+        script.onload = () => resolve();
+        document.body.appendChild(script);
+      })
+    }
+    return amapPromise;
+  }
+
+  // 初始化图表渲染容器
+  init (dom) {
+    this.uninstall();
+    this.dom = dom;
+    this.echartsIns = echarts.init(this.dom);
+  }
+
+  // 初始化图表渲染配置
+  setSimpleOption (chartName, option) {
+    this.option = option;
+    this.getAmap(this.option).then(() => {
+      this.echartsIns.setOption(this.option);
+      this.setResizeObserver();
+    })
+  }
+
+  // 图表渲染回调
+  render () {
+    this.initDom() // 渲染dom
+    this.renderCallBack && this.renderCallBack(this);
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady (callback) {
+    this.renderCallBack = callback;
+  }
+
+  // 渲染dom
+  initDom () {
+
+  }
+
+
+  // 监听容器变化
+  setResizeObserver () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.resizeObserver = new ResizeObserver(entries => {
+      this.resizeDom();
+    });
+    this.resizeObserver.observe(this.dom);
+  }
+
+  resizeDom () {
+    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
+  }
+
+  // 图表刷新，刷新配置项
+  refresh (option) {
+    this.iChartOption = option;
+    this.setSimpleOption('AutonaviMapChart', this.iChartOption);
+    this.resizeDom();
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData (data) {
+    this.iChartOption.series[0].data = data;
+    this.refresh(this.iChartOption);
+  }
+
+  // 刷新图表自适应宽度
+  setResize () {
+    this.resizeDom();
+  }
+
+  // 销毁图表
+  uninstall () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    // 销毁ECharts实例
+    if (this.echartsIns && !this.echartsIns.isDisposed()) {
+      this.echartsIns.dispose();
+    }
+    this.echartsIns = null;
+    this.dom = null;
+  }
+
+  // 获取到ECharts实例
+  getEchartsInstance () {
+    return this.echartsIns;
+  }
+
+  // 获取到ECharts配置项
+  getEchartsOption () {
+    return this.echartsIns.getOption();
+  }
+
+  // 获取 ECharts 高德地图组件
+  getAmapComponent () {
+    return this.echartsIns.getModel().getComponent('amap');
+  }
+
+  // 获取高德地图实例
+  getAmapInstance () {
+    return this.getAmapComponent().getAMap();
+  }
+}

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

@@ -0,0 +1,148 @@
+/**
+ * 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 BaseChart from '../BaseChart';
+import * as echarts from 'echarts';
+import 'echarts/extension/bmap/bmap';
+import { CHART_TYPE } from '../../util/constants';
+
+// 判断map资源加载的flag
+let mapApiLoaded = false;
+export default class BaiduMapChart extends BaseChart {
+
+    static name = CHART_TYPE.BAIDU_MAP
+
+    constructor() {
+        super();
+        // 图表echarts实例
+        this.echartsIns = null;
+        // 图表渲染容器
+        this.dom = null;
+        // 图表配置项
+        this.option = null;
+        // 图表所需数据
+        this.data = null;
+        // 图表容器的宽高变化监听器
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.uninstall();
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setSimpleOption(chartName, option) {
+        this.option = option;
+    }
+
+    loadMap({ key, version, url }) {
+        return new Promise((resolve) => {
+            if (mapApiLoaded) {
+                resolve(window.BMap);
+                return
+            }
+            let cbName = 'bmap' + Date.now();
+            let script = document.createElement('script');
+            let ver = version || '2.0';
+
+            window[cbName] = function () {
+                mapApiLoaded = true;
+                resolve(window.BMap);
+            }
+            script.src = [`${url}?${ver}`, `ak=${key}`, `callback=${cbName}`].join('&');
+            document.body.appendChild(script);
+        })
+    }
+
+    // 加载百度api，并渲染图表
+    render() {
+        let url = this.option.url;
+        let ver = this.option.v || '2.0';
+        let key = this.option.key;
+        this.loadMap({ key, version: ver, url }).then(() => {
+            this.renderInit();
+        })
+    }
+
+    // 渲染图表
+    renderInit() {
+        this.echartsIns = echarts.init(this.dom);
+        // 渲染
+        this.setOption(this.option);
+        this.setResizeObserver();
+        // 图表渲染完成时回调
+        this.renderCallBack && this.renderCallBack(this.echartsIns);
+    }
+
+    // 第一次渲染: 调用echarts原生的setOption
+    setOption(option) {
+        this.echartsIns.setOption(option);
+    }
+
+    // 图表渲染完成时回调
+    onRenderReady(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 监听容器变化
+    setResizeObserver() {
+        this.resizeObserver = new ResizeObserver(entries => {
+            this.resizeDom();
+        });
+        this.resizeObserver.observe(this.dom);
+    }
+
+    resizeDom() {
+        this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
+    }
+
+    // 图表刷新，包括刷新配置和数据
+    refresh(iChartOption) {
+        this.iChartOption = iChartOption;
+        this.setSimpleOption(this.chartName, iChartOption);
+        this.render();
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData(data) {
+        this.iChartOption.series[0].data = data;
+        this.refresh(this.iChartOption);
+    }
+
+    // 刷新图表自适应宽度
+    setResize() {
+        this.resizeDom();
+    }
+
+    // 销毁图表
+    uninstall() {
+        // 卸载window resize监听功能
+        window.removeEventListener('resize', this.throttleResize);
+        // 卸载container容器变化监听
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        this.echartsDisposed();
+        this.echartsIns = null; 
+        // 销毁dom
+        this.dom = null;
+    }
+    
+    // 销毁ECharts实例
+    echartsDisposed() {
+        if (this.echartsIns && !this.echartsIns.isDisposed()) {
+            this.echartsIns.dispose();
+        }
+    }
+}