Skip to content

RChart 可视化图表

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

基础使用

code
tsx
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
tsx
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
tsx
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

名称类型默认值说明
intersectionObserverbooleantrue开启 IntersectionObserver 监听,用于监听图表是否在可视区域内再进行渲染,该方法需要浏览器支持 IntersectionObserver API
intersectionObserverTargetMaybeComputedElementRef<MaybeElement>undefined指定 IntersectionObserver 监听的目标元素。
intersectionOptionsUseIntersectionObserverOptions{ threshold: 0.1 }IntersectionObserver 配置项
borderedbooleantrue是否显示边框
downloadOptionsRChartDownloadOptions{}下载配置项,仅在 preset 为 card 时生效
onDropdownSelect(key: string | number, option: DropdownOption) => voidundefine下拉菜单选择回调函数,仅在 preset 为 card 时生效
dropdownOptionsDropdownProps['options'][]下拉菜单选项,仅在 preset 为 card 时生效
presetRChartPresetTypeundefine是预设样式
contentStyleCardProps['contentStyle']undefined内容区域样式,仅在 preset 为 card 时生效
titlestring | () => VNodeundefined标题,仅在 preset 为 card 时生效
widthstring | number100%图表宽度,如果未捕获到实际宽度,则会默认填充宽度为 200px
heightstring | number100%图表宽度,如果未捕获到实际高度,则会默认填充高度为 200px
autoResizebooleantrue当容器尺寸变化时,自动更新 chart 图表
autoResizeObserverTargetMaybeComputedElementRef<MaybeElement>undefined指定 ResizeObserver 监听的目标元素
showAriabooleanfalse无障碍模式,启用贴画
optionsecharts.EChartsCoreOption{}chart 图表配置项
onSuccess(chartInst: Echarts) => voidundefine图表渲染成功回调函数
onError(error: Error) => voidundefine图表渲染失败回调函数
onFinally() => voidundefine图表渲染结束后执行的回调函数
themeChartThemeundefined手动指定 chart 图表主题,如果指定了未注册的主题,则会使用默认主题
autoChangeThemebooleantrue自动切换主题,当主题变化时,自动重新渲染图表
useEChartsExtensionInstallRegisters[][]自定义注册 ECharts 扩展插件,用于注册 ECharts 扩展插件
watchOptionsbooleantrue主动监听 options 内容变化,当内容变化时重新渲染图表
loadingbooleanfalse显示加载状态
loadingOptionsLoadingOptions{}加载配置项
watchOptionsThrottleWaitnumber500监听 options 内容变化的节流时间间隔,单位为毫秒
nextTickbooleantrue将渲染放置下一个队列中
setChartOptionsSetOptionOpts{}设置图表配置项,用于动态更新图表配置项
onRegister(chartInst: ECharts, render: VoidFC, dispose: VoidFC) => voidundefined注册图表实例回调函数,如果需要使用 useChart hook 方法,就必须手动注册该方法

Released under the MIT License.