DvPetalHelper

静态花瓣图中的辅助函数集合

辅助类

standardChart.helper.petalHelper.handleRenderSeries(opts1, opts2, opts3，otherParams)

opts1

• 参数
  [10,39,23,18,45]
• 描述 花茎高度数据源

opts2

• 参数
  [ [0, 2, 3, 4, 5], // 花瓣1，花瓣2，花瓣3，花瓣4，花瓣5 [5, 4, 3, 2, 1], ... ]
• 描述 花瓣权重数据

opts3

• 参数
  ['legend0', 'legend1', 'legend2', 'legend3', 'legend4']
• 描述 legend类型数据

otherParams

• 参数 { minScale: 0.5, maxScale: 1.5, minDistance: 100 }
• 描述 自定义部分属性值（包含scale，minDistance）

代码示例

/**
 * 绘制自定义图形
 * @param sourceData 数据源
 * @param weightData 权重数据
 * @param legendData 类型数据
 * @param otherParams 自定义部分属性值（包含scale，minDistance）
 * @returns
 */

export function handleRenderSeries(sourceData, weightData, legendData, otherParams) {
  const seriesArray = [];
  const dege = 360 / legendData.length;
  legendData.forEach((item, index) => {
    const seriesItem: any = {
      type: 'custom',
      z: 51,
      name: '',
      dvType: 'petal',
      yAxisIndex: 1,
      data: sourceData,
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        }
      },
      renderItem: () => {}
    };
    const minScale = otherParams?.minScale || 0.8;
    const maxScale = otherParams?.maxScale || 1.8;
    const renderItem = function (params, api) {
      const maxValue = Math.max(...weightData[params.dataIndex]);
      const minValue = Math.min(...weightData[params.dataIndex]);
      let scale;
      if (maxValue - minValue === 0) {
        scale = maxScale;
      } else {
        const ratio = (maxScale - minScale) / (maxValue - minValue);
        scale = minScale + (weightData[params.dataIndex][params.seriesIndex] - minValue) * ratio;
      }
      const position = api.coord([api.value(0), api.value(1)]);
      const positionX1 = api.coord([0, 0]);
      const positionX2 = api.coord([1, 0]);
      const minDistance = otherParams?.minDistance || 27 * maxScale;
      const distance = positionX2[0] - positionX1[0];
      const hideItemNumber = takeEveryNth(
        sourceData.map((item, index) => (item === '' ? '' : index)).filter(item => item !== ''),
        Math.ceil(minDistance / distance)
      );
      return {
        focus: 'series',
        name: params.dataIndex,
        type: 'path',
        enterFrom: {
          // 淡入
          style: { opacity: 0 }
        },
        x: position[0],
        y: position[1],
        scaleX: weightData[params.dataIndex][params.seriesIndex] ? scale : 0,
        scaleY: weightData[params.dataIndex][params.seriesIndex] ? scale : 0,
        rotation: degreesToRadians(360 - params.seriesIndex * dege - 20),
        ignore: hideItemNumber.indexOf(params.dataIndex) !== -1 ? false : true,
        style: {
          lineWidth: 0.5,
          stroke: '#ffffff',
          opacity: 0.8,
          ...api.style()
        },
        shape: {
          pathData: 'M0 0 C-5 -5, -10 -27, 0 -27 C10 -27, 5 -5, 0 0',
          // 当前花瓣是否隐藏的状态
          dvState: hideItemNumber.indexOf(params.dataIndex) !== -1 ? false : true
        }
      };
    };
    seriesItem.name = legendData[index];
    seriesItem.renderItem = renderItem;
    seriesArray.push(util.clone(seriesItem));
  });
  // 添加花心
  seriesArray.push({
    data: sourceData,
    yAxisIndex: 1,
    type: 'scatter',
    dvType: 'scatter',
    symbolSize: 8,
    animation: false,
    z: 52,
    itemStyle: {
      color: '#4F4F5E',
      borderColor: '#ffffff',
      borderWidth: 1
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    }
  });
  // 添加花柱
  seriesArray.push({
    data: sourceData,
    yAxisIndex: 1,
    type: 'bar',
    dvType: 'bar',
    animation: false,
    barWidth: 1,
    itemStyle: {
      borderColor: '#D1D1E0',
      borderWidth: 1,
      borderType: 'dashed'
    },
    tooltip: {
      show: false
    }
  });
  return seriesArray;
}


function degreesToRadians(degrees) {
  return degrees * (Math.PI / 180);
}
function takeEveryNth(arr, minNum) {
  let result = [];
  let i = 0;

  while (i < arr.length) {
    let current = arr[i];
    result.push(current);

    let j = i + 1;
    while (j < arr.length && arr[j] - current < minNum) {
      j++;
    }

    i = j;
  }

  return result;
}