liaomy0207 opened a new issue #14573:
URL: https://github.com/apache/echarts/issues/14573


   ### Version
   5.0.2
   
   ### Steps to reproduce
   官网示例中,打开“自定义系列”的“性能分析图”。
   这边我把“dataCount”改成1000,为了方便展示问题,这里不用原例中的随机数data。详细配置如下
   
   var data = [];
   var dataCount = 1000;
   var startTime =  new Date();
   var categories = ['categoryA', 'categoryB', 'categoryC'];
   var types = [
       {name: 'JS Heap', color: '#7b9ce1'},
       {name: 'Documents', color: '#bd6d6c'},
       {name: 'Nodes', color: '#75d874'},
       {name: 'Listeners', color: '#e0bc78'},
       {name: 'GPU Memory', color: '#dc77dc'},
       {name: 'GPU', color: '#72b362'}
   ];
   
   // Generate mock data
   categories.forEach(function (category, index) {
       let start = 0;
       for (var i = 0; i < dataCount; i  ) {
           data.push({
               name: ""   index   i,
               value: [
                   index,
                   i start,
                   i 1 start,
                   1
               ],
               itemStyle: {
                   normal: {
                       color: "black"
                   }
               }
           });
           start  
       }
   });
   
   function renderItem(params, api) {
       var categoryIndex = api.value(0);
       var start = api.coord([api.value(1), categoryIndex]);
       var end = api.coord([api.value(2), categoryIndex]);
       var height = api.size([0, 1])[1] * 0.6;
   
       var rectShape = echarts.graphic.clipRectByRect({
           x: start[0],
           y: start[1] - height / 2,
           width: end[0] - start[0],
           height: height
       }, {
           x: params.coordSys.x,
           y: params.coordSys.y,
           width: params.coordSys.width,
           height: params.coordSys.height
       });
   
       return rectShape && {
           type: 'rect',
           transition: ['shape'],
           shape: rectShape,
           style: api.style()
       };
   }
   
   option = {
       tooltip: {
           formatter: function (params) {
               return params.marker   params.name   ': '   params.value[3]   ' 
ms';
           }
       },
       title: {
           text: 'Profile',
           left: 'center'
       },
       dataZoom: [{
           type: 'slider',
           filterMode: 'weakFilter',
           showDataShadow: false,
           top: 400,
           labelFormatter: ''
       }, {
           type: 'inside',
           filterMode: 'weakFilter'
       }],
       grid: {
           height: 300
       },
       xAxis: {
           min: 0,
           scale: true,
           axisLabel: {
               formatter: function (val) {
                   return val   ' ms';
               }
           }
       },
       yAxis: {
           data: categories
       },
       series: [{
           type: 'custom',
           renderItem: renderItem,
           itemStyle: {
               opacity: 0.8
           },
           encode: {
               x: [1, 2],
               y: 0
           },
           data: data
       }]
   };
   
   ### What is expected?
   在实际项目中有用到这个自定义图。数据量少的时候正常,数据量比较多(几千条)的时候就会报错。
   
   ### What is actually happening?
   通过鼠标缩放,一直缩放,会报错
   
   Cannot read property '3' of undefined
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
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:
[email protected]



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

Reply via email to