You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/09/08 09:56:14 UTC

[GitHub] [incubator-echarts] Ovilia opened a new pull request #13246: WIP(line): endLabel animation

Ovilia opened a new pull request #13246:
URL: https://github.com/apache/incubator-echarts/pull/13246


   <!-- Please fill in the following information to help us review your PR more efficiently. -->
   
   ## Brief Information
   
   This pull request is in the type of:
   
   - [ ] bug fixing
   - [ ] new feature
   - [ ] others
   
   
   
   ### What does this PR do?
   
   <!-- USE ONCE SENTENCE TO DESCRIBE WHAT THIS PR DOES. -->
   
   
   
   ### Fixed issues
   
   <!--
   - #xxxx: ...
   -->
   
   
   ## Details
   
   ### Before: What was the problem?
   
   <!-- DESCRIBE THE BUG OR REQUIREMENT HERE. -->
   
   <!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
   
   
   
   ### After: How is it fixed in this PR?
   
   <!-- THE RESULT AFTER FIXING AND A SIMPLE EXPLANATION ABOUT HOW IT IS FIXED. -->
   
   <!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
   
   
   
   ## Usage
   
   ### Are there any API changes?
   
   - [ ] The API has been changed.
   
   <!-- LIST THE API CHANGES HERE -->
   
   
   
   ### Related test cases or examples to use the new APIs
   
   NA.
   
   
   
   ## Others
   
   ### Merging options
   
   - [ ] Please squash the commits into a single one when merge.
   
   ### Other information
   


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] pissang merged pull request #13246: feat(line): endLabel animation

Posted by GitBox <gi...@apache.org>.
pissang merged pull request #13246:
URL: https://github.com/apache/incubator-echarts/pull/13246


   


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] echarts-bot[bot] commented on pull request #13246: feat(line): endLabel animation

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #13246:
URL: https://github.com/apache/incubator-echarts/pull/13246#issuecomment-700406720


   Congratulations! Your PR has been merged. Thanks for your contribution! 👍


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] realeve commented on pull request #13246: feat(line): endLabel animation

Posted by GitBox <gi...@apache.org>.
realeve commented on pull request #13246:
URL: https://github.com/apache/incubator-echarts/pull/13246#issuecomment-711121627


   @pissang  @Ovilia 
   1.尾部跟随能否将图例的信息显示在线/区域图的最后面,目前显示的是最后一项的值。
   ![image](https://user-images.githubusercontent.com/448208/96359742-ca0b7c80-1148-11eb-8a14-bfe1fbd1d2a4.png)
   
   2.将图例和曲线一并显示,可读性更高一些,比如阿里在g2-plot中是这样处理的:
   ![image](https://user-images.githubusercontent.com/448208/96359767-2ff80400-1149-11eb-968d-6209f0966b57.png)
   
   在面积图又是这样的效果(https://g2plot-v1.antv.vision/zh/examples/area/stacked#area-label ):
   ![image](https://user-images.githubusercontent.com/448208/96359780-47cf8800-1149-11eb-9edf-37bbd1c555d7.png)
   
   ----
   
   3.目前5.0的尾部跟随效果在开/关 legend时对应的数据序列不会关闭。例如下图在关闭series0时,对应数据未隐藏,同时series1的曲线图及辅助点错位,tooltip也不正。另外 endLabel的formatter不支持富文本。
   
   ![image](https://user-images.githubusercontent.com/448208/96359851-f5db3200-1149-11eb-95cf-9e3904e6010d.png)
   
   代码如下 
   ```html
   <html>
       <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <script src="lib/esl.js"></script>
           <script src="lib/config.js"></script>
           <script src="lib/facePrint.js"></script>
       </head>
       <body>
           <style>
               html,
               body {
                   width: 100%;
                   height:100vh;
               }
               #main0 {
                   width: 100%;
                   height: 600px;
               }
           </style>
           <div id="main0"></div>
           <script>
               require(["echarts"], function (echarts) {
                   var chart = echarts.init(document.getElementById("main0"));
                   var config = {
                       type: "line",
                       endLabel: {
                           show: true,
                           valueAnimation: true,
                           formatter: (param) =>
                               `${param.seriesName}: ${param.value}`,
                       },
                       emphasis: {
                           endLabel: {
                               color: "red",
                           },
                       },
                   };
                   var option = {
                       xAxis: {
                           data: [
                               "0",
                               "1",
                               "2",
                               "3",
                               "4",
                               "5",
                               "6",
                               "7",
                               "8",
                               "9",
                               "10",
                               "11",
                           ],
                       },
                       yAxis: {},
                       tooltip:{
                           trigger:'axis'
                       },
                       legend:{},
                       series: [
                           {
                               name: "series0",
                               data: [
                                   645,
                                   -271,
                                   -550,
                                   -1580,
                                   -2295,
                                   "-",
                                   -1195,
                                   -2295,
                                   -1799,
                                   -1188,
                                   -354,
                                   459,
                               ],
                               ...config,
                           },
                           {
                               name: "series11",
                               data: [
                                   472,
                                   828,
                                   1679,
                                   "-",
                                   2818,
                                   2220,
                                   2220,
                                   2220,
                                   1570,
                                   1109,
                                   '-',
                               ],
                               ...config,
                           },
                       ],
                   };
   
                   chart.setOption(option);
               });
           </script>
       </body>
   </html>
   
   ```


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org