Enhance funnel chart label display policy #8759

cuijian-dexter · 2018-07-26T08:37:29Z

The value of the fan page of the pie chart is less than a certain value. The label and labelLine of this fan page are not displayed.
Funnel plot position increase insideLeft and insideRight attributes.

Add the limitScale parameter under series. Label, and the parameter value is greater than 0 and less than 1.
To ensure that the pie chart does not show label and labelLine on the fan page that is less than a certain value.

options={
  title: {
    text: '饼图标题',
    left: 16,
    textStyle: {
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      //坐标轴指示器，坐标轴触发有效type: 'shadow'//默认为直线，可选为：'line'|'shadow'
    },
    extraCssText: 'max-width: 300px; word-break:break-all; white-space: normal'
  },
  legend: {
    data: [
      
    ]
  },
  series: [
    {
      type: 'pie',
      label: {
        normal: {
          show: true,
          limitScale: 0.02//小于2%的，不显示
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        lineStyle: {
          color: '#D9D9D9'
        }
      },
      data: [
        
      ]
    }
  ]
};

…elLine

cuijian-dexter · 2018-07-26T09:04:27Z

Label line may be outside the canvas when pie items are too much. #8390 #8507

cuijian-dexter · 2018-07-26T09:28:17Z

漏斗图中的label是否可以支持position等于insideLeft和insideRight #7596

Ovilia · 2018-09-03T08:06:31Z

@cuijian-dexter Hi @cuijian-dexter , I think this feature is very useful although we have to discuss it in details. But first of all, could you please change the title and comments into English so that more community members can understand? Thanks!

cuijian-dexter · 2018-09-03T08:11:13Z

@Ovilia ok,I'll change it right away

Ovilia · 2018-09-03T09:10:16Z

src/chart/funnel/funnelLayout.js

-            textX = (points[0][0] + points[1][0] + points[2][0] + points[3][0]) / 4;
-            textY = (points[0][1] + points[1][1] + points[2][1] + points[3][1]) / 4;
-            textAlign = 'center';
+            if (labelPosition === 'insideLeft'){


Add space: if (labelPosition === 'insideLeft') {.
Also change the similar problems.

ok,thank you

Ovilia · 2018-09-03T09:10:32Z

src/chart/funnel/funnelLayout.js

-            textY = (points[0][1] + points[1][1] + points[2][1] + points[3][1]) / 4;
-            textAlign = 'center';
+            if (labelPosition === 'insideLeft'){
+                textX = (points[0][0] + points[3][0])/2 + 5;


Ovilia · 2018-09-03T09:11:16Z

@cuijian-dexter The pie chart label filtering and funnel label positioning seems to be two different topics. I reviewed the funnel part and that seems to be working. How about removing the pie chart part in this PR (you can make another PR later)?
And please format your code as I mentioned above.
Thanks for your contribution.

cuijian-dexter · 2018-09-03T09:21:46Z

@Ovilia
This is the options of pie chart.Adding the limitScale parameter.
Less than limitScale, do not show.
Do I need to resubmit a Pull Request?

options = {
        title: {
           text: '饼图标题',
            left: 16,
            textStyle: {
                fontSize: 14
            }
        },
        tooltip : {
            trigger: 'item',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            extraCssText: 'max-width: 300px; word-break:break-all; white-space: normal'
        },
        legend:{
            data: []
        },
        series: [
            {
                type: 'pie',
                label: {
                    normal: {
                        show: true,
                        limitScale:0.02//小于2%的，不显示
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    lineStyle: {
                        // color: '#D9D9D9'
                    }
                },
                data: []
            }
        ]
    };

Ovilia · 2018-09-03T09:28:38Z

You need to remove the pie-related code from the PR. Undo the changes in pie chart; commit; pull request.
Here's how to open another PR on GitHub: https://stackoverflow.com/questions/8450036/how-to-open-multiple-pull-requests-on-github You can also wait for the PR to be closed and then add a new PR.

cuijian-dexter · 2018-09-03T09:48:14Z

@Ovilia Okay, I have deleted the pie-related code.

cuijian-dexter · 2018-09-03T10:25:16Z

@Ovilia new pull request of pie charts #8997

Ovilia · 2018-09-04T08:17:08Z

@cuijian-dexter Very close now! Please see https://github.com/apache/incubator-echarts/pull/8759/files for my comments and fix them. And revert the changes in src/chart/pie/pieLayout.js.

cuijian-dexter

Funnel plot position increase insideLeft and insideRight attributes.

cuijian-dexter · 2018-09-04T08:21:27Z

src/chart/funnel/funnelLayout.js

-            textX = (points[0][0] + points[1][0] + points[2][0] + points[3][0]) / 4;
-            textY = (points[0][1] + points[1][1] + points[2][1] + points[3][1]) / 4;
-            textAlign = 'center';
+            if (labelPosition === 'insideLeft'){


ok,thank you

cuijian-dexter · 2018-09-04T08:34:40Z

@Ovilia should I delete this file src/chart/pie/pieLayout.js ?

cuijian-dexter · 2018-09-04T11:02:44Z

@Ovilia It seems to be OK. I'm very sorry, this is my first time to contribute code, not very skilled.
Thank you for your help. I will try my best.

Ovilia · 2018-09-10T03:04:11Z

Please don't be sorry. That's OK and we very appreciate your contribution.
One problem here. You need to fix the code style as I commented at https://github.com/apache/incubator-echarts/pull/8759/files .

cuijian-dexter · 2018-09-10T03:12:08Z

@Ovilia ok, Already fixed the code style.Add space

Ovilia

A few more changes.. I believe they are the last ones. 😄

Ovilia · 2018-09-21T06:37:44Z

src/chart/funnel/funnelLayout.js

+                textX = (points[0][0] + points[3][0]) / 2 + 5;
+                textY = (points[0][1] + points[3][1]) / 2;
+                textAlign = 'left';
+            }else if (labelPosition === 'insideRight') {


It should be } else if

Ovilia · 2018-09-21T06:37:58Z

src/chart/funnel/funnelLayout.js

+                textX = (points[1][0] + points[2][0]) / 2 - 5;
+                textY = (points[1][1] + points[2][1]) / 2;
+                textAlign = 'right';
+            }else {


cuijian-dexter · 2018-09-21T06:46:40Z

@Ovilia Have already been solved

Ovilia · 2018-09-21T07:56:43Z

@cuijian-dexter Thanks for your contribution! 🌟🌟🌟🌟🌟
Now you are one of the ECharts contributors. Since we joined Apache group, you need to assign ICLA for your first PR.
Please fill in the PDF and print it, then sign on it and send the scanned file to dev@echarts.apache.org.
This may be a little tricky, and sorry for the trouble. This is required for the first time your commit is merged in. If you refused, your commit will be backed off.

And are you interested in being an ECharts committer? This has more restrict rules than contributors. Committers are those who contribute more frequently and play more important roles on ECharts project.

After being a committer:

You can have write access to the ECharts code
You can mange issues (add tags, assign to someone, ...)
You can discuss about features with us committers more frequently with Email
You name and personal page link will be displayed at ECharts Website About page
See this for more information

If you are interested, here's what you can do:

Subscribe our mailing list by send an email to dev-subscribe@echarts.apache.org
When you want to discuss with us about something, send email to dev@echarts.apache.org
Help others by replying issues regularly
Make more useful pull requests (fix bugs or make enhancement in issues)

Here are some issues that may be easier to be fixed: https://github.com/apache/incubator-echarts/projects/3

And you will be invited to be a committer when we think your contribution and knowledge of ECharts project is enough. We are looking forward to this! 😃

cuijian-dexter · 2018-09-21T08:06:01Z

@Ovilia Thank you
I am very happy to be one of the contributors to the project.
I am interested in becoming a committer.
Whenever I have time, I will try my best to help solve the problem. I hope to be a committer early.

Ovilia · 2018-09-21T09:02:41Z

@cuijian-dexter Thanks, please send scanned PDF as soon as possible. ⭐️

cuijian-dexter · 2018-09-21T11:46:19Z

@Ovilia It has been sent the scanned file to dev@echarts.apache.org.Please check it.

Ovilia · 2018-10-08T03:40:01Z

@cuijian-dexter Sorry for the late reply. I didn't receive the file from dev@echarts.apache.org.
Did you subscribed the mailing list? Could you receive it?
Could you please send it to oviliazhang@gmail.com?

cuijian-dexter · 2018-10-08T04:37:44Z

@Ovilia ok

Ovilia · 2018-10-17T06:55:35Z

I've sent the email but the secretary did not reply. There are some other new contributors sending ICLA file and got no reply. I'll send an email to mentor about this.

cuijian-dexter · 2018-10-17T07:02:18Z

@Ovilia ok

cuijian-dexter · 2018-10-17T07:09:56Z

I've sent the email but the secretary did not reply. There are some other new contributors sending ICLA file and got no reply. I'll send an email to mentor about this.

Now,what should I do?

Ovilia · 2018-10-18T02:46:13Z

I got an email that your ICLA file has been accepted. Congratulations!

cuijian-dexter · 2018-10-18T02:50:13Z

@Ovilia Thank you!😄

在series.label下增加limitScale参数，参数值为大于0小于1的数值。以保证饼图在小于一定值的扇页不显示label和lab…

140e409

…elLine

为漏斗图position增加insideLeft和insideRight

2b7466d

cuijian-dexter changed the title ~~饼图的扇页的值小于一定值，不显示此扇页的label和labelLine~~ 1.饼图的扇页的值小于一定值，不显示此扇页的label和labelLine。2.为漏斗图position增加insideLeft和insideRight Jul 26, 2018

Ovilia changed the title 1.the value of the fan page of the pie chart is less than a certain value. The label and labelLine of this fan page are not displayed.2.funnel plot position increase insideLeft and insideRight attributes. Enhance pie chart label display policy Sep 3, 2018

Ovilia reviewed Sep 3, 2018

View reviewed changes

remove the pie-related code

cac531c

Ovilia changed the title ~~Enhance pie chart label display policy~~ Enhance funnel chart label display policy Sep 4, 2018

cuijian-dexter commented Sep 4, 2018

View reviewed changes

cuijian and others added 4 commits September 4, 2018 17:46

revert pieLayout.js

99e995c

Update pieLayout.js

ed7e86e

Delete this file to modify

d2ae3e8

Add pieLayout.js again

d71ed30

Add space:

df1b901

add space

eb2cfab

Ovilia reviewed Sep 21, 2018

View reviewed changes

Add space

332caae

Ovilia merged commit e4c4e0e into apache:master Sep 21, 2018

Ovilia added a commit that referenced this pull request Sep 21, 2018

fix: funnel label inside checking, fix bug of #8759

6f5ae00

Ovilia added a commit that referenced this pull request Sep 21, 2018

test: add test for funnel label inside #8759

c031be5

cuijian-dexter mentioned this pull request Oct 17, 2018

Pie chart adds filterValue parameter #8997

Merged

snyk-bot mentioned this pull request Dec 5, 2019

[Snyk] Upgrade echarts from 4.3.0 to 4.5.0 dyna-dot/iClient-JavaScript-s#1

Open

This was referenced Mar 24, 2020

[Snyk] Upgrade echarts from 4.2.1 to 4.6.0 OpenTMI/opentmi-default-gui#32

Merged

[Snyk] Upgrade echarts from 4.1.0 to 4.7.0 DeviaVir/zenbot#2011

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance funnel chart label display policy #8759

Enhance funnel chart label display policy #8759

cuijian-dexter commented Jul 26, 2018 •

edited by Ovilia

Loading

cuijian-dexter commented Jul 26, 2018 •

edited by Ovilia

Loading

cuijian-dexter commented Jul 26, 2018 •

edited

Loading

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

Ovilia Sep 3, 2018

cuijian-dexter Sep 4, 2018

Ovilia Sep 3, 2018

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018 •

edited by pissang

Loading

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

Ovilia commented Sep 4, 2018

cuijian-dexter left a comment

cuijian-dexter Sep 4, 2018

cuijian-dexter commented Sep 4, 2018

cuijian-dexter commented Sep 4, 2018

Ovilia commented Sep 10, 2018

cuijian-dexter commented Sep 10, 2018

Ovilia left a comment

Ovilia Sep 21, 2018

Ovilia Sep 21, 2018

cuijian-dexter commented Sep 21, 2018

Ovilia commented Sep 21, 2018 •

edited

Loading

cuijian-dexter commented Sep 21, 2018

Ovilia commented Sep 21, 2018

cuijian-dexter commented Sep 21, 2018

Ovilia commented Oct 8, 2018

cuijian-dexter commented Oct 8, 2018

Ovilia commented Oct 17, 2018 •

edited

Loading

cuijian-dexter commented Oct 17, 2018

cuijian-dexter commented Oct 17, 2018

Ovilia commented Oct 18, 2018

cuijian-dexter commented Oct 18, 2018

Enhance funnel chart label display policy #8759

Enhance funnel chart label display policy #8759

Conversation

cuijian-dexter commented Jul 26, 2018 • edited by Ovilia Loading

cuijian-dexter commented Jul 26, 2018 • edited by Ovilia Loading

cuijian-dexter commented Jul 26, 2018 • edited Loading

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

Ovilia Sep 3, 2018

Choose a reason for hiding this comment

cuijian-dexter Sep 4, 2018

Choose a reason for hiding this comment

Ovilia Sep 3, 2018

Choose a reason for hiding this comment

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018 • edited by pissang Loading

Ovilia commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

cuijian-dexter commented Sep 3, 2018

Ovilia commented Sep 4, 2018

cuijian-dexter left a comment

Choose a reason for hiding this comment

cuijian-dexter Sep 4, 2018

Choose a reason for hiding this comment

cuijian-dexter commented Sep 4, 2018

cuijian-dexter commented Sep 4, 2018

Ovilia commented Sep 10, 2018

cuijian-dexter commented Sep 10, 2018

Ovilia left a comment

Choose a reason for hiding this comment

Ovilia Sep 21, 2018

Choose a reason for hiding this comment

Ovilia Sep 21, 2018

Choose a reason for hiding this comment

cuijian-dexter commented Sep 21, 2018

Ovilia commented Sep 21, 2018 • edited Loading

cuijian-dexter commented Sep 21, 2018

Ovilia commented Sep 21, 2018

cuijian-dexter commented Sep 21, 2018

Ovilia commented Oct 8, 2018

cuijian-dexter commented Oct 8, 2018

Ovilia commented Oct 17, 2018 • edited Loading

cuijian-dexter commented Oct 17, 2018

cuijian-dexter commented Oct 17, 2018

Ovilia commented Oct 18, 2018

cuijian-dexter commented Oct 18, 2018

cuijian-dexter commented Jul 26, 2018 •

edited by Ovilia

Loading

cuijian-dexter commented Jul 26, 2018 •

edited by Ovilia

Loading

cuijian-dexter commented Jul 26, 2018 •

edited

Loading

cuijian-dexter commented Sep 3, 2018 •

edited by pissang

Loading

Ovilia commented Sep 21, 2018 •

edited

Loading

Ovilia commented Oct 17, 2018 •

edited

Loading