Echartを描画するためにファンを使用してJavawebチャート

JSON変換の依存関係がインポートさ：Baiduのネットワークディスクリンク：https://pan.baidu.com/s/1c3UMzCjJZ_-c5-uEy4t_9A 抽出コード：uqmj

機能：データベースの異なる年からのクエリデータと描画円グラフ

サーブレット：

    保護された ボイドのdoGet（HttpServletRequestのリクエスト、HttpServletResponseの応答）が 
             スローServletExceptionがは、IOException { 
        QueryFromMySql queryFromMySql = 新しい新しいQueryFromMySqlを（）; 
        のArrayList <LeiXinTj> leiXinTjs queryFromMySql.QueryBySend_time =（）;    // データベースの結果が得られた 
        「テキスト/ HTML（response.setContentTypeを;のcharset = UTF-8 " ）; 
        JSONArray JSONArray = JSONArray.fromObject（leiXinTjs）;    // JSONへのデータタイプ
        のSystem.out.println（jsonArray.toString（））; 
        のPrintWriterライター = response.getWriter（）。
        writer.println（JSONArray）;
        writer.flush（）; 
        writer.Close（）; 
    } 
　　データベースの結果：

HTML：

ます。<script type = "text / javascriptの" SRC = "echarts.min.js"> </ SCRIPT> 
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "jqueryの-1.10.2.min.js"> </ SCRIPT> 
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "jqueryの-1.11.3.min.js"> </ SCRIPT> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
window.onload = 関数（）{ 
    jQueryの（ドキュメント）。レディ（関数（$）{ 
         
         VAR myChart = echarts.init（のdocument.getElementById（ 'コンテナ' ））;
          VARのnav =のdocument.getElementById（ "NAV" ）;
             VARの REG = 新しい正規表現（「（D =）（[AZ ] *）」）;
            VAR STR = window.location.search.substr（1 ）.match（REG）。
                nav.innerHTML =「<Iクラス= "ホイIconFont"> xe67f＆＃</ I>まず<スパンクラス= "C-グレー EN">＆GT; </ span>の統計年間<スパンクラス=「C-グレーEN ">＆GT; < /スパン> チャート<クラス=" btn- BTN成功半径r "スタイル="行の高さ：1.6em;マージントップ：3px "のhref =" javascriptの：location.replace（位置.HREF）; "タイトル="リフレッシュ"> <Iクラス="ホイ-IconFont「> xe68f＆＃; </ I> </a>の" ; CIは//チャート設定するvar   オプションを= { 
            タイトル：{/ /チャートに示したタイトル
                テキスト：年次統計（2020年2月13日に2016年11月22日） " 、
                言外の意味：「実際のデータ」、
                X-：'中心' 
            }、
            ツールチップ：{ 
                トリガ： 'アイテム' 、
         


                フォーマッタ： "{A} {B}：{C}（{D}％）" 
            }、
            凡例：グラフに示されている{//小さな正方形
                オリエント： '縦長' 、
                左： 20は、
                データ：[] 
            }、
            ツールボックス：{ 
                表示：trueに、
                特徴：{ 
                    マーク：{表示：真へ}、
                    データビュー：{表示：trueに、読み取り専用：偽へ}、
                    magicType：{ 
                        表示：trueに、
                        // タイプ：[ 'PIE'、 'に漏斗'] 
                    }、
                    復元：{表示：真へ}、
                    saveAsImage：{表示：真へ} 
                } 
            }、
            計算可能：trueに、
            シリーズ：//セクタが設け
                { 
                    名： '年次統計、
                    タイプの： 'PIE' 、
                    RADIUS：[ '20％ ''75％' ]、
                    センター：[ '50％ ''60％' ]、
                    バツ：％'50 '                // 上漏斗のための 
                    最大：40、                 // 上漏斗のための 
                    ソート：'、「昇順      // 上の漏斗のための
                    データ：[] 
                } 
            ] 
        }; 
         
         
        //は、関数呼び出し
        myChart.setOption（オプション）; 

        $アヤックス（{JSONデータは、Ajaxとの上方に設けられたデータにつながる@変換サーブレット・
            タイプ： "POST" 、
            非同期を：trueに、
            ：URL "../QueryBySend_time" 、
            タイプ： "POST" 、 
            データ。
                {
                 D [i]は.num。"方法"： "シャン" 
                }、
            データ型： "JSON" 、
            
            成功：関数（結果）{
                // 警告（result.selected）。
                もし（結果）
                { 
                        VARの D = 結果。
                        VaRの leblist = [];
                        VAR valuelist2 = []; 
                     
                    ため（VAR iが= 0; I <d.length; I ++ ）{ 
                     
                             VAR M = {}; 
                             
                            M [ "値"] = 
                            M [ "名前"] = D [i]の.nameの。
                             
                            valuelist2.push（M）; //データセクタ示す
                            （[I] .nameのD）leblist.push ; //セクタ次小さい格子表示データへ

                    } 
                     
                    // データにデータを追加チャート
                        myChart.setOption（{ 
                            凡例：{ 
                                データ：leblist 
                            }、
                            シリーズ：[ 
                            { 
                                名： '毎年の統計' 、
                                データ：valuelist2 
                            }] 
                        }）; 
                          
           } 
            }、
            エラー：関数（errorMsg内容）{
                // 実行する機能要求は失敗し 
            、警告（ "要求データが失敗した！" ）;
            // myChart.hideLoading（）; 
            } 
        }）; 
        // 取得したプロセスデータ
         
        }）; 
}
 </ SCRIPT> 
<BODY> 
<クラスNAV = "ブレッドクラム" ID = "NAV"> 
</ NAV> 
の<divクラス= "ページ-コンテナ"> 
    <DIV ID = "コンテナ"スタイル= "分幅：700px;高さ：400ピクセル"> </ div> 
< / DIV>

レンダリング：

Echartを描画するためにファンを使用してJavawebチャート

おすすめ