shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/charts/Bar/BasicBar/src/props.ts

import type { PropType, ExtractPropTypes } from "vue";
import { EChartsOption } from "echarts";
import { getNormalizedChart, dataSource } from "../../../utils";
import { DataSourceType } from "../../../chartEnum";

export const basicBarProps = {
  width: {
    type: Number as PropType<number>,
    default: 400,
  },
  height: {
    type: Number as PropType<number>,
    default: 260,
  },
  dataSource,
  // 标题
  title: {
    type: Object as PropType<EChartsOption["title"]>,
  },
  // 图例
  legend: {
    type: Object as PropType<EChartsOption["legend"]>,
  },
  // 背景
  backgroundColor: {
    type: String as PropType<string>,
  },
  // 边框
  grid: {
    type: Object as PropType<EChartsOption["grid"]>,
  },
  // 提示框
  tooltip: {
    type: Object as PropType<EChartsOption["tooltip"]>,
  },
  // x轴数据
  xAxis: {
    type: Object as PropType<EChartsOption["xAxis"]>,
  },
  // y轴数据
  yAxis: {
    type: Object as PropType<EChartsOption["yAxis"]>,
  },
  // 折线
  series: {
    type: Array as PropType<EChartsOption["series"]>,
  },
  // color
  color: {
    type: Object as PropType<EChartsOption["color"]>
  }
};

/* 系列相关 */
const series: EChartsOption['series'] = [];
series['bar' as unknown as number] = {
  // @ts-ignore
  fixedBarWidth: false,
  barWidth: 'auto',
  barGap: '10%',
  barCategoryGap: '20%',
  itemStyle: {
    borderColor: '#ccc',
    borderRadius: 0,
    borderWidth: 0,
  }
};

const chartOptions = getNormalizedChart({
  title: {
    text: "柱状图标题",
  },
  xAxis: {
    data: ['轴标签A', '轴标签B', '轴标签C', '轴标签D']
  },
  series
})

export const defaultPropsValue: EChartsOption = {
  // 组件容器默认属性
  container: {
    props: {
      width: 400,
      height: 260,
    },
  },
  // 图表默认属性
  props: {
    // 数据源
    dataSource: {
      sourceType: DataSourceType.STATIC,
      data: {
        series: [
          {
            type: 'bar',
            name: '系列1',
            data: [10, 30, 20, 40]
          },
          {
            type: 'bar',
            name: '系列2',
            data: [15, 35, 25, 45]
          },
        ]
      },
      url: location.origin + "/mock/api/get/example/bar",
      method: "POST",
      params: {},
      headers: {},
      refreshTime: 0,
      dataProcess: `
        (res) => {
          // 取出列表
          const data = res.data;
          // x轴数据
          const xData = data.map((item) => item.name); 
          // 系列数据
          const series = [
            { type: 'bar', name: '价格', data: data.map(item => item.price) },
            { type: 'bar', name: '总量', data: data.map(item => item.count) },
          ];

          // 返回图表数据
          return { xData, series };
        }
      `
    },
    ...chartOptions
  },
};

export type BasicBarProps = ExtractPropTypes<typeof basicBarProps>;