RChart 可视化图表

RChart 基于 ECharts 封装，提供了一系列的可视化图表组件。让你便捷的使用 ECharts 绘制图表。

基础使用

code

import { RChart } from '@/components'

const Demo = () => {
  const options = {
    legend: {},
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '日期',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
      {
        name: '数量',
        data: [12, 220, 250, 180, 20, 10, 190],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }

  return <RChart options={options} />
}

回调函数

code

import { RChart } from '@/components'

const Demo = () => {
  const _success = () => {}

  const _error = () => {}

  const _finally = () => {}

  return (
    <>
      <RChart onSuccess={_success} onFinally={_finally} />
      <RChart onError={_error} onFinally={_finally} />
    </>
  )
}

useChart

useChart 是一个自定义 hook，用于获取图表实例，可以通过该实例进行一些操作。

code

import { RChart } from '@/components'

import { useChart } from '@/components'

const Demo = () => {
  const [register, { getChartInstance, isDispose, dispose, render }] =
    useChart()

  const options = {
    legend: {},
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '日期',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
      {
        name: '数量',
        data: [12, 220, 250, 180, 20, 10, 190],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }
}

return <RChart options={options} onRegister={register} />

props

名称	类型	默认值	说明
intersectionObserver	boolean	true	开启 IntersectionObserver 监听，用于监听图表是否在可视区域内再进行渲染，该方法需要浏览器支持 IntersectionObserver API
intersectionObserverTarget	MaybeComputedElementRef<MaybeElement>	undefined	指定 IntersectionObserver 监听的目标元素。
intersectionOptions	UseIntersectionObserverOptions	{ threshold: 0.1 }	IntersectionObserver 配置项
bordered	boolean	true	是否显示边框
downloadOptions	RChartDownloadOptions	{}	下载配置项，仅在 preset 为 card 时生效
onDropdownSelect	(key: string | number, option: DropdownOption) => void	undefine	下拉菜单选择回调函数，仅在 preset 为 card 时生效
dropdownOptions	DropdownProps['options']	[]	下拉菜单选项，仅在 preset 为 card 时生效
preset	RChartPresetType	undefine	是预设样式
contentStyle	CardProps['contentStyle']	undefined	内容区域样式，仅在 preset 为 card 时生效
title	string | () => VNode	undefined	标题，仅在 preset 为 card 时生效
width	string | number	100%	图表宽度，如果未捕获到实际宽度，则会默认填充宽度为 200px
height	string | number	100%	图表宽度，如果未捕获到实际高度，则会默认填充高度为 200px
autoResize	boolean	true	当容器尺寸变化时，自动更新 chart 图表
autoResizeObserverTarget	MaybeComputedElementRef<MaybeElement>	undefined	指定 ResizeObserver 监听的目标元素
showAria	boolean	false	无障碍模式，启用贴画
options	echarts.EChartsCoreOption	{}	chart 图表配置项
onSuccess	(chartInst: Echarts) => void	undefine	图表渲染成功回调函数
onError	(error: Error) => void	undefine	图表渲染失败回调函数
onFinally	() => void	undefine	图表渲染结束后执行的回调函数
theme	ChartTheme	undefined	手动指定 chart 图表主题，如果指定了未注册的主题，则会使用默认主题
autoChangeTheme	boolean	true	自动切换主题，当主题变化时，自动重新渲染图表
use	EChartsExtensionInstallRegisters[]	[]	自定义注册 ECharts 扩展插件，用于注册 ECharts 扩展插件
watchOptions	boolean	true	主动监听 options 内容变化，当内容变化时重新渲染图表
loading	boolean	false	显示加载状态
loadingOptions	LoadingOptions	{}	加载配置项
watchOptionsThrottleWait	number	500	监听 options 内容变化的节流时间间隔，单位为毫秒
nextTick	boolean	true	将渲染放置下一个队列中
setChartOptions	SetOptionOpts	{}	设置图表配置项，用于动态更新图表配置项
onRegister	(chartInst: ECharts, render: VoidFC, dispose: VoidFC) => void	undefined	注册图表实例回调函数，如果需要使用 useChart hook 方法，就必须手动注册该方法