sm-echarts

`最新更新`

v1.0.7
1. 增加通过接口获取数据的props，不再需要外部管理数据状态
v1.0.6
1. 组件dom根节点支持绑定鼠标相关事件，props传入
2. 增加初始化、销毁、设置option前、设置option后的钩子

`特点`

使用 TypeScript 封装，编辑器智能提醒，再也不用刷 echarts 文档了
开发使用 React 0.14 构建 class 组件，可保证各种 React 版本的兼容
外置 echarts 支持 echarts 4.x/5.x 的各种版本，可以保障浏览器的兼容性
将 option 中常用属性提到 props 中，不需要一层一层的嵌套配置，使用更加简单，同时内置智能合并逻辑，可以将 option 中的配置和 props 的配置进行合并，props 中的优先级更高
内置 resize 监听逻辑，自动重绘

`SmECharts Props`

Prop name	Type	Default	Description
className	string		外置样式类名
style	React.CSSProperties		外置内联样式
notMerge	boolean	false	chart.setOption(option, notMerge, lazyUpdate); 设置属性时是否不跟之前设置的 option 进行合并
lazyUpdate	boolean	false	chart.setOption(option, notMerge, lazyUpdate); 设置属性时是否不立即更新图表
option	Omit<EChartsOption, 'legend'｜'grid'｜'xAxis'｜'yAxis'｜'geo'｜'series'｜'tooltip'>		echarts 建议除了 'legend'｜'grid'｜'xAxis'｜'yAxis'｜'geo'｜'series'｜'tooltip' 以外其他的配置项
legend	LegendComponentOption｜LegendComponentOption[]		echarts legend 配置项
grid	GridOption｜GridOption[]		echarts grid 配置项
xAxis	XAXisOption｜XAXisOption[]		echarts xAxis 配置项
yAxis	YAXisOption｜YAXisOption[]		echarts yAxis 配置项
geo	GeoOption｜GeoOption[]		echarts geo 配置项
series	SeriesOption｜SeriesOption[]		echarts series 配置项
tooltip	TooltipOption｜TooltipOption[]		echarts tooltip 配置项
type	SeriesOption['type']｜SeriesOption['type'][]	line	series 中的 type 属性
data	SeriesOption['data']｜SeriesOption['data'][]		series 中的 data 属性
category	XAXisOption['data']		xAxis 中的 data 属性，当 rotateAxis 为 true 时，则会设置到 yAxis 中
multi	boolean	false	同一类型多组数据渲染，data 接收二维数组合并后有多组 series
rotateAxis	boolean	false	旋转坐标轴，默认 xAxis 及 yAxis 的属性互换
debug	boolean	false	控制台输出合并后的 option 方便调试
onEvents	Record<string, EventHandler｜EventHandler[]>		`1.0.4 新增`，提供 ehcarts 实例绑定事件方式，内部会在更新/卸载时自动解绑
onInit	(ins: SmECharts) => void		`1.0.6 新增`，完成初始化 echarts 钩子
onDestroy	(ins: SmECharts) => void		`1.0.6 新增`，销毁 echarts 钩子
beforeSetOption	(ins: SmECharts) => void		`1.0.6 新增`，每次 echarts.setOption 前钩子
afterSetOption	(ins: SmECharts) => void		`1.0.6 新增`，每次 echarts.setOption 后钩子
fetchData	() => (any[]｜Promise<any[]>)		`1.0.7 新增`，使用函数获取数据

基本使用

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'pie'} data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'gauge'} data={[7, 9, 5, 3, 10]} />
  </div>
</div>

获取数据 - fetchData

import { useCallback } from 'react';
import SmECharts from 'sm-echarts';

// 异步获取数据
const fetchData = useCallback(() => new Promise(resolve => setTimeout(() => {
  resolve([7, 9, 5, 3, 10]);
}, 300)), []);

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    {/* 异步获取数据 */}
    <SmECharts chartType={'line'} category={[1, 2, 3, 4, 5]} fetchData={fetchData} />
  </div>
  <div className='chart-wrapper'>
    {/* 同步获取数据 */}
    <SmECharts chartType={'bar'} category={[1, 2, 3, 4, 5]} fetchData={() => [7, 9, 5, 3, 10]} />
  </div>
</div>

多组数据 - multi

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi />
  </div>
</div>

