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 |
Props areaStyleProps
参数 |
说明 |
类型 |
默认值 |
show |
是否显示填充样式 |
boolean |
false |
isGrad |
是否渐变 |
string |
#333 |
color |
渐变颜色不填则默认线条颜色 |
string[color, color] |
-- |
Props itemStyleProps
参数 |
说明 |
类型 |
默认值 |
barWidth |
柱条的宽度 |
number |
-- |
borderRadius |
柱条圆角半径 |
number[] |
-- |