@fmdevui/fm-dev/es/packages/core/ui/components/fmHBarChart/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, computed, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeStyle } from 'vue';
import { useChartComponent, useChartOps } from '../../../hook/useChart.mjs';
import { graphic } from '../../../plugins/echarts.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "FmHBarChart" },
  __name: "index",
  props: {
    // 基础配置
    height: {
      type: Number,
      default: () => useChartOps().chartHeight
    },
    loading: {
      type: Boolean,
      default: false
    },
    isEmpty: {
      type: Boolean,
      default: false
    },
    colors: {
      type: Array,
      default: () => useChartOps().colors
    },
    // 数据配置
    data: {
      type: Array,
      default: () => [0, 0, 0, 0, 0, 0, 0]
    },
    xAxisData: {
      type: Array,
      default: () => []
    },
    barWidth: {
      type: String,
      default: "36%"
    },
    stack: {
      type: Boolean,
      default: false
    },
    // 轴线显示配置
    showAxisLabel: { type: Boolean, default: true },
    showAxisLine: { type: Boolean, default: true },
    showSplitLine: { type: Boolean, default: true },
    // 交互配置
    showTooltip: { type: Boolean, default: true },
    showLegend: { type: Boolean, default: false },
    legendPosition: {
      type: String,
      default: "bottom"
    }
  },
  setup(__props) {
    const props = __props;
    const isMultipleData = computed(() => {
      return Array.isArray(props.data) && props.data.length > 0 && typeof props.data[0] === "object" && "name" in props.data[0];
    });
    const getColor = (customColor, index) => {
      if (customColor) return customColor;
      if (index !== void 0) {
        return props.colors[index % props.colors.length];
      }
      return new graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#4ABEFF"
        },
        {
          offset: 1,
          color: "#00E4E5"
        }
      ]);
    };
    const createGradientColor = (color) => {
      return new graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color
        },
        {
          offset: 1,
          color
        }
      ]);
    };
    const getBaseItemStyle = (color) => ({
      borderRadius: 4,
      color: typeof color === "string" ? createGradientColor(color) : color
    });
    const createSeriesItem = (config) => {
      const animationConfig = getAnimationConfig();
      return {
        name: config.name,
        data: config.data,
        type: "bar",
        stack: config.stack,
        itemStyle: getBaseItemStyle(config.color),
        barWidth: config.barWidth || props.barWidth,
        ...animationConfig
      };
    };
    const {
      chartRef,
      getAxisLineStyle,
      getAxisLabelStyle,
      getAxisTickStyle,
      getSplitLineStyle,
      getAnimationConfig,
      getTooltipStyle,
      getLegendStyle,
      getGridWithLegend
    } = useChartComponent({
      props,
      checkEmpty: () => {
        if (Array.isArray(props.data) && typeof props.data[0] === "number") {
          const singleData = props.data;
          return !singleData.length || singleData.every((val) => val === 0);
        }
        if (Array.isArray(props.data) && typeof props.data[0] === "object") {
          const multiData = props.data;
          return !multiData.length || multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0));
        }
        return true;
      },
      watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
      generateOptions: () => {
        const options = {
          grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
            top: 15,
            right: 0,
            left: 0
          }),
          tooltip: props.showTooltip ? getTooltipStyle() : void 0,
          xAxis: {
            type: "value",
            axisTick: getAxisTickStyle(),
            axisLine: getAxisLineStyle(props.showAxisLine),
            axisLabel: getAxisLabelStyle(props.showAxisLabel),
            splitLine: getSplitLineStyle(props.showSplitLine)
          },
          yAxis: {
            type: "category",
            data: props.xAxisData,
            axisTick: getAxisTickStyle(),
            axisLabel: getAxisLabelStyle(props.showAxisLabel),
            axisLine: getAxisLineStyle(props.showAxisLine)
          }
        };
        if (props.showLegend && isMultipleData.value) {
          options.legend = getLegendStyle(props.legendPosition);
        }
        if (isMultipleData.value) {
          const multiData = props.data;
          options.series = multiData.map((item, index) => {
            const computedColor = getColor(props.colors[index], index);
            return createSeriesItem({
              name: item.name,
              data: item.data,
              color: computedColor,
              barWidth: item.barWidth,
              stack: props.stack ? item.stack || "total" : void 0
            });
          });
        } else {
          const singleData = props.data;
          const computedColor = getColor();
          options.series = [
            createSeriesItem({
              data: singleData,
              color: computedColor
            })
          ];
        }
        return options;
      }
    });
    return (_ctx, _cache) => {
      const _directive_loading = resolveDirective("loading");
      return withDirectives((openBlock(), createElementBlock(
        "div",
        {
          ref_key: "chartRef",
          ref: chartRef,
          class: "relative w-full",
          style: normalizeStyle({ height: props.height })
        },
        null,
        4
        /* STYLE */
      )), [
        [_directive_loading, props.loading]
      ]);
    };
  }
});

export { _sfc_main as default };