@ahwecharts/line-stacked

echarts line stacked component

Usage no npm install needed!

<script type="module">
  import ahwechartsLineStacked from 'https://cdn.skypack.dev/@ahwecharts/line-stacked';
</script>

README

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

参数 说明 类型 默认值
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 areaStyleProps

参数 说明 类型 默认值
show 是否显示填充样式 boolean false
isGrad 是否渐变 string #333

Props LegendComponentOption

API