echart draw GDP data

The extends% { "base.html"%} 

{% Block self_head_css_js%} 
{% endblock%} 

{%}% Block main_content 
    < div style = "margin-left: 50px; margin-right: 50px;" > 
        < strong > a What GDP is the? < the p- > </ the p- > 
            & nbsp;  & nbsp; scientific name is called gross domestic product, is a country in the end produced a number of economic activities. The higher the GDP growth rate, the more representative of economic prosperity, economic development faster, in theory, the investment market should also be possible. But there is also a lot of blind spots, such as an earthquake, the house toppled, we need to re-up his house, or in no man's land to repair a highway, which resulted in an invalid GDP, is the performance data good, but people simply can not understand. Before we did not do such a small thing Simpleton. 

            < The p- > </ the p- > 
            Second, the constitution and accounting methods GDP < the p- > </ the p- > 
            & nbsp; 1, the expenditure approach is to put a certain period of national factors of production of goods and services produced by the amount of consumer expenditure classification summary from. < P > </ P > 
            & nbsp;  & nbsp; 2, income approach is to all income factors of production in production of the resulting sum is made, since the revenue elements from the business point of view that is the cost of the product (including profits ), so this method also known as factor cost method. < The p- > </ the p- > 
            & nbsp;  & nbsp; 3, the production method (sectoral laws or increase value method) is from the production point of view, all business units put into production elements of the new created products and services sold in the market value, according to the industrial sector subtotals together. < P > </ P > 

        </ strong > 
    </ div > 
    < div ID = "GDP1" style = "width: Auto; height: 400px; padding-Top: 50px; font-Family: Microsoft yahei; padding-left : 40px; " >> 


    < Script of the type = "text / JavaScript" > 
        // ------------------------------ ------ GDP -------------------------------------------------- ------------------------------- 
        var gdp1Chart = echarts.init (document.getElementById ( ' GDP1 ' ), '' ) ;
         // the specified data and the chart CI 
        var Option = { 
            title: { 
                text: '' 
            }, 
            ToolTip: { 
                Trigger: ' Axis ' , 
                axisPointer: {
                    type: ' Cross ' , 
                    label: { 
                        the backgroundColor: ' # 6a7985 ' 
                    } 
                } 
            }, 
            Legend: { 
                Data: [ ' of GDP up ' , ' of GDP in absolute terms (RHS) ' ] 
            }, 
            Grid: { 
                left: ' . 3 % ' , 
                right: ' . 4% '  ,
                bottom: ' . 3% ',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: [{
                type: 'value'
            },
                {
                    type: ' Value ' , 
                    name: 'GDP absolute amount ' , 
                    {#min: 1000 , #} 
                    {#max: 6000 , #} 
                    {#interval: 1000 , #} 
                    AxisLabel: { 
                        Formatter: ' {value} ' 
                    } 
                } 
            ], 
            Series: [ 
                { 
                    name: ' the absolute amount of GDP (RHS) ' , 
                    type: ' Line ' , 
                    yAxisIndex: . 1 ,
                    Data: [], 
                    markLine: { 
                        Silent: to true , 
                        Data: [{ 
                            YAXIS: 100000 , 
                        }], 

                    }, 
                }, 
                { 
                    name: ' of GDP grew ' , 
                    type: ' Line ' , 
                    Stack: ' total '　　　　　　　　　　　　// draw baseline. 6 
                    markLine: { ,
                    Data: [],

                        Silent: to true , 
                        Data: [{ 
                            YAXIS: . 6 , 
                        }], 

                    }, 

                }, 


            ] 
        }; 

        // of GDP absolute amount of data 
        $ .get ( ' HTTP: //localhost/data/gdp.json ' ) .done ( function (data) {
             // fill data 
            gdp1Chart.setOption ({ 
                XAXIS: { 
                    data: Data.Map ( function (Item) {
                         return Item [ 0]; 
                    }) 
                }, 
                Series: [{ 
                    // The names to a respective series 
                    name: ' of GDP grew ' , 
                    Data: Data.Map ( function (Item) {
                         return Item [ . 1 ] [ 0 ]; 
                    }) 
                } , 

                ] 
            }); 
        }); 


        $ .get ( ' HTTP: //localhost/data/gdp.json ' ) .done ( function (data) {
             // fill data
            gdp1Chart.setOption ({ 
                XAXIS: { 
                    Data: Data.Map ( function (Item) {
                         return Item [ 0 ]; 
                    }) 
                }, 
                Series: [ 
                    { 
                        // The names to a respective series 
                        name: ' of GDP in absolute terms (R axis) ' , 
                        Data: Data.Map ( function (Item) {
                             return Item [ . 1 ] [ . 1 ];  
                        })
                    }, 
                ] 
            }); 
        }); 

        // use just specified configuration data items and display the chart. 
        gdp1Chart.setOption (Option); 

    </ Script > 


{% endblock%} 

{%}% Block JS 
    {# sublayer of the receiving user_edit.html for the traditional values in layui} # 

{%}% endblock