echarts圖表數據信息動態獲取

最近開發項目用到echarts圖表展現數據信息，須要調用後臺接口，寫一篇博客來記錄一下實現過程，末尾附源碼javascript

首先準備一個json文件echarts.json（名字無所謂），用來模擬從後臺獲取數據 css

第二步上echarts官網下載，或直接引用生成圖表用到的js，這裏給出官網：https://www.echartsjs.com/index.htmlhtml

而後在頁面直接引用 java

這裏給出echarts.js的下載連接：https://echarts.baidu.com/dist/echarts.min.jsjson

第三步在body中準備一個容器，用來顯示圖表echarts

緊接着在js中初始化echarts對象，直接上代碼異步

<script type="text/javascript">
            var container = document.getElementById('container');
            // 初始化加載對象myContainer
            var myContainer = echarts.init(container);
            //未獲取數據前，顯示loading加載動畫
            myContainer.showLoading();

            function bindData() {
                //爲了效果明顯，咱們作了延遲讀取數據
                setTimeout(function() {
                    //異步加載數據,get請求咱們剛剛準備的json文件,正式開發中調用相應的接口
                    $.get('js/echarts.json', function(res) {
                        console.log(res)
                        //獲取數據後，隱藏loading動畫
                        myContainer.hideLoading();
                        myContainer.setOption(option = {
                            title: {
                                text: 'echartsLoading加載'
                            },
                            tooltip: {},
                            legend: {},
                            // xAxis表明x軸的數據
                            xAxis: {
                                data: res.name,
                                // 字段對應從json裏面的字段
                            },
                            // yAxis表明y軸的數據,不寫會自動適應數據
                            yAxis: {},
                            // series表明鼠標懸浮到圖標上時提示的對應信息
                            series: [{
                                name: '訪問量',
                                type: 'bar',
                                data: res.data,
                                // 字段對應從json裏面的字段
                            }]
                        });
                    })
                }, 2000)
            }
            bindData();
        </script>

看到這裏若是能生成一個柱狀圖，那麼恭喜你已經能夠從後臺獲取數據了ide

若是尚未的話就看所有代碼吧，加油哦post

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>echarts-異步加載數據</title>
        <link rel="stylesheet" href="11.scss">
        <script src="js/eacher.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
        <style>
            #container{
                width: 500px;
                height: 400px;
                border: 1px solid #ccc;
                /**/
            }
    </style>
    </head>
    <body>
        <div id="container"></div>
        <!--  -->
        <script type="text/javascript">
            var container = document.getElementById('container');
            // 初始化加載對象myContainer
            var myContainer = echarts.init(container);
            //未獲取數據前，顯示loading加載動畫
            myContainer.showLoading();

            function bindData() {
                //爲了效果明顯，咱們作了延遲讀取數據
                setTimeout(function() {
                    //異步加載數據,get請求咱們剛剛準備的json文件,正式開發中調用相應的接口
                    $.get('js/echarts.json', function(res) {
                        console.log(res)
                        //獲取數據後，隱藏loading動畫
                        myContainer.hideLoading();
                        myContainer.setOption(option = {
                            title: {
                                text: 'echartsLoading加載'
                            },
                            tooltip: {},
                            legend: {},
                            // xAxis表明x軸的數據
                            xAxis: {
                                data: res.name,
                                // 字段對應從json裏面的字段
                            },
                            // yAxis表明y軸的數據,不寫會自動適應數據
                            yAxis: {},
                            // series表明鼠標懸浮到圖標上時提示的對應信息
                            series: [{
                                name: '訪問量',
                                type: 'bar',
                                data: res.data,
                                // 字段對應從json裏面的字段
                            }]
                        });
                    })
                }, 2000)
            }
            bindData();
        </script>
    </body>
</html>

json文件動畫

{
    "name":["iso","english","china","ufo","seo"],
    "data":[400,200,300,100,11]
}

效果圖

轉載於:https://www.cnblogs.com/songzxblog/p/11383879.html