安装

npm install @xintao1105/basic-bar

or

yarn add @xintao1105/basic-bar

示例代码

import { BasicBar } from "@xintao1105/basic-bar";
import type {
  initProps,
  Axis,
  xAxisProps,
  yAxisProps,
  zAxisProps,
  seriesProps,
  markLineProps,
  labelProps,
} from "@xintao1105/basic-bar";
import "@xintao1105/basic-bar/dist/style.css";
<BasicBar {...initProps} />;

参数类型

export interface interProps {
  /**
   * 全局
   */
  chart?: {
    /**
     * 宽度
     * @default 420
     */
    width?: number;
    /**
     * 高度
     * @default 210
     */
    height?: number;
    /**
     * 边距
     * @description 数据顺序[上,右,下,左]
     * @default [30,25,25,45]
     */
    margin?: number[];
    /**
     * 柱状样式
     */
    bar?: {
      /**
       * 柱状类型
       * @description "方形" | "子弹头"
       * @default "select"
       */
      style?: "square" | "arc";
      /**
       * 系列间距
       * @description 范围0-1
       * @default 0.4
       */
      seriesIntervalWidth?: number;
      /**
       * 柱宽
       * @default 12
       */
      barWidth?: number;
      /**
       * 柱子背景
       * @default "rgba(255, 255, 255, 0)"
       */
      background?: string;
    };
    /**
     * 数据动画
     */
    dataAnimation?: {
      /**
       * @description: 是否启用
       * @default show = true
       */
      show?: boolean;
      /**
       * 动画时长(s)
       * @default 1
       */
      duration?: number;
    };
    /**
     * 定时渲染
     */
    timedRendering?: {
      /**
       * @description: 是否启用
       * @default show = false
       */
      show?: boolean;
      /**
       * 时间(s)
       * @default 10
       */
      time?: number;
    };
  };

  /**
   * 图例
   */
  legend?: legendProps;
  /**
   * 坐标轴
   */
  axes?: {
    xAxis?: xAxisProps;
    yAxis?: yAxisProps;
    zAxis?: zAxisProps;
  };
  /**
   * 系列
   */
  series?: seriesProps[];
  /**
   * 提示框
   */
  tooltip?: tooltipProps;
  /**
   * 数据
   */
  data?: Array<dataType> | [];
  /**
   * 主题名称
   */
  theme?: string;
  /**
   * 根据json文件注册自定义主题
   */
  themeJsonUrl?: string;
  /**
   * the opts of echarts. object, will be used when initial echarts instance by echarts.init
   */
  opts?: Opts;
  /**
   * the style of echarts div. object, default is {height: '300px'}
   */
  style?: CSSProperties;
  /**
   * the class of echarts div. you can setting the css style of charts by class name
   */
  className?: string;
  /**
   * when after chart reander, do the callback widht echarts instance
   */
  onChartReady?: (instance: any) => void;
  /**
   * binding the echarts event, will callback with the echarts event object, and the echart object as it's paramters.
   * https://echarts.apache.org/zh/api.html#echartsInstance.on
   * const onEvents = {
   *   'click': this.onChartClick,
   *   'legendselectchanged': this.onChartLegendselectchanged
   * }
   */
  onEvents?: Record<string, (e: any, instance: any) => void>;
}