0.0.6 • Published 8 months ago

@ray-js/common-charts v0.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

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 实例仅仅是一个反射器,用来触发事件通知使用,在线程通讯中无法获取返回结果。
0.1.0-beta-1

8 months ago

0.0.5-beta-1

12 months ago

0.0.4-beta-1

12 months ago

0.0.5

12 months ago

0.0.4

12 months ago

0.0.6

11 months ago

0.0.3

1 year ago

0.0.3-beta-1

1 year ago

0.0.2

1 year ago

0.0.2-beta-1

1 year ago