"@antv/my-f2": "^2.1.7",
luoxin59420 opened this issue · comments
luoxin commented
"@antv/my-f2": "^2.1.7" 版本 ,在钉钉小程序里饼图是否有点击事件,如果有怎么设置呢?
我的方法:
async onInitChart (F2, config) {
// 设置图表内边距
config.padding = [50,50,50,50]
if (this.data.chartsData.every(c => c.precent == 0)) {
dd.showToast({
type: 'success',
content: '暂无任务',
duration: 1500
})
return
}
// 创建图表
const chart = new F2.Chart(config)
// 数据绑定
chart.source(this.data.chartsData)
chart.coord({
// type的属性:饼图:polar,柱形:rect
// type: 'rect',
type: 'polar',
// transposed:转置,可设为true或false
transposed: true,
innerRadius: 0.6,
});
// 配置图形形状interval:柱形或弧形,一般构成柱状图、饼图等图表
// position:配置坐标轴
// color配置颜色,也可使用如color('字段名',['颜色','颜色',...])的方式自己定义
chart.interval()
.position('a*precent')
// .color('name', ['#ff8c00', '#fed8b1', '#10D295', '#A007E7', '#EE0D0D'])
// .color('name', ['#EE0D0D', '#ff8c00', '#fed8b1', '#A007E7', '#10D295'])
.color('name', ['#89BD56', '#9F07E6', '#F8C568', '#F18D07', '#ED0D0D'])
.adjust('stack')
.animate({
appear: {
duration: 300,
easing: 'cubicIn'
}
})
// axis配置坐标轴,这里false表示不渲染
chart.axis(false)
// 对饼图的标签进行设置,sidePadding表示文本距离画布左右两边的距离
// label1和label2分别对应图中的上下文字,可在return中进行样式的设置
chart.pieLabel({
sidePadding:30,
lineHeight: 50,
anchorOffset: 5,
inflectionOffset: 5,
adjustOffset: 15,
label1:(data, color) => {
return {
text: data.name,
fill: color,
fontSize: 14,
}
},
label2:(data, color) => {
return {
fill: color,
text: `${data.precent} (个)`,
fontWeight: 500,
fontSize: 14,
// offsetY: 80
}
},
triggerOn: 'touchstart',
activeShape: true,
activeStyle: {
offset: 1,
appendRadius: 8,
fillOpacity: 0.5,
}
})
// 配置tooltip
chart.tooltip(true)
chart.legend(false)
chart.render()
//两个要一起用才行
// chart.changeData(this.data.chartsData);//data为后端数据
// chart.repaint();//更新图表
return chart
},