c***@qq.com
c***@qq.com
  • 发布:2020-06-20 10:36
  • 更新:2020-11-11 16:01
  • 阅读:3864

【报Bug】使用renderjs引入echarts后,在formatter中使用function的方式无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 8.0

手机厂商: 华为

手机机型: Mate 9

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
        var data = [{  
                name: "3次谐波",  
                value: Math.floor(Math.random() * 30),  
                itemStyle: {  
                    color: '#047FFF'  
                }  
            },  
            {  
                name: "5次谐波",  
                value: Math.floor(Math.random() * 30),  
                itemStyle: {  
                    color: '#019BFD'  
                }  
            },  
            {  
                name: "7次谐波",  
                value: Math.floor(Math.random() * 30),  
                itemStyle: {  
                    color: '#FCE000'  
                }  
            },  
            {  
                name: "9次谐波",  
                value: Math.floor(Math.random() * 30),  
                itemStyle: {  
                    color: '#FFAB01'  
                }  
            }  
        ]  
        var copyKeyValueMap = new Map();  
        var total = 0;  
        for (var i = 0; i < data.length; i++) {  
            total += data[i]['value']  
            copyKeyValueMap.set(data[i].name,data[i].value)  
        }  
        let option = {  
            tooltip: {  
                show: false  
            },  
            legend: {  
                show: true,  
                orient: 'vertical',  
                right: '5%',  
                top: '20%',  
                icon: 'circle',  
                itemGap: uni.upx2px(30),  
                formatter: (name)=>{  
                    let ratio = (copyKeyValueMap.get(name)/total * 100).toFixed(2)  
                    return '{a|'+name+'}       {b|'+ ratio +'%}'  
                },  
                textStyle:{  
                    rich:{  
                        a:{  
                            color:'#858585',  
                            fontSize: uni.upx2px(28)  

                        },  
                        b:{  
                            color: '#333333',  
                            fontSize: uni.upx2px(28)  
                        }  
                    }  
                }  
            },  
            series: [{  
                type: 'pie',  
                hoverAnimation: false,  
                radius: ['50%', '70%'],  
                center: ['25%','50%'],  
                avoidLabelOverlap: false,  
                label: {  
                    show: false,  
                    position: 'center'  
                },  
                labelLine: {  
                    show: false  
                },  
                data: data  
            }],  
            graphic: [{ //环形图中间添加文字  
                type: 'text', //通过不同top值可以设置上下显示  
                left: '19%',  
                top: '38%',  
                style: {  
                    text: total + '次\n',  
                    textAlign: 'center',  
                    fill: '#666666', //文字的颜色  
                    fontSize: 20,  
                    fontFamily: "Microsoft YaHei"  
                }  
            }, {  
                type: 'text', //通过不同top值可以设置上下显示  
                left: '19%',  
                top: '55%',  
                style: {  
                    text: '奇次谐波',  
                    fill: '#666666'  
                }  
            }],  

        };

操作步骤:

正常开发测试

预期结果:

h5端和app端都显示一致

实际结果:

echarts的formatter里面h5端的function函数正常,app端的function函数失效

bug描述:

使用renderjs引入echarts后,在formatter节点中使用function的方式格式化数据,h5端正常,但是app端失效。echarts版本为最新的4.8.0

2020-06-20 10:36 负责人:无 分享
已邀请:
giao233

giao233

一样h5 正常

敲个锤子

敲个锤子

我也碰到了这个问题,有解决不?

  • 东东东东

    renderjs中,setoption的时候,你打印option,你会发现,formatter并没有值,你在setoption之前,给option加上formatter就可以了

    2020-11-09 14:57

  • 违规昵称4396

    https://blog.csdn.net/weixin_41612150/article/details/109624440

    2020-11-11 16:02

nineone

nineone

同样 遇到这个问题

  • 敲个锤子

    试试模板字符串。

    2020-08-18 11:24

  • 违规昵称4396

    https://blog.csdn.net/weixin_41612150/article/details/109624440

    2020-11-11 16:02

敲个锤子

敲个锤子

模板字符可以生效,但是还没有深入测试,可以研究一下。

  • 1***@163.com

    可以说一下怎么用吗?

    2020-11-06 14:43

  • 东东东东

    回复 1***@163.com: renderjs中,setoption的时候,你打印option,你会发现,formatter并没有值,你在setoption之前,给option加上formatter就可以了

    2020-11-09 14:55

8***@qq.com

8***@qq.com

我也是这个问题 每天都会发现不一样的bug 惊了 bug太多了

晖丶太郎

晖丶太郎

还没开始用就发现这个问题了,求解决

东东东东

东东东东 - 东东东东

一样遇到这个问题了,不只是formatte在app中失效了,是echarts中关于属性设置的函授,都没有执行

s***@live.com

s***@live.com

一样的问题 字符串模板也不生效 头大

  • 东东东东

    renderjs中,setoption的时候,你打印option,你会发现,formatter并没有值,你在setoption之前,给option加上formatter就可以了

    2020-11-09 14:55

4***@qq.com

4***@qq.com

formatter为function时有其他方式可以解决,完美解决

东东东东

东东东东 - 东东东东

renderjs中,setoption的时候,你打印option,你会发现,formatter并没有值,你在setoption之前,给option加上formatter就可以了。是楼上的老哥说的,确实有用,感谢老哥了

违规昵称4396

违规昵称4396

完美解决:
https://blog.csdn.net/weixin_41612150/article/details/109624440

该问题目前已经被锁定, 无法添加新回复