echarts chart data acquired dynamically

Recent developments use echarts charts show data, you need to call back the interface, write a blog to record what the implementation process, end with source code

First, prepare a json file echarts.json (name does not matter), it is used to obtain data from analog background

The second step on echarts official website to download, or direct references js generate charts used to give official website here: https://www.echartsjs.com/index.html

Then directly referenced in the page

Here are echarts.js download link: https://echarts.baidu.com/dist/echarts.min.js

The third step in preparing a container body, to display the graph

Then the js initialized echarts object directly on the code

<script type="text/javascript">
            var container = document.getElementById('container');
            // initialize the object loaded myContainer
            var myContainer = echarts.init(container);
            // before the data has not been acquired, display loading loading animation
            myContainer.showLoading();

            function bindData() {
                // For obvious effect, we have done a delayed read data
                setTimeout(function() {
                    // asynchronous load data, get json file requests we have just prepared a corresponding interface development official calls
                    $.get('js/echarts.json', function(res) {
                        console.log(res)
                        // Get the data, hiding loading animation
                        myContainer.hideLoading();
                        myContainer.setOption(option = {
                            title: {
                                text: 'echartsLoading loading'
                            },
                            tooltip: {},
                            legend: {},
                            // xAxis data representative of the x-axis
                            xAxis: {
                                data: res.name,
                                // field from the corresponding field inside json
                            },
                            // yAxis data representative of the y-axis, do not write data automatically adapt
                            yAxis: {},
                            // series represents the mouse was suspended when prompted on the corresponding icon Information
                            series: [{
                                name: 'Visits'
                                type: 'bar',
                                data: res.data,
                                // field from the corresponding field inside json
                            }]
                        });
                    })
                }, 2000)
            }
            bindData ();
        </script>

See here if you can generate a histogram, then congratulations, you already can get the data from the background

If you do not see all the code words of it, Come on

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <Title> echarts- asynchronously load data </ 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');
            // initialize the object loaded myContainer
            var myContainer = echarts.init(container);
            // before the data has not been acquired, display loading loading animation
            myContainer.showLoading();

            function bindData() {
                // For obvious effect, we have done a delayed read data
                setTimeout(function() {
                    // asynchronous load data, get json file requests we have just prepared a corresponding interface development official calls
                    $.get('js/echarts.json', function(res) {
                        console.log(res)
                        // Get the data, hiding loading animation
                        myContainer.hideLoading();
                        myContainer.setOption(option = {
                            title: {
                                text: 'echartsLoading loading'
                            },
                            tooltip: {},
                            legend: {},
                            // xAxis data representative of the x-axis
                            xAxis: {
                                data: res.name,
                                // field from the corresponding field inside json
                            },
                            // yAxis data representative of the y-axis, do not write data automatically adapt
                            yAxis: {},
                            // series represents the mouse was suspended when prompted on the corresponding icon Information
                            series: [{
                                name: 'Visits'
                                type: 'bar',
                                data: res.data,
                                // field from the corresponding field inside json
                            }]
                        });
                    })
                }, 2000)
            }
            bindData ();
        </script>
    </body>
</html>

json file

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

Renderings

Reproduced in: https: //www.cnblogs.com/songzxblog/p/11383879.html