@xintao1105/basic-bar
v1.0.2
Published
```bash npm install @xintao1105/basic-bar ```
Downloads
2
Readme
安装
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>;
}