echarts實現動態傳入數據刷新【可執行】

時間 2019-11-29

標籤 echarts 實現動態傳入數據刷新可執行简体版

原文原文鏈接

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="../js/tld/echarts3.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        var myChart;

        function display() {
            myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                title: {
                    text: '異步數據加載示例'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [1, 2, 3, 4, 5, 6]
                }]
            });

            // 初始 option
            option = {
                title: {
                    text: '異步數據加載示例'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: []
                }]
            };
        }

        function fetchData(cb) {
            // 經過 setTimeout 模擬異步加載
            cb({
                categories: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
                data: [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10), Math.random(20)]
            });
        }

        function abc() {
            fetchData(function(data) {
                myChart.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: '銷量',
                        data: data.data
                    }]
                });
            });
        }
    </script>
    <input type="button" value="display" onclick="display()" />
    <input type="button" value="refresh" onclick="abc()" />

</body>

</html>