react echarts bar stacked

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

安装

npm install --save @ahwecharts/bar-stacked

引入

import BarStackedEcharts from '@ahwecharts/bar-stacked';
or
import { BarStackedEcharts } from 'ahwecharts';

基本用法

import ReactDOM from 'react-dom';
import BarStackedEcharts from '@ahwecharts/bar-stacked';

ReactDOM.render(
  <div>
    <BarStackedEcharts
      itemStyle={{
        barWidth: 20
      }}
      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},
          ]
        }
      ]}
    />
  </div>,
  _mount_
);

Props Bar Stacked

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | 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 | {} | | legend | 图例组件 | LegendComponentOption | {} | | 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 | -- | | child | 值 | any[{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 itemStyleProps

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | isStack | 是否叠加显示 | boolean | false | | barWidth | 柱条的宽度 | number | -- | | borderRadius | 柱条圆角半径 | number[] | -- |

Props GridComponentOption

API

Props LegendComponentOption

API