supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 32 forks source link

传函数会导致图表ToolTip异常 #110

Closed Eric-Leng closed 1 year ago

Eric-Leng commented 1 year ago

版本 : 1.9.1

开启了 enableParseStringFunction 参数

在Rn上 会导致ToolTip 卡住

在echats 上表现正常

Eric-Leng commented 1 year ago

option = {"grid":{"left":16,"right":16,"top":16,"bottom":30},"xAxis":{"type":"category","data":["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"],"splitLine":{"show":false,"lineStyle":{"type":"dashed","color":"#292C32"}},"boundaryGap":false,"axisLabel":{"showMinLabel":true,"showMaxLabel":true},"axisLine":{"show":false},"axisTick":{"show":false}},"tooltip":{"trigger":"axis","color":"#fff","borderWidth":"0","extraCssText":"background:#475569;","textStyle":{"color":"#fff"},"valueFormatter":"(value) => return Math.abs(value)"},"yAxis":[{"show":false,"type":"value","name":"小时充电量","alignTicks":true},{"show":false,"type":"value","name":"累计充电量","alignTicks":true},{"show":false,"type":"value","name":"小时放电量","alignTicks":true},{"show":false,"type":"value","name":"累计放电量","alignTicks":true}],"series":[{"name":"小时充电量","stack":"Total","data":[{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"5","itemStyle":{"color":"#43D1A7"}},{"value":"6","itemStyle":{"color":"#43D1A7"}},{"value":"3","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"15","itemStyle":{"color":"#43D1A7"}},{"value":"7","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}},{"value":"6","itemStyle":{"color":"#43D1A7"}},{"value":"0","itemStyle":{"color":"#43D1A7"}}],"type":"bar","barWidth":6,"itemStyle":{"emphasis":{"barBorderRadius":5},"normal":{"color":"#D9D9D9","barBorderRadius":[5,5,0,0]}}},{"name":"累计充电量","data":["0","5","11","14","14","14","14","14","14","14","14","14","29","36","36","36","36","36","36","36","36","36","36","42","42"],"type":"line","showSymbol":false,"smooth":true,"itemStyle":{"normal":{"color":"#43D1A7","lineStyle":{"color":"#43D1A7","width":1}}},"yAxisIndex":1},{"name":"小时放电量","stack":"Total","data":[{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":-7,"itemStyle":{"color":"#FF862E"}},{"value":-12,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}},{"value":-12,"itemStyle":{"color":"#FF862E"}},{"value":-11,"itemStyle":{"color":"#FF862E"}},{"value":-1,"itemStyle":{"color":"#FF862E"}},{"value":0,"itemStyle":{"color":"#FF862E"}}],"type":"bar","barWidth":6,"itemStyle":{"emphasis":{"barBorderRadius":5},"normal":{"color":"#D9D9D9","barBorderRadius":[0,0,5,5]}}},{"name":"累计放电量","data":[0,0,0,0,0,0,0,0,0,0,-7,-19,-19,-19,-19,-19,-19,-19,-19,-19,-19,-31,-42,-43,-43],"type":"line","showSymbol":false,"smooth":true,"itemStyle":{"normal":{"color":"#FF862E","lineStyle":{"color":"#FF862E","width":1}}},"yAxisIndex":1}]}

congshengwu commented 1 year ago

你好,valueFormatter那块改成这样试试呢?函数体用大括号包裹上

xxx

"valueFormatter":"(value) => { return Math.abs(value) }"

xxx

我本地也运行了一下:

congshengwu commented 1 year ago

箭头函数的话,这个语法是错误的:(value) => return Math.abs(value)

正确写法:(value) => Math.abs(value)(value) => { return Math.abs(value) }

因为enableParseStringFunction是判断大括号的位置来解析字符串函数体代码的开始和结束,所以函数体必须加上大括号。

const option = {
  xxx

  valueFormatter: "(value) => { return Math.abs(value) }"

  xxx
}
Eric-Leng commented 1 year ago

是的 按照您说的方法 我正常运行了 谢谢您