echart GDPデータを描きます

%を拡張{ "base.html" %} 

{%ブロックself_head_css_js%} 
{%エンドブロック%} 

{%}%ブロックmain_content 
    < divのスタイル= "マージン左:は50px;マージン右:は50px;" > 
        < 強い> A GDPとは?< p型> </ p型> 
            &NBSP;  &NBSP; 学名が呼び出された国内総生産は、経済活動の数を生産し、最終的に国です。高いGDP成長率、経済的繁栄、経済発展のより代表的には、より速く、理論的には、投資市場も可能でなければなりません。しかし、地震などのブラインドスポット、多くのもあり、家が倒れ、我々は再アップ彼の家に必要な、または全くない人の土地で無効GDPの結果、高速道路を修復するために、パフォーマンスデータであります良いが、人々は単純に理解することはできません。我々はそのような小さなもの阿呆をしませんでした前に。

            < p型> </ p型> 
            第二に、憲法及び会計方法GDP < p型> </ p型> 
            &NBSP; 1、支出アプローチは、より消費者支出の分類の要約の量によって生産された財やサービスの生産の国家要因の一定期間を置くことです。< P > </ P > 
            &NBSP;  &NBSP; 2、所得アプローチは、結果として得られる和の製造における生産の全所得の要因に行われている、製品のコストであり、ビジネスの観点から収益要素ので(利益を含みます)、この方法は、因子コスト法として知られているように。< p型> </ p型> 
            &NBSP;  &NBSP; 3、製造方法(分野別の法律または増加値法)が製造の観点からのもので、すべてのビジネスユニットは、市場で販売され、新規作成した製品やサービスの生産要素投入産業部門小計一緒に応じた値、。< P > </ P > 

        </ 強い> 
    </ divの> 
    < DIV ID = "GDP1" スタイル=「幅:自動;高さ:400ピクセル;パディングトップ:は50px;フォントファミリ:微軟雅黒;パディング左:40ピクセル; " >> 


    < スクリプトタイプの= "テキスト/ JavaScriptを" > 
        // ------------------------------ ------ GDP -------------------------------------------------- ------------------------------- 
        VAR gdp1Chart = echarts.init(のdocument.getElementById(' GDP1 ' )、'' ;
         // 指定されたデータとグラフCIの
        VARのオプション= { 
            タイトル:{ 
                テキスト:'' 
            }、
            ヒント:{ 
                トリガ:' '  
                axisPointer:{ 
                    タイプ:' クロス' 
                    ラベル:{ 
                        backgroundColorの:' #6a7985 ' 
                    } 
                } 
            }、
            凡例:{ 
                データ:[ ' GDPのアップ' ' GDPの絶対値(RHS)に' ] 
            }、
            グリッド:{ 
                左:'3% ' 
                右:' 4%。' 
                底:' 3%' 
                    タイプ:
                containLabel:
            }、
            ツールボックス:{ 
                特徴:{ 
                    saveAsImage:{} 
                } 
            }、
            x軸:{ 
                タイプ:' カテゴリー' 
                boundaryGap:
                データ:[] 
            }、
            Y軸:[{ 
                タイプ:' ' 
            }、
                { 
                    名前:"GDP絶対量' 
                    {#min:1000年、#} 
                    {#max:6000 、#} 
                    {#interval:1000年、#} 
                    たAxisLabel:{ 
                        フォーマッタ:' {値} ' 
                    } 
                } 
            ]、
            シリーズ:[ 
                { 
                    名:' GDPの絶対量(RHS)' 
                    タイプ:' ' 
                    yAxisIndex:1  
                    データ:[]、
                    マークライン:{ 
                        サイレント:trueに
                        [{:データ
                            YAXIS:100000 
                        }]、

                    }、
                }、
                { 
                    名:' GDPのが成長' 
                    タイプ:' ' 
                    スタック。合計
                    データ:[]、
            //ベースラインを描く6。 マークライン:{ サイレント:
trueに [{:データ YAXIS:6。 }] } } ] ;} // データのGDP絶対量の $に.get(' ://localhost/data/gdp.json HTTP ' の.done()関数(データ){ // フィルデータ gdp1Chart.setOption({ XAXIS:{ データ:Data.Map(関数(項目){ 戻り項目[ 0]; }) }、 シリーズ:[{ // 各シリーズに名前 名:' GDPのが成長' データ:Data.Map(関数(項目){ 戻り項目[ 1 ] [ 0 ]; }) } 、 ] }); }); $に.get(' HTTP://localhost/data/gdp.json ' )の.done(関数(データ){ // フィルデータ }) gdp1Chart.setOption({ XAXIS:{ データ:Data.Map(関数(項目){ 戻り項目[ 0 ]; }) }、 シリーズ:[ { // 各シリーズに名前 名:GDPの絶対的に(R軸)' データ:Data.Map(関数(項目){ 戻り項目[ 1。[] 1。]; ] } }); }); // 単に指定された構成データ項目を使用して、チャートを表示します。 gdp1Chart.setOption(オプション) </ スクリプト> {%エンドブロック%} {%}%ブロックJS {layuiにおける伝統的な値について受信user_edit.html位サブレイヤ}# {%}%の末端ブロック

 

おすすめ

転載: www.cnblogs.com/icemonkey/p/11882344.html