react echarts line stacked
多线性echarts图表。提取常用api进行封装的echarts插件。
安装
npm install --save @ahwecharts/line-stacked
引入
import LineStackedEcharts from '@ahwecharts/line-stacked';
or
import { LineStackedEcharts } from 'ahwecharts';
基本用法
import ReactDOM from 'react-dom';
import LineStackedEcharts from '@ahwecharts/line-stacked';
ReactDOM.render(
<div>
<LineStackedEcharts
smooth
areaStyle={{
show: true,
isGrad: true
}}
data={[
{
name: '周一',
child: [
{ name: '邮件营销1', value: 120},
{ name: '邮件营销2', value: 132},
{ name: '邮件营销3', value: 101},
{ name: '邮件营销4', value: 134},
{ name: '邮件营销5', value: 90},
]
},
{
name: '周二',
child: [
{ name: '邮件营销1', value: 220},
{ name: '邮件营销2', value: 182},
{ name: '邮件营销3', value: 191},
{ name: '邮件营销4', value: 234},
{ name: '邮件营销5', value: 290},
]
},
{
name: '周三',
child: [
{ name: '邮件营销1', value: 150},
{ name: '邮件营销2', value: 232},
{ name: '邮件营销3', value: 201},
{ name: '邮件营销4', value: 154},
{ name: '邮件营销5', value: 190},
]
},
{
name: '周四',
child: [
{ name: '邮件营销1', value: 320},
{ name: '邮件营销2', value: 332},
{ name: '邮件营销3', value: 301},
{ name: '邮件营销4', value: 334},
{ name: '邮件营销5', value: 390},
]
},
{
name: '周五',
child: [
{ name: '邮件营销1', value: 820},
{ name: '邮件营销2', value: 932},
{ name: '邮件营销3', value: 901},
{ name: '邮件营销4', value: 934},
{ name: '邮件营销5', value: 1290},
]
},
]}
/>
</div>,
_mount_
);
Props Line Stacked
| 参数 | 说明 | 类型 | 默认值 |
|---|
| 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 | {} |
| legend | 图例组件 | GridComponentOption | {} |
| xAxis | X 轴配置 | xAxisProps | -- |
| yAxis | Y 轴配置 | yAxisProps | -- |
| areaStyle | 区域填充样式 | areaStyleProps | -- |
| isSwitch | 是否自动切换 Tooltip | boolean | false |
| switchTime | 自动切换时间 | number | 2000 |
| data | 数据 | any[] | [] |
| onClick | 点击 | (v: any) => void | -- |
Props data[]
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 |
Props LegendComponentOption
API