antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.
https://f2.antv.vision/zh
MIT License
7.89k stars 649 forks source link

环形图的PieLabel线过于混乱,期望能够有简洁版的Label支持 #1991

Open hsp-sz opened 2 months ago

hsp-sz commented 2 months ago

What problem does this feature solve?

环形图的Label线过于混乱,期望能够有简洁版的Label支持

What does the proposed API look like?

期望支持配置简单版的Label,在3.x的时候能够画的,5.x画不出来了。 3.x的部分代码片段如下:

methods: {
    renderChart() {
      if (!this.chart && !this.props.genderData) return;

      const data = this.props.genderData.filter(
        (item) => item?.name !== '未知' || item?.cnt !== '0',
      );

      const newData = sortBy(data || [], (item1: any, item2) => {
        return order.indexOf(item1?.name) - order.indexOf(item2?.name);
      });

      const map = {};
      newData.forEach(function(obj) {
        map[obj.name] = autoFormatNumber(obj.cnt);
      });

      this.chart.source(newData);
      this.chart.coord('polar', {
        transposed: true,
        innerRadius: 0.6,
        radius: 1,
      });
      this.chart.axis(false);
      this.chart.legend(false);

      this.chart.tooltip(false);

      this.chart.pieLabel({
        sidePadding: 20,
        anchorOffset: -4,
        inflectionOffset: 8,
        anchorStyle: {
          opacity: 0,
        },
        label1: function label1(data) {
          return {
            text: autoFormatRatioToFix2(data.percent),
            fill: '#333333',
            fontFamily: 'PingFangSC-Medium',
            fontWeight: 500,
            fontSize: 15,
          };
        },
      });
      this.chart
        .interval()
        .position('const*percent')
        .color('name', ['#368CFF', '#F95777', '#BBBBBB'])
        .adjust('stack')
        .style({
          lineWidth: 4,
          stroke: 'white',
        });
      this.chart.render();
    },
    onInitChart(F2, config) {
      const chart = new F2.Chart(
        Object.assign(config, {
          padding: [36, 0, 0, 0],
          appendPadding: 0,
          plugins: PieLabel,
        }),
      );

      this.chart = chart;
      this.renderChart();

      // 注意:需要把chart return 出来
      return chart;
    },
  },