旋转坐标轴 - rotateAxis

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts type={'line'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi rotateAxis />
  </div>
  <div className='chart-wrapper'>
    <SmECharts type={'bar'} category={[1, 2, 3, 4, 5]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} multi rotateAxis />
  </div>
</div>

自由组合

import SmECharts, { ColorUtil } from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']} category={[1, 2, 3, 4, 5]}
      series={[{
        smooth: true,
        areaStyle: { color: ColorUtil.generateLinearColor(['#f5bd27', 'green']) }
      }, {
        itemStyle: { color: '#f5bd27' }
      }
      ]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']} category={[1, 2, 3, 4, 5]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} rotateAxis />
  </div>
  <div className='chart-wrapper' style={{ width: '100%' }}>
    <SmECharts type={['pie', 'pie']} series={[{ center: ['30%', '50%'] }, { center: ['70%', '50%'] }]} data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
</div>

数据动态更新 - 尝试鼠标移入/移出图表

import { useState } from 'react';
import SmECharts from 'sm-echarts';

const [data, setData] = useState([7, 9, 5, 3, 10]);

<div
  className='chart-wrapper'
  onMouseEnter={() => setData([3, 5, 7, 6, 3])}
  onMouseLeave={() => setData([7, 9, 5, 3, 10])}
>
  <SmECharts
    type={'line'} category={[1, 2, 3, 4, 5]} data={data}
    onEvents={{
      click: () => {
        alert('点击了折线图')
      }
    }}
  />
</div>

echarts 事件绑定

关于事件类型及绑定事件方式，请参照 echarts官方文档，事件绑定也可以利用 ref 获取组件内 echarts 实例属性 echartsInstance

import SmECharts from 'sm-echarts';

<div className={'chart-container'}>
  <div className='chart-wrapper'>
    <SmECharts
      type={'line'}
      // ref={chart => console.log(chart.echartsInstance)}
      option={{
        title: {
          show: true,
          text: '点击折线图',
          left: 'center',
        }
      }}
      onEvents={{
        click: () => {
          alert('点击了折线图')
        }
      }}
      category={[1, 2, 3, 4, 5]}
      data={[7, 9, 5, 3, 10]} />
  </div>
  <div className='chart-wrapper'>
    <SmECharts
      type={['line', 'bar']}
      option={{
        title: {
          show: true,
          text: '分别点击折线图/柱状图',
          left: 'center',
        }
      }}
      onEvents={{
        click: [
          ['series.bar', () => {
            alert('点击了柱状图')
          }],
          ['series.line', () => {
            alert('点击了折线图')
          }]
        ]
      }}
      category={[1, 2, 3, 4, 5]}
      data={[[7, 9, 5, 3, 10], [3, 5, 7, 6, 3]]} />
  </div>
</div>

修改全局配置

import SmECharts from 'sm-echarts';

// 全局公共配置
SmECharts.defaultOption = {
  color: [
    '#5899f5', '#46dbc2', '#20b8e6',
    '#f5bd27', '#5ac846', '#f57d71',
    '#776edb', '#f59e6e', '#5980b3',
    '#ca91f2',
  ]
};

// 全局公共坐标系
SmECharts.defaultAxis = {
  // 坐标系
  grid: {
    show: true,
    borderColor: 'transparent',
    borderWidth: 0,
  },
  // x轴
  xAxis: {
    show: true,
    type: 'category',
  },
  // y轴
  yAxis: {
    show: true,
    type: 'value',
  },
};

更新日志

1.0.6
1. 组件dom根节点支持绑定鼠标相关事件，props传入
2. 增加初始化、销毁、设置option前、设置option后的钩子
1.0.5
1. 增加 echarts 事件绑定机制
1.0.0
1. 完成React Ts版封装

sm-echarts

`最新更新`

`特点`

`SmECharts Props`

基本使用

获取数据 - fetchData

多组数据 - multi

旋转坐标轴 - rotateAxis

自由组合

数据动态更新 - 尝试鼠标移入/移出图表

echarts 事件绑定

修改全局配置

更新日志

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

sm-echarts

最新更新

特点

SmECharts Props

基本使用

获取数据 - fetchData

多组数据 - multi

旋转坐标轴 - rotateAxis

自由组合

数据动态更新 - 尝试鼠标移入/移出图表

echarts 事件绑定

修改全局配置

更新日志

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`最新更新`

`特点`

`SmECharts Props`

Weekly Downloads