react echarts line base
基础线性echarts图表。提取常用api进行封装的echarts插件。
安装
npm install --save @ahwecharts/line-base
引入
import LineBaseEcharts from '@ahwecharts/line-base';
or
import { LineBaseEcharts } from 'ahwecharts';
基本用法
import ReactDOM from 'react-dom';
import LineBaseEcharts from '@ahwecharts/line-base';
ReactDOM.render(
<div>
<LineBaseEcharts
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% |
smooth | 是否平滑曲线显示 | 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 |
-- |
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] | -- |