@ray-js/common-charts

English | 简体中文

通用统计图表

. 内置了官方风格的图表样式，开发者也可以自行覆盖默认样式。 . 使用此插件，如果你了解 echarts 的配置项，基本上没有什么学习曲线。

安装

npm install @ray-js/common-charts

使用示例

展示图表

import CommonCharts from '@ray-js/common-charts';

<CommonCharts
  unit="℃" // 数据单位
  option={{
    backgroundColor: '#fff',
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {},
    series: [
      {
        name: '测试样例',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line', // 这里同时支持 bar line pie 等
      },
    ],
  }} // Echarts 配置项
/>;

全屏开关能力

未实现阻止默认底层滑动, 可以考虑业务侧 通过 ty.onWindowResize 监听屏幕方向进行页面适配

<Charts
  ...
  supportFullScreen={true} // 是否支持全屏展示
/>

主题支持

提供了两套主题 dark 和 light

<Charts
  ...
  theme="dark" // 支持 dark light
/>

Loading 支持

在图表加载时，可以自定义 loading 文案

<Charts
  ...
  loadingText="Loading..."
/>

事件监听支持

<Charts
  ...
  on={{
    click(e) {
      console.log("e", e);
    }
  }}
/>

实例调用方法

<Charts
  getEchartsProxy={echarts => {
    echarts.showLoading();
  }}
/>

FAQ

1. 提示： Function is not supported in this option. try to use string template formatter 由于配置了在 js->rjs 传输中仅支持数据传输，故此默认阻止了函数的传输，如需定制 formatter 请使用字符串模板
2. 监听 charts 事件的回调参数中有些数据是 null？ 由于在 echarts 的回调中部分数据存在循环引用或者使用了 getter 函数，无法使用数据序列化传输，所以在传输序列化数据前，对数据进行了一波处理
3. 为什么在 getEchartsProxy 拿到的 echarts 实例，很多方法没有返回值？ 因为 echarts 实例保存在 rjs 中，实际上开发者拿到的 echarts 实例仅仅是一个反射器，用来触发事件通知使用，在线程通讯中无法获取返回结果。