[Apache Echarts] Bar race 작동 오류

과제를 진행하면서 Echarts를 사용해보게 되었다. 가로형 바 차트 중 Bar race라는 차트가 멋져보여서 사용해보고 싶었는데 몇가지 오류가 발생했고, 고쳐지지가 않았다. 내가 소스코드를 잘못 사용하는건가 싶어서 Echarts Example 사이트에서도 수정해가며 지켜봤는데.. 음... 

 option = {
     xAxis: {
     	max: '100',
     },
     yAxis: {
         type: 'category',
         data: medDeptNmList,
         inverse: true,
         animationDuration: 300,
         animationDurationUpdate: 300,
         max: 6 // only the largest max+1 bars will be displayed
     },
     series: [{
         realtimeSort: true,
         name: '예약율',
         type: 'bar',
         data: dataList,
         label: {
             show: true,
             position: 'right',
             valueAnimation: true
         }
     }],
     legend: {
     	 show: true
     },
         animationDuration: 0,
         animationDurationUpdate: 3000,
         animationEasing: 'linear',
         animationEasingUpdate: 'linear'
     };

    function run () {
    	var data=option.series[0].data;

        for (var i = 0; i < data.length; i++) {
        //console.log("data[i]: "+dataList[i]);
        //console.log("analRsvRatioList[i]: "+analRsvRatioList[i]);
            if(data[i] < analRsvRatioList[i]){
                if (Math.random() > 0.9) {
                    var plus = (Math.random()*50).toFixed(2);
                    console.log("plus: "+plus);
                    data[i] += plus;
                } else {
                    var plus = (Math.random()*5).toFixed(2);
                    console.log("plus: "+plus);
                    data[i] += plus;
                }
            }
        }
    	thirdChart.setOption({
          series:[{
          data:data
          }]
        });
    }

    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 1000);

    option && thirdChart.setOption(option);

1. 그래프가 중간에 사라지는 현상.. 이 현상은 echarts edit example에서는 나타나지 않았고 (xAxis라인만 사라졌다) 로컬에서 돌려볼 때 나타났다.
2. xAxis의 max값을 설정해도 데이터 수치가 max값보다 더 올라간다; 예를 들어 1000을 설정하고, run 함수에 data[i] < 1000이라는 조건을 주었음에도 데이터는 일파만파 뛰어올라간다. 언젠가 멈추기는 하는데 이게 기준이 뭔지 잘 모르겠다. 
3. 레이스를 안 함. 예를 들어 실제 데이터는 40개가 있고, 상위 5개만 보여주고 싶은데 엎치락뒤치락하면서 자리를 바꾸는게 아니고 처음부터 가장 높은 수의 데이터부터 순서대로 고정돼있고 레이싱을 벌이지 않는다. 

일반 바 데이터로 바꾸니까 깔끔하게 잘 돌아가긴 하는데... 바 레이싱 문제가 뭔지 넘 궁금. 이것도 나중에 소스 받아서 다시 분해해 볼 생각이다. 

 

▼ bar race 차트를 사용해볼 수 있는 링크

Examples - Apache ECharts

 

Examples - Apache ECharts