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 방법은 수조의 첫 번째 데이터를 삭제하고 삭제된 값으로 되돌아오는 것이다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

echarts 도표 선명도 문제 처리

검색: createDom; Layer.prototype 수정은 해당합니다....

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ECharts 동적 업데이트

좋은 웹페이지 즐겨찾기