antvis / antvis/F2

"@antv/my-f2": "^2.1.7",

Open
#1,879 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8k
Forks
637
PR merge metrics
No merged PRs in 30d

Description

"@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
},

Contributor guide

Open the contributing guide

Research direction

No repository file, test, or entry point is named; begin by locating F2's pie-chart interaction handling and the DingTalk mini-program adapter. Compare the shown pieLabel touch configuration with existing interaction examples. Done would require a documented, reproducible answer or a confirmed implementation path for pie-slice click events.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
15/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.