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] | -- |