@ray-js/common-charts 需要增加属性formatter

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


silverlight
Posts: 114

目前option的axisLabel没有封装formatter,无法对x轴刻度标签的内容格式进行修改。而echarts中是可以支持修改的

Code: Select all

interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> {
    show?: boolean;
    inside?: boolean;
    rotate?: number;
    showMinLabel?: boolean;
    showMaxLabel?: boolean;
    alignMinLabel?: TextAlign;
    alignMaxLabel?: TextAlign;
    verticalAlignMinLabel?: TextVerticalAlign;
    verticalAlignMaxLabel?: TextVerticalAlign;
    margin?: number;
    rich?: Dictionary<TextCommonOption>;
    /**
     * If hide overlapping labels.
     */
    hideOverlap?: boolean;
    customValues?: (number | string | Date)[];
    color?: ColorString | ((value?: string | number, index?: number) => ColorString);
    overflow?: TextStyleProps['overflow'];
}
Last edited by silverlight on 2024年 Aug 28日 17:15, edited 1 time in total.

Tags:
silverlight
Posts: 114

Re: @ray-js/common-charts 需要增加属性formatter

Code: Select all

                        axisLabel: {
                        rotate: 45,
                        formatter: function(value, index) => {
                            if (displayedLabels.includes(index)) {
                                return value; 
                            }
                            return ''; 
                        }

我希望通过自定义规则,显示对应的标签。

muhai
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

formatter目前不支持函数

提示:
Function is not supported in this option. try to use string template formatter
<br><br> 由于配置了在 js->rjs 传输中仅支持数据传输,故此默认阻止了函数的传输,如需定制 formatter 请使用字符串模板

muhai
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

如果强烈需求的话,我们这边评估一下

silverlight
Posts: 114

Re: @ray-js/common-charts 需要增加属性formatter

muhai 2024年 Aug 28日 20:46

formatter目前不支持函数

提示:
Function is not supported in this option. try to use string template formatter
<br><br> 由于配置了在 js->rjs 传输中仅支持数据传输,故此默认阻止了函数的传输,如需定制 formatter 请使用字符串模板

字符串模板不能满足我的需求,非常希望能加上这个属性

18559697016
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

请你们支持 valueFormatter

目前的字符串模板,也不太好用,
在series层级 加文本形式的formatter, common-charts目前不支持
但是,ECharts 是支持的,请看下图

33333.png
18559697016
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

Code: Select all

  tooltip: {
    //提示框,鼠标悬浮交互时的信息提示
    trigger: 'axis', //值为axis显示该列下所有坐标轴对应数据,值为item时只显示该点数据,
    formatter: '{b}<br />{a0}:${c0}<br />{a1}:${c1}  '
  },

外层设置tooltip,在ECharts可以正常换行,如下图

1111.png

同样的代码,在common-charts,不能换行

Code: Select all

     tooltip: {//提示框,鼠标悬浮交互时的信息提示
          trigger: 'axis',//值为axis显示该列下所有坐标轴对应数据,值为item时只显示该点数据
          formatter:'{b}<br/>{a0}:{c0}kW·h<br/>{a1}:{c1}kW·h'
      },

如下图

1731725013355_.pic.jpg
18559697016
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

这个功能 是强烈需求,请你们支持!
common-charts,用的ECharts,版本是多少的,以便针对性去调试代码

18559697016
Posts: 84

Re: @ray-js/common-charts 需要增加属性formatter

字符串模板不够用,非常希望能加上这个属性。即将要发布的Ray小程序,卡在这里了,请你们支持!!!感谢!

silverlight
Posts: 114

Re: @ray-js/common-charts 需要增加属性formatter

muhai 2024年 Aug 28日 20:46

如果强烈需求的话,我们这边评估一下

你好,这个组件后续还会更新这个属性吗?

Post Reply