ECharts 동적 업데이트

먼저 ECharts 인스턴스를 초기화합니다.

    var myChart = echarts.init(document.getElementById("main"));

이어서 몇 가지 내용을 마음대로 넣는다.

myChart.setOption({
        title: {
            text: ' '
        },
        tooltip: {},
        legend: {
            data: [' ']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: ' ',
            type: 'bar',
            boundaryGap:false,
            data: []
        }]
    });

모든 동적 업데이트는 데이터를 수정한 후에 set Option을 하면 된다. 예를 들어 위의 도표에 내용이 없다. 그리고 다음과 같다.

    var names = [1, 2, 3];
    var nums = [3, 4, 5];
    myChart.setOption({
            xAxis: {
                data: names
            },
            series: [{
                name: ' ',
                data: nums
            }]
        })

이렇게 하면 비동기적으로 내용을 갱신할 수 있다.중간에loading 페이지를 추가할 수 있습니다. 아래 코드를 통해 시작합니다

    myChart.showLoading();

다음 코드를 통해 닫기

    myChart.hideLoading()

물론names[]와nums[]를 끊임없이push하는 방법으로 새로운 데이터를 동적으로 추가할 수 있습니다.

        names.push(nname);
        nums.push(nnum);

하지만 이런 도표는 점점 밀집되기 때문에 판단할 수 있다.
4

        if (names.length>7){
            names.shift();
            nums.shift();
        }

shift 방법은 수조의 첫 번째 데이터를 삭제하고 삭제된 값으로 되돌아오는 것이다.