データショー
http://echarts.baidu.com/index.html
なお、画像表示装置であります
公式の例に様々な図を選択することができます。
例をダウンロードすることにより
新echartdome.php
<！DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset = " UTF-8。" >
<！ -導入EChartsファイル- >
<SCRIPT SRC = " echarts.simple.min.js " > </ SCRIPT>
< / HEAD>
<BODY>
< - EChartsドムのサイズ（幅と高さ）を備えて準備する- >！
<DIV ID = " メイン"スタイル= " 幅：600PX;高さ：400ピクセルの; " > </ div>
<タイプ=スクリプトの「テキスト/ JavaScriptを」 >
// ベースの準備ができて、DOM、インスタンスの初期化echarts
するvar myChart = echarts.init（のdocument.getElementById（" メイン' ））;
// 指定されたデータとグラフCIの
VARのオプション= {
タイトル：{
テキスト：' EChartsは例を起動'
}、
ヒント：{}、
凡例：{
データ：[ ' 販売' ]
}、
XAXIS：{
データ：[ 「シャツ」、「セーター」、「シフォンシャツ」、「パンツ」、「ハイヒール」、「靴下" ]
}、
YAXIS：{}、
シリーズ：[{
名：' 売上高' 、
タイプ：' バー' 、
：DATA [ 5。 、20は、36、10、10、20 ]
}]
};
//は単に指定を使用CIのグラフとデータ。
myChart.setOption（オプション）
</ SCRIPT>
</ BODY>
</ HTML>
ブラウザを開き
しかし、我々はphpstudyで実行する必要がありますので、直接ページを開くことができません
index.phpの中にまずechartdome.php（ファイル名は、それを変更することです）
独自のプロジェクトディレクトリを選択し、サイト名を変更し、変更を保存します
hostsファイルを変更します。
この1を追加します。
phpstudyを再起動し、ブラウザを開き、アドレスwww.echart.com/を入力してください
私は今、私たちは今、index.phpファイルを変更する必要があり、echartによってuserdbのを示しmysqlデータベース内のデータのアップフローテーブルを配置する必要があります
変更されたコンテンツ
<！DOCTYPE HTML> <？PHPは、 DBMS $ = ' MySQLを' ; // データベースタイプ $ホスト= ' 192.168.86.131 ' ; // データベースホスト名 $ DBNAME = ' userdbの' ; // 使用してデータベース $ユーザー= " Sqoopを' ; // データベースのユーザー名 $ =パス' Sqoop " ; // 対応するパスワード $ DSN = " $ DBMS：; DBNAME DBNAME = $ホストhost = $ " ; $ DBH = 新新をPDO（$ DSN、ユーザーの$、$パス）; // PDOオブジェクトを初期化 / * あなたはまた、検索操作を実行することができます* / foreachの（$ dbh->クエリ（' 上向流からSELECT * '）AS $行）{ $ X [] = $行[ ' IP ' ]; $ Y [] = $行[ ' SUM ' ]; しますprint_r（$行）; // あなたはエコー（$ GLOBAL）を使用することができ、これらの値は、参照してください } $ json_x = json_encode（$のX）; $ json_y = json_encode（$ Y）; ？> <HTML> <HEAD> <METAのcharset = " UTF-8。"> <！ -ファイル組み込まECharts - > <SCRIPT SRC = " echarts.simple.min.js " > </ SCRIPT> </ HEAD> <BODY> <！ - EChartsを準備するためには、サイズ（幅と高さ）を備えドム- > <DIV ID = " メイン"スタイル= " 幅：600PX;高さ：400ピクセル; " > </ div> <スクリプトタイプ= " テキスト/ JavaScriptを" > // echarts例に基づく準備DOM、初期化 VAR X = <PHPは$ json_x ??エコー> ; VAR Y = <PHPのエコー$ json_y ??> ; VARの myChart = echarts。init（のdocument.getElementById（ " メイン' ））; <！ - @ 指定したデータテーブルとCIの VARオプション= { タイトル：{ テキストは：' EChartsは例を開始する' }、 ツールヒントを：{}、 レジェンド：{ データ：[ ' 販売" ] }、 XAXIS：{ データ：[ 「シャツ」、「セーター」、「シフォンシャツ」、「パンツ」、「ハイヒール」、" ソックス" ] }、 YAXIS：{}、 シリーズ：[{ 名：' 売上高' 、 タイプ：' バー' 、 データ：[ 5、20であり、36、10、10、20 ] }] }; - > VAR =オプション{ タイトル：{ テキスト：「IT 18パームテストデータ」、 言外の意味：' 纯属虚构' }、 ツールチップ：{ トリガ：' 軸' }、 凡例：{ データ：[ ' 蒸发量' ] }、 ツールボックス：{ ショー：真、 特徴：{ マーク：{ショー：真}、 データビュー：{ショー：真：読み取り専用、偽}、 magicType：{ショー：真、タイプ：[ ' 行'、' バー' ]}、 復元：{ショー：真}、 saveAsImage：{ショー：真} } }、 計算可能：真、 x軸：[ { タイプ：' カテゴリー' 、 データ：X } ]、 Y軸：[ { タイプ：' 値を' } ]、 シリーズ：[ { 名：' 蒸发量' 、 種類：「バー ' 、 データ：Y、 markPoint：{ データ：[ {タイプ：' 最大'、名称：' 最大' }、 {タイプ：' 分'、名称：' 最小' } ] }、 マークライン：{ データ：[ {タイプ：' 平均'、名称：' 平均' } ] } } ] }; //単に指定された構成データ項目を使用して、グラフを表示します。 myChart.setOption（オプション）; </ SCRIPT> </ BODY> </ HTML>
ページを更新
