@ahwecharts/bar-base NPM

react echarts line base

基础柱状图echarts图表。提取常用api进行封装的echarts插件。

安装

npm install --save @ahwecharts/bar-base

引入

import BarBaseEcharts from '@ahwecharts/bar-base';
or
import { BarBaseEcharts } from 'ahwecharts';

基本用法

import ReactDOM from 'react-dom';
import BarBaseEcharts from '@ahwecharts/bar-base';

ReactDOM.render(
  <div>
    <BarBaseEcharts
      smooth
      colors={['#f00']}
      areaStyle={{
        show: true,
        isGrad: true,
        color: ['#ff0', 'rgba(255, 255, 255, 0)']
      }}
      data={[
        { name: 'Mon', value: 150},
        { name: 'Tue', value: 230},
        { name: 'Wed', value: 224},
        { name: 'Thu', value: 218},
        { name: 'Fri', value: 135},
        { name: 'Sat', value: 147},
        { name: 'Sun', value: 260},
      ]}
    />
  </div>,
  _mount_
);

Props Line

参数	说明	类型	默认值
width	宽	string	`100%`
height	高	string	`100%`
isHorizontal	是否横排	boolean	`false`
colors	柱状图颜色	string[]	--
color	文字颜色	string	`#333`
lineColor	x, y轴轴线线条颜色	string	`#abb9d0`
splitColor	x, y轴网格线条颜色	string	`#e0e7f3`
fontSize	字体大小	number / string	`14`
grid	组件容器	`GridComponentOption`	`{}`
xAxis	X 轴配置	`xAxisProps`	--
yAxis	Y 轴配置	`yAxisProps`	--
areaStyle	柱状图填充样式	`areaStyleProps`	--
itemStyle	柱状图填充样式	`itemStyleProps`	--
isSwitch	是否自动切换 Tooltip	boolean	`false`
switchTime	自动切换时间	number	`2000`
data	数据	any[]	[]
onClick	点击	(v: any) => void	--

Props data[]

参数	说明	类型	默认值
name	健	string	--
value	值	number	--

Props xAxisProps

参数	说明	类型	默认值
color	文字颜色	string	`#333`
fontSize	字体大小	number / string	`14`
lineColor	x轴轴线线条颜色, false 则不显示	string / boolean	`false`
splitColor	x轴网格线条颜色, false 则不显示, 默认true	string / boolean	`true`
rotate	刻度标签旋转角度	number	`0`
isTick	是否显示坐标轴刻度	boolean	`false`

Props yAxisProps

参数	说明	类型	默认值
name	坐标轴名称	string	--
color	文字颜色	string	`#333`
fontSize	字体大小	number / string	`14`
lineColor	y轴轴线线条颜色, false 则不显示	string / boolean	`false`
splitColor	y轴网格线条颜色, false 则不显示, 默认true	string / boolean	`true`