円グラフ：
環境：Echarts 3.19 vs 2013
実装方法：AJAX+ASHX+JSON
注：公式Webサイトの必要な形式は[{value：23、name： 'xxxx'}]です。
特定のコードについては、見下ろしてください。
<！ - ファイルを引用してください最初に引用してください - > <スクリプトsrc = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script>
ページセクションにDIVを設定するだけです
<div> <入力タイプ= "ボタン" id = "btngo" value = "pie"/> </div> <div id = "contanis"> </div>
次はJSパートです。実際、EchartsはまだHTML5のキャンバンに関連しています。知りたい場合は、情報を確認できます。
$（ "＃btngo"）。クリック（function（）{//クリックイベントがここで使用されます。もちろん、これは条件付きクエリvar dom = document.getelementbyid（ 'contanis'）; var mycharts = echarts.init（dom）; option = {title：{text： 'department latio'、 'suptext：' '' ne suptext： 'test'： 'suptex {trigger： 'item'、formatter： "{a} <br/> {b}：{c}（{d}％）"}、legend：{orient： 'vertical'、left： 'left'、data：[]}、series：[{name： '2012'、type： 'pie'、radius：'55％ '、'50％'、'50％ '、'50％ []、itemStyle：{shadowblur：10、shadowoffsetx：0、shadowcolor： 'rgba（0、0、0、0.5）' //これはh5}}}}}};次はajax部分です。データの動的負荷は基本的な問題です。とても退屈です。次の人生でこのメンポスープのボウルをやります。 UIデザインをします。
$ .ajax（{type： "get"、async：true、// async request（synchronous requestはブラウザをロックします。ユーザーのその他の操作は、実行前に完了するリクエストを待つ必要があります）url： "../handler/departmenthandler.ashx"、data：{}、// demo no条件データ： {for（var i = 0; i <result.length; i ++）{name.push（result [i] .name）; mycharts.setoption（{//データチャート凡例：{data：name}、series：[{data：result}]}）; 失敗した！"）;}}）;ASHXの部分は、データを単純にシリアル化するためにはるかに簡単です
datatable result = bll.department.getDeptNumber（）; list <Object> list = new list <object>（）; foreach（datarow dr in result.rows）{// echartsに必要な形式を添付してください：[{value：335、name： 'direct access'}] deart d = new deart（）; d.value = convert.toint32（ "nom dr ["d_name"]。toString（）; list.add（d）;} javascriptserializer jss = new javascriptserializer（）; string json = jss.serialize（list）; public class deart //実際には、これが出てくるように自分自身を定義する必要はありません。セット; } public string name {get;セット; }}レンダリングを添付します：
バーチャート：
環境：Echarts 3.19 vs 2013
実装方法：AJAX+ASHX+JSON
注：公式ウェブサイトに必要な形式は次のとおりです。[5,6,7,9,34]アレイタイプ
特定のコードについては、見下ろしてください。
<！ - js code-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script> <div> <％----ボタントリガー - ％ </div> <％ - divを宣言してキャンバスによって描画された画像をインストールします - ％> <div id = "contanis"> <script type = "text/javascript"> $（ "＃btncanv"）。 echarts.init（dom）; mychart.setoption（{title：{text： 'async data loading example' // image title}、tooltip：{}、legned：{data： 'departay人口']}、xaxis：{data：[]}、yaxis：{}、series： 'name：' be 'be' be '、' be '、' be 'be' be 'be' be 'be' be 'be' be 'be' be 'be' be 'ber：データ：[] //ここで空の問題でAjax値を割り当てる}]}）;古いルールはajaxの部分です：
mychart.showloading（）; //データがロードされる前に、単純なロードアニメーションが表示されます。 var names = []; //カテゴリアレイ（実際にはx軸座標値を保持するために使用されます）var nums = []; //販売配列（実際にはy座標値を保持するために使用されます）$ .ajax（{type： "post"、async：true、// async request（同期リクエストはブラウザをロックします）ユーザーの他の操作は実行前に完了する必要があります） {}、datAtype： "json"、// jsonsuccess：function（result）{//リクエストが成功したときに関数コンテンツを実行します。 Array}（var i = 0; i <result.length; i ++）{nums.push（result [i] .values）; }]}）;}}、error：function（errormsg）{//要求が失敗したときにこの関数アラートを実行します（ "文字要求データが失敗！"）;}}}）;レンダリングを添付します：
実際、オプション設定はAjaxに配置でき、効果を生成し、見やすくなります。
例としてパイチャートを取ります。コードはこのように書くことができます
$ .ajax（{type： "get"、async：true、// async request（synchronous requestはブラウザをロックします。ユーザーのその他の操作は、実行前に完了するリクエストを待つ必要があります）url： "../handler/departmenthandler.ashx"、data：{}、{}、// demo no条件データ： for（var i = 0; i <result.length; i ++）{name.push（result [i] .name）; （{d}％） "}、legend：{orient： 'vertical'、left： 'left'、name：name}、series：[{name： '2012'、type： 'pie'、radius：'55％ '、center：['50％'、'60％ ']、データ：結果、アイテムスティール：{shadowblur：{shadowblur：0、shadowblur： 'rgba（0、0、0、0.5）'}}]}、function（errormsg）{//リクエストが失敗したとき（ "文字要求データが失敗！}）;損失に苦しんでいる新人としてこれを学びたい場合は、最初に公式の例を見てから、あなたのアイデアを明確にして始めてください
上記は、ECHARTS 3.19に基づいた一般的に使用されるグラフィックス（非静的）について紹介された関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！