[GitHub] [echarts] jiawulin001 opened a new pull request #16750: feat: Add stackDim to specify axis to stack

Fri, 25 Mar 2022 07:59:04 -0700 


jiawulin001 opened a new pull request #16750:
URL: https://github.com/apache/echarts/pull/16750


   ## Brief Information
   
   This pull request is in the type of:
   
   - [ ] bug fixing
   - [x] new feature
   - [ ] others
   
   
   
   ### What does this PR do?
   
   Add series-line.stackDim to let series-line.stack work properly.
   
   
   
   ### Fixed issues
   
   
   - #16744 
   
   
   
   ## 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 
https://github.com/apache/echarts/issues/16744#issuecomment-1078871530
   
   Below is an example of problem happens in 
   ### Line chart
   - Chart without stack:
   <img width="450" alt="echart_original" 
src="https://user-images.githubusercontent.com/14244944/160137055-d0114336-089c-4d96-9fb3-ebabe2e46325.png";>
   
   - Chart stack correctly (xAxis.type = 'category'):
   <img width="432" alt="echart_noproblem" 
src="https://user-images.githubusercontent.com/14244944/160140290-ce93b4cd-b9b1-4271-831e-f3b9f0e7b2bb.png";>
   
   - Chart stack incorrectly (xAxis.type = 'log'):
   <img width="429" alt="echart_problem" 
src="https://user-images.githubusercontent.com/14244944/160135832-b3e12a4d-1060-4a6c-8129-e6e931a17409.png";>
   
   - 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:
   <img width="483" alt="echart_original_bar" 
src="https://user-images.githubusercontent.com/14244944/160137759-815a5ecb-0d79-49bf-9bf6-76bb57b8ed25.png";>
   
   - Chart stack correctly (xAxis.type = 'category'):
   <img width="450" alt="echart_noproblem_bar" 
src="https://user-images.githubusercontent.com/14244944/160140813-51ea4803-f692-4346-ae6f-283321785a26.png";>
   
   - Chart stack incorrectly (xAxis.type = 'value'):
   <img width="456" alt="echart_problem_bar" 
src="https://user-images.githubusercontent.com/14244944/160137800-a760c7a1-4389-4c3c-adb3-ed7eacef1c4a.png";>
   
   - 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:
   <img width="426" alt="echart_fix" 
src="https://user-images.githubusercontent.com/14244944/160137254-aee3586b-38fe-42f2-b271-b69a459e742b.png";>
   - 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:
   <img width="449" alt="echart_fix_bar" 
src="https://user-images.githubusercontent.com/14244944/160137818-1c1b3e80-06df-4a9d-aa16-edf5da505b79.png";>
   
   - 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
   
   <!-- ADD RELATED ISSUE ID WHEN APPLICABLE -->
   
   - [x] The API has been changed (apache/echarts-doc#xxx).
   - [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to