antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.

Home Page:https://f2.antv.vision/zh

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

luoxin59420 opened this issue · comments

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

},