feat: Add stackDim to specify axis to stack

[jiawulin001]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Add series-line.stackDim to let series-line.stack work properly.

Fixed issues

• [Feature] Confidence Band example with xAxis.type and yAxis.type equal "log" #16744
• [Feature] I want a Confidence Band with the type of x and y axis equal "log"! #16646

Details

Before: What was the problem?

When using series-line.stack, and turn x-axis type into 'log' or 'value' ( or any other type that's "stackable"), the chart does not stack correctly. The reason why the problem happens is specified in #16744 (comment)

Below is an example of problem happens in

Line chart

Chart without stack	Chart stack correctly (xAxis.type = 'category')	Chart stack incorrectly (xAxis.type = 'log')

Code to reproduce:

• xAxis.type = 'category': Stack correctly
• xAxis.type = 'log': Stack incorrectly

option = {
    "xAxis": {
        "type": "log",
    },
    "yAxis": {
        "type": "log",
        
    },
    "series": [
        {
            "name": null,
            "type": "line",
            "smooth": true,
            "symbol": "none",
            "lineStyle": {
                "type": "solid"
            },
            "itemStyle": {
                "color": "#E3000B"
            },
            "areaStyle": {
                "color": ""
            },
            "stack": "0",
            "data": [
                [
                    0,
                    0.0000014737799999999998
                ],
                [
                    0.225,
                    0.0000014682600000000002
                ],
                [
                    0.45,
                    0.0000014636399999999999
                ],
                [
                    0.675,
                    0.00000145296
                ],
                [
                    0.9,
                    0.0000014407
                ],
                [
                    1.125,
                    0.0000014275999999999999
                ],
                [
                    1.35,
                    0.00000140994
                ],
                [
                    1.575,
                    0.0000013875399999999999
                ],
                [
                    1.8,
                    0.00000135424
                ],
                [
                    2.025,
                    0.0000013085399999999999
                ],
                [
                    2.25,
                    0.00000123032
                ],
                [
                    2.475,
                    0.0000011012000000000001
                ],
                [
                    2.7,
                    8.937799999999999e-7
                ],
                [
                    2.925,
                    6.304e-7
                ],
                [
                    3.15,
                    4.467e-7
                ],
                [
                    3.375,
                    3.6019999999999996e-7
                ],
                [
                    3.6,
                    3.1755e-7
                ],
                [
                    3.825,
                    2.93e-7
                ],
                [
                    4.05,
                    2.7654999999999997e-7
                ],
                [
                    4.275,
                    2.6430000000000006e-7
                ],
                [
                    4.5,
                    2.5445000000000006e-7
                ]
            ]
        },
        {
            "name": null,
            "type": "line",
            "smooth": true,
            "symbol": "none",
            "lineStyle": {
                "type": "solid"
            },
            "itemStyle": {
                "color": "#FE9F9B"
            },
            "areaStyle": {
                "color": ""
            },
            "stack": "1",
            "data": [
                [
                    0,
                    0.0000014094
                ],
                [
                    0.225,
                    0.0000014048
                ],
                [
                    0.45,
                    0.0000014004
                ],
                [
                    0.675,
                    0.0000013934
                ],
                [
                    0.9,
                    0.0000013839999999999998
                ],
                [
                    1.125,
                    0.0000013724
                ],
                [
                    1.35,
                    0.0000013586
                ],
                [
                    1.575,
                    0.0000013416
                ],
                [
                    1.8,
                    0.0000012916
                ],
                [
                    2.025,
                    0.0000012564
                ],
                [
                    2.25,
                    0.0000011756
                ],
                [
                    2.475,
                    0.0000010336
                ],
                [
                    2.7,
                    7.895e-7
                ],
                [
                    2.925,
                    5.1e-7
                ],
                [
                    3.15,
                    3.74e-7
                ],
                [
                    3.375,
                    3.1750000000000003e-7
                ],
                [
                    3.6,
                    2.87e-7
                ],
                [
                    3.825,
                    2.67e-7
                ],
                [
                    4.05,
                    2.545e-7
                ],
                [
                    4.275,
                    2.435e-7
                ],
                [
                    4.5,
                    2.3499999999999997e-7
                ]
            ]
        },
        {
            "name": null,
            "type": "line",
            "smooth": true,
            "symbol": "none",
            "lineStyle": {
                "type": "solid"
            },
            "itemStyle": {
                "color": "#FE9F9B"
            },
            "areaStyle": {
                "color": "#FE9F9B"
            },
            "stack": "1",
            "data": [
                [
                    0,
                    1.6039999999999998e-7
                ],
                [
                    0.225,
                    1.608e-7
                ],
                [
                    0.45,
                    1.5840000000000004e-7
                ],
                [
                    0.675,
                    1.5419999999999994e-7
                ],
                [
                    0.9,
                    1.478000000000003e-7
                ],
                [
                    1.125,
                    1.3999999999999993e-7
                ],
                [
                    1.35,
                    1.298e-7
                ],
                [
                    1.575,
                    1.1600000000000003e-7
                ],
                [
                    1.8,
                    1.225999999999999e-7
                ],
                [
                    2.025,
                    8.820000000000006e-8
                ],
                [
                    2.25,
                    9.02e-8
                ],
                [
                    2.475,
                    1.352e-7
                ],
                [
                    2.7,
                    2.2610000000000005e-7
                ],
                [
                    2.925,
                    2.565e-7
                ],
                [
                    3.15,
                    1.5450000000000001e-7
                ],
                [
                    3.375,
                    9.449999999999995e-8
                ],
                [
                    3.6,
                    7.05e-8
                ],
                [
                    3.825,
                    6.049999999999999e-8
                ],
                [
                    4.05,
                    5.3499999999999996e-8
                ],
                [
                    4.275,
                    5.050000000000009e-8
                ],
                [
                    4.5,
                    4.8000000000000006e-8
                ]
            ]
        }
    ],
}

Bar chart

Chart without stack	Chart stack correctly (xAxis.type = 'category')	Chart stack incorrectly (xAxis.type = 'value')

Code to reproduce:

• xAxis.type = 'category': Stack correctly
• xAxis.type = 'value': Stack incorrectly

option = {
  xAxis: {
    type: 'value',
    data: [1,2,3,4,5,6,7]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: '1',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: '1',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
  ]
};

After: How is it fixed in this PR?

After fix and adding series.stackDim: 'y' to option, the data can stacked correctly.

Line chart

Chart stack correctly after fix

Code to reproduce:

option = {
  "xAxis": {
      "type": "log",
  },
  "yAxis": {
      "type": "log",
      
  },
  "series": [
      {
          "name": null,
          "type": "line",
          "smooth": true,
          "symbol": "none",
          "lineStyle": {
              "type": "solid"
          },
          "itemStyle": {
              "color": "#E3000B"
          },
          "areaStyle": {
              "color": ""
          },
          "stack": "0",
          "data": [
              [
                  0,
                  0.0000014737799999999998
              ],
              [
                  0.225,
                  0.0000014682600000000002
              ],
              [
                  0.45,
                  0.0000014636399999999999
              ],
              [
                  0.675,
                  0.00000145296
              ],
              [
                  0.9,
                  0.0000014407
              ],
              [
                  1.125,
                  0.0000014275999999999999
              ],
              [
                  1.35,
                  0.00000140994
              ],
              [
                  1.575,
                  0.0000013875399999999999
              ],
              [
                  1.8,
                  0.00000135424
              ],
              [
                  2.025,
                  0.0000013085399999999999
              ],
              [
                  2.25,
                  0.00000123032
              ],
              [
                  2.475,
                  0.0000011012000000000001
              ],
              [
                  2.7,
                  8.937799999999999e-7
              ],
              [
                  2.925,
                  6.304e-7
              ],
              [
                  3.15,
                  4.467e-7
              ],
              [
                  3.375,
                  3.6019999999999996e-7
              ],
              [
                  3.6,
                  3.1755e-7
              ],
              [
                  3.825,
                  2.93e-7
              ],
              [
                  4.05,
                  2.7654999999999997e-7
              ],
              [
                  4.275,
                  2.6430000000000006e-7
              ],
              [
                  4.5,
                  2.5445000000000006e-7
              ]
          ]
      },
      {
          "name": null,
          "type": "line",
          "smooth": true,
          "symbol": "none",
          "lineStyle": {
              "type": "solid"
          },
          "itemStyle": {
              "color": "#FE9F9B"
          },
          "areaStyle": {
              "color": ""
          },
          "stack": "1",
          "stackDim": 'y',
          "data": [
              [
                  0,
                  0.0000014094
              ],
              [
                  0.225,
                  0.0000014048
              ],
              [
                  0.45,
                  0.0000014004
              ],
              [
                  0.675,
                  0.0000013934
              ],
              [
                  0.9,
                  0.0000013839999999999998
              ],
              [
                  1.125,
                  0.0000013724
              ],
              [
                  1.35,
                  0.0000013586
              ],
              [
                  1.575,
                  0.0000013416
              ],
              [
                  1.8,
                  0.0000012916
              ],
              [
                  2.025,
                  0.0000012564
              ],
              [
                  2.25,
                  0.0000011756
              ],
              [
                  2.475,
                  0.0000010336
              ],
              [
                  2.7,
                  7.895e-7
              ],
              [
                  2.925,
                  5.1e-7
              ],
              [
                  3.15,
                  3.74e-7
              ],
              [
                  3.375,
                  3.1750000000000003e-7
              ],
              [
                  3.6,
                  2.87e-7
              ],
              [
                  3.825,
                  2.67e-7
              ],
              [
                  4.05,
                  2.545e-7
              ],
              [
                  4.275,
                  2.435e-7
              ],
              [
                  4.5,
                  2.3499999999999997e-7
              ]
          ]
      },
      {
          "name": null,
          "type": "line",
          "smooth": true,
          "symbol": "none",
          "lineStyle": {
              "type": "solid"
          },
          "itemStyle": {
              "color": "#FE9F9B"
          },
          "areaStyle": {
              "color": "#FE9F9B"
          },
          "stack": "1",
          "stackDim": 'y',
          "data": [
              [
                  0,
                  1.6039999999999998e-7
              ],
              [
                  0.225,
                  1.608e-7
              ],
              [
                  0.45,
                  1.5840000000000004e-7
              ],
              [
                  0.675,
                  1.5419999999999994e-7
              ],
              [
                  0.9,
                  1.478000000000003e-7
              ],
              [
                  1.125,
                  1.3999999999999993e-7
              ],
              [
                  1.35,
                  1.298e-7
              ],
              [
                  1.575,
                  1.1600000000000003e-7
              ],
              [
                  1.8,
                  1.225999999999999e-7
              ],
              [
                  2.025,
                  8.820000000000006e-8
              ],
              [
                  2.25,
                  9.02e-8
              ],
              [
                  2.475,
                  1.352e-7
              ],
              [
                  2.7,
                  2.2610000000000005e-7
              ],
              [
                  2.925,
                  2.565e-7
              ],
              [
                  3.15,
                  1.5450000000000001e-7
              ],
              [
                  3.375,
                  9.449999999999995e-8
              ],
              [
                  3.6,
                  7.05e-8
              ],
              [
                  3.825,
                  6.049999999999999e-8
              ],
              [
                  4.05,
                  5.3499999999999996e-8
              ],
              [
                  4.275,
                  5.050000000000009e-8
              ],
              [
                  4.5,
                  4.8000000000000006e-8
              ]
          ]
      }
  ],
}

Bar chart

Chart stack correctly after fix

Code to reproduce:

option = {
  xAxis: {
    type: 'value',
    data: [1, 2, 3, 4, 5, 6, 7]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: '1',
      stackDim: 'y',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: '1',
      stackDim: 'y',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

Misc

• The API has been changed (feat: update 'stackDim' documentation echarts-doc#243).
• This PR depends on ZRender changes (ecomfe/zrender#xxx).

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

[jiawulin001]

@plainheart Thank you for helping me reformat the PR! It looks much clearer now!

[YassineElbouchaibi]

Hello, this would be super helpful for me, is there anyway I can help?

Also label says awaiting doc but that is not the case anymore!

Thank you!