ios开发,使用webView封装的echarts组件无法设置柱子的不同颜色

想起来之前实习的时候碰到这个问题:ios开发中使用到echarts的柱状图,任务就是要图的每条柱子颜色要根据数值的大小不同而展现不同的颜色。比如下面的效果:

ios开发,使用webView封装的echarts组件无法设置柱子的不同颜色

原来想的是像开发web项目的时候那样,用function返回option->series->itemStyle->color的值,但是发现代码根本执行不到function()里面,各种查找原因,后来在这篇文章中找到了答案。这篇文章中还涉及了其他的参考文档和大佬的项目源码,可以仔细看看。

在我们这个ios项目中,
,它使用的echarts并不是直接install react-native-charts之后直接import然后引用,而是使用一个webView把外部的echarts的js文件导入进来,自己定义一个echarts组件,至于怎么封装echarts我就不说了,因为也不是我封装的哈哈哈…….

其实根本原因就是JSON.parse与JSON.stringify的方法问题。如果json数据中含function,则转换后,function会丢失。那为了不让function被忽略,在用JSON.parse与JSON.stringify方法时遇到function就得特殊处理一下。

修改了的js代码如下:
ios开发,使用webView封装的echarts组件无法设置柱子的不同颜色

其他还有一些需要修改的地方不多,可以参考上面那个参考文章中的分享或者直接看大佬的项目源码。

有啥问题可以留言一起讨论哈~