【ECharts】04 資料互動

阿新 • • 發佈：2020-08-16

ECharts 非同步載入資料

ECharts 通常資料設定在 setOption 中，如果我們需要非同步載入資料，可以配合 jQuery等工具，在非同步獲取資料後通過 setOption 填入資料和配置項就行。

json 資料結構：

{
    "data_pie" : [
    {"value":235, "name":"視訊廣告"},
    {"value":274, "name":"聯盟廣告"},
    {"value":310, "name":"郵件營銷"},
    {"value":335, "name":"直接訪問"},
    {"value":400, "name":"搜尋引擎"}
    ]
}

菜鳥官網的介面傳輸失敗，就只能拉下來放本地了

介面就寫本地檔案的位置進行獲取：

<div id="main" style="width: 600px;height:400px;"></div>

<!-- JQuery & ECharts -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></ 
script>

<script type="text/javascript">
    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));

    // https://www.runoob.com/static/js/echarts_test_data.json
    $.get('data.json', function (data) {
        myChart.setOption({
            series : [
                {
                    name:  
'訪問來源',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    data:data.data_pie
                }
            ]
        })
    }, 'json')
</script>

載入效果設定：

如果非同步載入需要一段時間，我們可以新增 loading 效果，ECharts 預設有提供了一個簡單的載入動畫。

只需要呼叫 showLoading 方法顯示。資料載入完成後再呼叫 hideLoading 方法隱藏載入動畫：

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 開啟 loading 效果
$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
    myChart.hideLoading();  // 隱藏 loading 效果
    myChart.setOption({
        series : [
            {
                name: '訪問來源',
                type: 'pie',    // 設定圖表型別為餅圖
                radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

動態渲染：

<div id="main" style="width: 600px;height:400px;"></div>

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script type="text/javascript">
    var base = +new Date(2014, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var date = [];

    var data = [Math.random() * 150];
    var now = new Date(base);

    function addData(shift) {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
        date.push(now);
        data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

        if (shift) {
            date.shift();
            data.shift();
        }

        now = new Date(+new Date(now) + oneDay);
    }

    for (var i = 1; i < 100; i++) {
        addData();
    }

    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            boundaryGap: [0, '50%'],
            type: 'value'
        },
        series: [
            {
                name:'成交',
                type:'line',
                smooth:true,
                symbol: 'none',
                stack: 'a',
                areaStyle: {
                    normal: {}
                },
                data: data
            }
        ]
    };

    setInterval(function () {
        addData(true);
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                name:'成交',
                data: data
            }]
        });
    }, 500);

    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option)
</script>