[GitHub] [echarts] minicloudsky opened a new issue #16634: [Feature] echarts area chart axis how to implements fixed position, when mouse moving and the data is updating

Sun, 06 Mar 2022 18:38:48 -0800 


minicloudsky opened a new issue #16634:
URL: https://github.com/apache/echarts/issues/16634


   ### What problem does this feature solve?
   
   I want to create a chart like below with [echarts area 
chart](https://echarts.apache.org/examples/zh/editor.html?c=area-simple),however,I
 can't fix the tooltip in a specific pisition,how can i fix the echarts 
tooltip, and when x axis the moving,the data the updating,the results like below
   My echarts area chart
   
![image](https://user-images.githubusercontent.com/32286819/156957803-f277dfd2-8d20-44dd-9ab1-b7fda6ad173f.png)
   
![image](https://user-images.githubusercontent.com/32286819/156957825-38b7e2c4-cec3-4b1c-9a1c-84e5f7e2acd4.png)
   
   I expected result implement in echarts (data update when user mouse moving)
   
![image](https://user-images.githubusercontent.com/32286819/156957925-fb1076fe-2605-4492-9b6b-107e2505e3d3.png)
   
![image](https://user-images.githubusercontent.com/32286819/156958058-a5c0d3a1-d56f-4f20-b42f-2f431d024cdb.png)
   
   How can i  config echarts options,or what should i do ?thanks community
   
   
   ### What does the proposed API look like?
   
   My current echarts code like below
   ```javascript
   import * as echarts from 'echarts';
   
   var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
   var option;
   
   option = {
     tooltip: {
       trigger: 'axis',
       position: 'left',
       confine: false
       // position: function (pt) {
       //   return [pt[0], '5%'];
       // }
     },
     title: {
       left: 'center',
       text: 'mysql average cpu usage'
     },
     // toolbox: {
     //   feature: {
     //     dataZoom: {
     //       yAxisIndex: 'none'
     //     }
     //     // restore: {},
     //     // saveAsImage: {}
     //   }
     // },
     xAxis: {
       type: 'category',
       boundaryGap: false,
       data: [
         '14:56',
         '14:57',
         '14:58',
         '14:59',
         '15:00',
         '15:01',
         '15:03',
         '15:04',
         '15:05',
         '15:06',
         '15:07',
         '15:08',
         '15:09',
         '15:10',
         '15:11',
         '15:12',
         '15:13',
         '15:14',
         '15:15',
         '15:16',
         '15:17',
         '15:18',
         '15:19',
         '15:20',
         '15:21',
         '15:22',
         '15:23',
         '15:24',
         '15:25',
         '15:26',
         '15:27',
         '15:28',
         '15:29',
         '15:30',
         '15:31',
         '15:32',
         '15:33',
         '15:34',
         '15:35',
         '15:36',
         '15:37',
         '15:38',
         '15:39',
         '15:40',
         '15:41',
         '15:42',
         '15:43',
         '15:44',
         '15:45',
         '15:46',
         '15:47',
         '15:48',
         '15:49',
         '15:50',
         '15:51',
         '15:52'
       ],
       show: false 
     },
     yAxis: {
       type: 'value',
       show: false, 
       boundaryGap: [0, '100%']
     },
     dataZoom: [],
     series: [
       {
         name: '',
         type: 'line',
         symbol: 'none',
         sampling: 'lttb',
         itemStyle: {
           color: '#a4def7'
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
               color: '#a4def7'
             },
             {
               offset: 1,
               color: '#a4def7'
             }
           ])
         },
         data: [
           1.73, 1.62, 1.69, 1.73, 1.72, 2.31, 1.98, 2.01, 1.84, 1.9, 1.81, 
1.87,
           1.98, 1.87, 2.07, 1.91, 1.91, 1.77, 1.72, 1.76, 1.77, 1.72, 1.69, 
1.73,
           1.93, 1.74, 1.8, 1.85, 1.71, 1.71, 1.63, 1.55, 1.59, 1.64, 1.9, 1.67,
           1.56, 1.56, 1.55, 1.61, 1.57, 1.56, 1.52, 1.55, 1.83, 1.53, 1.58, 
1.6,
           1.54, 1.6, 1.52, 1.52, 1.53, 1.49, 1.68, 1.54
         ]
       }
     ]
   };
   
   option && myChart.setOption(option);
   
   ```


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