Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
luoxin59420 opened this issue Nov 1, 2023 · 0 comments
Open

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

luoxin59420 opened this issue Nov 1, 2023 · 0 comments

Comments

@luoxin59420
Copy link

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

},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant