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'
}
}],
};
c***@qq.com
- 发布：2020-06-20 10:36
- 更新：2020-11-11 16:01
- 阅读：3816
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.9
手机系统： Android
手机系统版本号： Android 8.0
手机厂商： 华为
手机机型： Mate 9
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
正常开发测试
正常开发测试
预期结果：
h5端和app端都显示一致
h5端和app端都显示一致
实际结果：
echarts的formatter里面h5端的function函数正常，app端的function函数失效
echarts的formatter里面h5端的function函数正常，app端的function函数失效
bug描述：
使用renderjs引入echarts后，在formatter节点中使用function的方式格式化数据，h5端正常，但是app端失效。echarts版本为最新的4.8.0
11 个回复
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
同样 遇到这个问题
敲个锤子
试试模板字符串。
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
我也是这个问题 每天都会发现不一样的bug 惊了 bug太多了
晖丶太郎
还没开始用就发现这个问题了，求解决
东东东东 - 东东东东
一样遇到这个问题了，不只是formatte在app中失效了，是echarts中关于属性设置的函授，都没有执行
s***@live.com
一样的问题 字符串模板也不生效 头大
东东东东
renderjs中，setoption的时候，你打印option，你会发现，formatter并没有值，你在setoption之前，给option加上formatter就可以了
2020-11-09 14:55
4***@qq.com
formatter为function时有其他方式可以解决，完美解决
东东东东
请问怎么处理的呢，老哥
2020-11-06 16:56
4***@qq.com
回复 东东东东: 留个联系方式私聊你
2020-11-06 17:01
4***@qq.com
回复 东东东东: 在render.js的内容中，也就是setOption之前，写formatter为函数时的内容即可
2020-11-06 17:03
东东东东
回复 4***@qq.com: 麻烦老哥说明白点呢，不太理解的。你的qq我加不了。麻烦老哥了
2020-11-06 17:28
4***@qq.com
回复 东东东东: 再加一下，应该可以了
2020-11-06 17:52
东东东东 - 东东东东
renderjs中，setoption的时候，你打印option，你会发现，formatter并没有值，你在setoption之前，给option加上formatter就可以了。是楼上的老哥说的，确实有用，感谢老哥了
违规昵称4396
完美解决：
https://blog.csdn.net/weixin_41612150/article/details/109624440