# Chart 图表

# install

tnpm i -S @sula/charts

# usage

import Chart from "@sula/charts";

# 配置

Sula-Charts 是基于 ECharts 的 React 组件化写法，各项配置同 ECharts. 参考ECharts 文档.

# 实例方法

# ref

类型: Ref
默认值: -

绑定 chart 实例，使 render 的配置方法中可以拿到 chart 的实例

# clear

类型: () => void
默认值: -

清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。

# dispose

类型: () => void
默认值: -

销毁实例，实例销毁后无法再被使用。

# getHeight

类型:() => number
默认值: -

获取 Sula-Charts 实例容器的高度。

# getOption

类型:() => object

获取当前实例中维护的 option 对象，返回的 option 对象中包含了用户多次 setOption 合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。详细参考getOption.

# getWidth

类型:() => number

获取 Sula-Charts 实例容器的宽度

# hideLoading

类型:() => void

隐藏动画加载效果

# isDisposed

类型:() => boolean

当前实例是否已经被释放。

# off

类型:(eventName: string, handler?: Function) => void

解绑事件处理函数。详细参考off.

# on

类型:Function

绑定事件函数。详细参考on.

# resize

类型:(options) => SulaCharts

改变图表尺寸，在容器大小发生改变时需要手动调用。详细参考resize.

# setOption

类型:() => void

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。详细参考setOption.

# showLoading

类型:(type?, options?) => void

显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。详细参考showLoading.

直接使用示例：

import { Chart } from '@sula/plugin-render';

 const chartRef = React.useRef(null)
 const options = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
  }

  <Chart {...option} ref={chartRef} style={{ height: 360 }} />

← FormAction 表单行为