円グラフ:
環境: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のウェブサイトへのご支援ありがとうございます!