Page 1 of 2
@ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 28日 17:03
by silverlight
目前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'];
}
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 28日 17:15
by silverlight
Code: Select all
axisLabel: {
rotate: 45,
formatter: function(value, index) => {
if (displayedLabels.includes(index)) {
return value;
}
return '';
}
我希望通过自定义规则，显示对应的标签。
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 28日 20:46
by muhai
formatter目前不支持函数
提示：
Function is not supported in this option. try to use string template formatter
<br><br> 由于配置了在 js->rjs 传输中仅支持数据传输，故此默认阻止了函数的传输，如需定制 formatter 请使用字符串模板
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 28日 20:46
by muhai
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 29日 09:45
by silverlight
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 请使用字符串模板
字符串模板不能满足我的需求，非常希望能加上这个属性
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 30日 16:35
by 18559697016
请你们支持 valueFormatter
目前的字符串模板，也不太好用，
在series层级 加文本形式的formatter， common-charts目前不支持。
但是，ECharts 是支持的，请看下图
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Aug 30日 18:25
by 18559697016
Code: Select all
tooltip: {
//提示框，鼠标悬浮交互时的信息提示
trigger: 'axis', //值为axis显示该列下所有坐标轴对应数据，值为item时只显示该点数据，
formatter: '{b}<br />{a0}:${c0}<br />{a1}:${c1} '
},
外层设置tooltip，在ECharts可以正常换行，如下图
同样的代码，在common-charts，不能换行
Code: Select all
tooltip: {//提示框，鼠标悬浮交互时的信息提示
trigger: 'axis',//值为axis显示该列下所有坐标轴对应数据，值为item时只显示该点数据
formatter:'{b}<br/>{a0}:{c0}kW·h<br/>{a1}:{c1}kW·h'
},
如下图
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Sep 2日 11:07
by 18559697016
这个功能 是强烈需求，请你们支持！
common-charts，用的ECharts，版本是多少的，以便针对性去调试代码
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Sep 6日 09:52
by 18559697016
字符串模板不够用，非常希望能加上这个属性。即将要发布的Ray小程序，卡在这里了，请你们支持！！！感谢！
Re: @ray-js/common-charts 需要增加属性formatter
Posted: 2024年 Sep 24日 09:22
by silverlight
muhai 2024年 Aug 28日 20:46
如果强烈需求的话，我们这边评估一下
你好，这个组件后续还会更新这个属性吗？