数据较多时饼图线条显示不完整

[mengpangyu]

import F2 from '@antv/f2';

const data = [{"fanAreaValue":24,"fanAreaValueDesc":"24.00%","fanAreaDesc":"IT、互联网","const":"const"},{"fanAreaValue":10,"fanAreaValueDesc":"10.00%","fanAreaDesc":"公务员","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"医护人员","const":"const"},{"fanAreaValue":3,"fanAreaValueDesc":"3.00%","fanAreaDesc":"外卖员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"学生","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"房产中介","const":"const"},{"fanAreaValue":5,"fanAreaValueDesc":"5.00%","fanAreaDesc":"教育科研","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"服务人员","const":"const"},{"fanAreaValue":15,"fanAreaValueDesc":"15.00%","fanAreaDesc":"网约车司机","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"自媒体从业人员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"蓝领工人","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"设计师","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"货运司机","const":"const"}]
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.coord('polar', {
  transposed: true,
  radius: 0.9,
  innerRadius: 0.5
});
chart.axis(false);
chart.legend(false);
chart.tooltip(false);
chart.guide()
  .html({
    position: [ '50%', '50%' ],
    html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
  });
chart.interval()
  .position('const*fanAreaValue')
  .adjust('stack')
  .color('fanAreaDesc', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]);
chart.pieLabel({
  sidePadding: 30,
  activeShape: true,
  label1: function label1(data) {
    return {
      text: data.fanAreaValueDesc,
      fill: '#343434',
      fontWeight: 'bold'
    };
  },
  label2: function label2(data) {
    return {
      text: data.fanAreaDesc,
      fill: '#999'
    };
  },
  onClick: function onClick(ev) {
    const data = ev.data;
    if (data) {
      $('#title').text(data.type);
      $('#money').text(data.money);
    }
  }
});
chart.render();

根据官网例子改写数据后, 显示出bug

[mengpangyu]

import F2 from '@antv/f2';

const data = [{"fanAreaValue":24,"fanAreaValueDesc":"24.00%","fanAreaDesc":"IT、互联网","const":"const"},{"fanAreaValue":10,"fanAreaValueDesc":"10.00%","fanAreaDesc":"公务员","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"医护人员","const":"const"},{"fanAreaValue":3,"fanAreaValueDesc":"3.00%","fanAreaDesc":"外卖员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"学生","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"房产中介","const":"const"},{"fanAreaValue":5,"fanAreaValueDesc":"5.00%","fanAreaDesc":"教育科研","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"服务人员","const":"const"},{"fanAreaValue":15,"fanAreaValueDesc":"15.00%","fanAreaDesc":"网约车司机","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"自媒体从业人员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"蓝领工人","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"设计师","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"货运司机","const":"const"}]
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.coord('polar', {
  transposed: true,
  radius: 0.9,
  innerRadius: 0.5
});
chart.axis(false);
chart.legend(false);
chart.tooltip(false);
chart.guide()
  .html({
    position: [ '50%', '50%' ],
    html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
  });
chart.interval()
  .position('const*fanAreaValue')
  .adjust('stack')
  .color('fanAreaDesc', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]);
chart.pieLabel({
  sidePadding: 30,
  activeShape: true,
  label1: function label1(data) {
    return {
      text: data.fanAreaValueDesc,
      fill: '#343434',
      fontWeight: 'bold'
    };
  },
  label2: function label2(data) {
    return {
      text: data.fanAreaDesc,
      fill: '#999'
    };
  },
  onClick: function onClick(ev) {
    const data = ev.data;
    if (data) {
      $('#title').text(data.type);
      $('#money').text(data.money);
    }
  }
});
chart.render();

根据官网例子改写数据后, 显示出bug

这个是因为容器高度问题, 如果数据过多, 会展示不开, 调整高度便可以完全展示

[li305263]

没发现线方向有问题吗..我的也会

[mengpangyu]

没发现线方向有问题吗..我的也会

方向是图表内部判断的吧, 我没发现什么问题