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 2022/08/26 13:39:45 UTC

[GitHub] [echarts] 1163849662 opened a new issue, #17580: [Bug] 动态更新x轴数据排序错乱

1163849662 opened a new issue, #17580:
URL: https://github.com/apache/echarts/issues/17580

   ### Version
   
   5.33
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8">
       <title>ECharts3 Ajax</title>
       <script type="text/javascript" src="../static/jquery.min.js"></script>
       <script type="text/javascript" src="../static/socket.io.min.js"></script>
       <!-- ECharts 3 引入 -->
       <script src="../static/echarts.min.js"></script>
   </head>
   
   <body>
       <!--为ECharts准备一个具备大小(宽高)的Dom-->
       <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
   
       <script type="text/javascript">
       // 作者:hhh5460
       // 时间:2017.8.19
       //--- 折柱 ---
       const myChart = echarts.init(document.getElementById('main'));
   
         myChart. setOption({
                       animation: false,
                       tooltip: {
                           trigger: 'axis',
                           confine: true,
                           showContent: false,
                           axisPointer: {
                               lineStyle: {
                                   color: 'rgba(0, 0, 0, 0)',
                               }
                           },
                       },
                       xAxis: {
                           type: 'category',
                           boundaryGap: false,
   
                       },
                       yAxis: [
                           {
                               type: 'value',
                               position: 'right',
                               splitNumber: 4,
                               axisTick: {
                                   inside: true,
                               },
                               axisLabel: {
                                   inside: true,
                                   showMinLabel: false,
                               },
                               splitLine: {
                                   show: false,
                               }
                           }
                       ],
                       series: [
                           {
                               data: [],
                               type: 'line',
                               symbol: 'circle',
                               showSymbol: false,
                               symbolSize: 10,
                               itemStyle: {
                                   color: 'blue',
                                   borderColor: 'yellow',
                                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                                   shadowBlur: 10
                               },
                               label: {
                                   show: true,
                                   position: 'right',
                                   distance: 10,
                                   padding: 10,
                                   fontSize: 12,
                                   color: '#fff',
                                   backgroundColor: 'rgba(0, 0, 0, .6)',
                                   formatter: function (params) {
                                       return [`价格 :{a|¥${params.data[0]}}`, `总量 :{a|${Math.round(params.data[1])}}`].join('\n')
                                   },
                                   rich: {
                                       a: {
                                           color: '#fff',
                                           fontSize: '12',
                                           fontWeight: 'bold',
                                           lineHeight: '20',
                                       },
                                   }
                               },
                               lineStyle: {
                                   color: '#008c00',
                               },
                               areaStyle: {
                                   color: 'green',
                                   opacity: .2,
                               },
                           },
                           {
                               //data11[0].reverse()
                               data: [],
                               type: 'line',
                               symbol: 'circle',
                               showSymbol: false,
                               symbolSize: 10,
                               itemStyle: {
                                   color: 'blue',
                                   borderColor: 'yellow',
                                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                                   shadowBlur: 10
                               },
                               label: {
                                   show: true,
                                   position: 'left',
                                   distance: 10,
                                   padding: 10,
                                   fontSize: 12,
                                   color: '#fff',
                                   backgroundColor: 'rgba(0, 0, 0, .6)',
                                   formatter: function (params) {
                                       return [`价格 :{a|¥${params.data[0]}}`, `总量 :{a|${Math.round(params.data[1])}}`].join('\n')
                                   },
                                   rich: {
                                       a: {
                                           color: '#fff',
                                           fontSize: '12',
                                           fontWeight: 'bold',
                                           lineHeight: '20',
                                       },
                                   }
                               },
                               lineStyle: {
                                   color: '#ee3523',
                               },
                               areaStyle: {
                                   color: 'red',
                                   opacity: .2,
                               },
                           },
                       ]
                   });
   
   
       //准备好统一的 callback 函数
       const update_mychart = function (res) { //res是json格式的response对象
   
           // 隐藏加载动画
           myChart.hideLoading();
   
           // 填入数据
           myChart.setOption({
               series: [
   
                           {
                               //data11[0].reverse()
                               data: res.data[0].reverse(),
   
                           },
                       ]
           });
   
       };
   
       // 首次显示加载动画
       myChart.showLoading();
   
   
       // 建立socket连接,等待服务器“推送”数据,用回调函数更新图表
       $(document).ready(function() {
           const namespace = '/test';
           const socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
   
           socket.on('server_response', function(res) {
               update_mychart(res);
           });
   
       });
   
       </script>
   </body>
   </html>
   
   ### Current Behavior
   
   x轴顺序错
   ![截屏2022-08-26 下午9 39 01](https://user-images.githubusercontent.com/64328109/186916643-8bb9d355-3511-4b5a-be02-f57cefd60058.png)
   ![截屏2022-08-26 下午9 38 53](https://user-images.githubusercontent.com/64328109/186916653-0e60bc4a-88f2-4720-b048-dfe71d569fcc.png)
   ![截屏2022-08-26 下午9 38 43](https://user-images.githubusercontent.com/64328109/186916662-192d9499-c0ec-453f-a91d-309a11cd03cf.png)
   误
   
   ### Expected Behavior
   
   如果更正
   
   ### Environment
   
   ```markdown
   - OS:
   - Browser:
   - Framework:
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
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: commits-unsubscribe@echarts.apache.org.apache.org

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] [echarts] echarts-bot[bot] commented on issue #17580: [Bug] 动态更新x轴数据排序错乱

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17580:
URL: https://github.com/apache/echarts/issues/17580#issuecomment-1228503055

   @1163849662 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
   <details><summary><b>TRANSLATED</b></summary><br>
   
   **TITLE**
   
   [Bug] Dynamically updates the x-axis data misordered
   </details>


-- 
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: commits-unsubscribe@echarts.apache.org

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