@xiaomengqiang/charts/components/BulletChart/handleSeries.js

hcharts library for web visualization

import { codeToRGB } from '../../util/color.js';
import { isArray } from '../../util/type.js';
import chartToken from './chartToken.js';
import Theme from '../../feature/token/index.js';

/**
 * 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.
 *
 */

// 设置背景色颜色
function handleSetColor(data, opacity) {
  var colorState = Theme.config.colorState;
  var stateColorGroup = {
    info: colorState.colorInfo,
    error: colorState.colorError,
    warning: colorState.colorAlert,
    subwarning: colorState.colorWarning,
    success: colorState.colorSuccess
  };
  var backgroundColor;
  if (data.color) {
    backgroundColor = data.color;
  } else {
    backgroundColor = stateColorGroup[data.name] ? codeToRGB(stateColorGroup[data.name], opacity) : '';
  }
  return backgroundColor;
}
function handleLabel(barData, iChartOpt, baseOpt) {
  var label = iChartOpt.label;
  var colorBoard = Theme.config.colorBoard;
  var orange = colorBoard.orange.colorOrange40;
  var green = colorBoard.green.colorGreen40;
  var labelOption = label;
  if (labelOption && labelOption.show) {
    var showLabelArr = [];
    barData.forEach(function (item, index) {
      var markLineNum = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data[index] : iChartOpt.markLine.data;
      var showLabel = Math.round((item - markLineNum) / markLineNum * 100);
      showLabelArr.push(showLabel);
    });
    // 柱子显示文本固定显示在最上方
    var categoryX = {
      type: 'category',
      position: 'top',
      data: showLabelArr,
      axisLabel: {
        show: true,
        fontSize: chartToken.fontSize,
        formatter: function formatter(value) {
          return value + '%';
        },
        color: function color(value) {
          return value >= 0 ? green : orange;
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    };
    baseOpt.xAxis.push(categoryX);
  }
}
function handleSeries(baseOpt, iChartOpt, legendData, seriesData) {
  var _iChartOpt$itemStyle, _iChartOpt$itemStyle2;
  var series = [];
  var barWidth = (_iChartOpt$itemStyle = iChartOpt.itemStyle) != null && _iChartOpt$itemStyle.barWidth ? iChartOpt.itemStyle.barWidth : chartToken.barWidth;
  var backgroundWidth = (_iChartOpt$itemStyle2 = iChartOpt.itemStyle) != null && _iChartOpt$itemStyle2.backgroundWidth ? iChartOpt.itemStyle.backgroundWidth : chartToken.barBgWidth;
  var barData = seriesData[legendData[0]];
  var radius = chartToken.borderRadius;
  var borderRadius = [radius, radius, 0, 0];
  if (iChartOpt.direction === 'horizontal') {
    borderRadius = [0, radius, radius, 0];
  }
  var barObj = {
    name: legendData[0],
    type: 'bar',
    //type: 'pictorialBar',
    barWidth: barWidth,
    z: 10,
    data: barData,
    symbol: 'rect',
    symbolRepeat: false,
    itemStyle: {
      borderRadius: borderRadius
    }
  };
  // 设置图例
  handleLabel(barData, iChartOpt, baseOpt);
  var markLineData = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data : iChartOpt.data.map(function () {
    return iChartOpt.markLine.data;
  });
  // 设置阈值
  var scatterObj = {
    type: 'scatter',
    symbol: 'rect',
    silent: true,
    symbolSize: iChartOpt.markLine.symbolSize ? iChartOpt.markLine.symbolSize : [32, 2],
    symbolOffset: iChartOpt.markLine.symbolOffset ? iChartOpt.markLine.symbolOffset : [0, 0],
    z: 20,
    data: markLineData,
    color: iChartOpt.markLine.color ? iChartOpt.markLine.color : handleSetColor(iChartOpt.markLine, 1),
    emphasis: {
      scale: false
    }
  };
  // 设置柱子背景
  if (iChartOpt.background) {
    iChartOpt.background.forEach(function (item) {
      var rectData = isArray(item.data) ? item.data : iChartOpt.data.map(function () {
        return item.data;
      });
      series.push({
        type: 'bar',
        barWidth: backgroundWidth,
        stack: 'total',
        data: rectData,
        color: iChartOpt.theme.indexOf('dark') !== -1 ? handleSetColor(item, 0.3) : handleSetColor(item, 0.15)
      });
    });
    // 计算柱子的偏移量
    baseOpt.barGap = -((backgroundWidth - barWidth) / 2 / barWidth * 100 + 100) + '%';
    // 计算阈值的偏移量
    if (iChartOpt.direction === 'horizontal') {
      scatterObj.symbolOffset[1] = -(backgroundWidth - barWidth) / 4;
    } else {
      scatterObj.symbolOffset[0] = -(backgroundWidth - barWidth) / 4;
    }
  }
  series.unshift(scatterObj);
  series.unshift(barObj);
  baseOpt.series = series;
}
export { handleSeries };