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'
}
}],
};
- 发布:2020-06-20 10:36
- 更新:2020-11-11 16:01
- 阅读:3854
产品分类: 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