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/10/18 05:59:23 UTC

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

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