파이 차트 :
환경 : Echarts 3.19 대 2013
구현 방법 : AJAX+ASHX+JSON
참고 : 공식 웹 사이트의 필요한 형식은 [{value : 23, name : 'xxxx'}] 키 이름을 잘못 쓰지 마십시오.
특정 코드의 경우 아래를 살펴보십시오.
<!-First-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script>를 인용하십시오
페이지 섹션에서 DIV를 설정합니다
<div> <입력 유형 = "button"id = "btngo"value = "Pie"/> </div> <div id = "Contanis"> </div>
다음은 JS 부분입니다. 실제로, Echarts는 여전히 HTML5의 캔버스와 관련이 있습니다. 알고 싶다면 정보를 확인할 수 있습니다.
$ ( "#btngo"). Click (function () {// 클릭 이벤트가 여기에서 사용됩니다. 물론, 이것은 조건부 쿼리 var var var doct.getElementById ( 'contanis'); var myCharts = echarts.init (dom); 옵션 = {text : 'department ratio', subtet : 'x :'center ', x :'subtet : 'subtet : {트리거 : '항목', 포맷터 : "{a} <br/> {b} : {c} ({d}%)"}, 범례 : {Orient : 'vertical', 왼쪽 : '왼쪽 :'데이터 : []}, 시리즈 : [{name : '2012', 'pie', 'pie', radius : ''55%' [], ItemStyle : {empasis : {ShadowBlur : 10, ShadowOffsetX : 0, ShadowColor : 'RGBA (0, 0, 0, 0.5)'// 어떻게 .5가 될 수 있습니까?다음은 Ajax 부분입니다. 데이터의 동적 로딩이 근본적인 문제입니다. 너무 지루합니다. 다음 생 에서이 멘포 수프 그릇을 할게요. UI 디자인을하겠습니다.
$ .ajax ({type : "get", async : true, // async 요청 (동기 요청은 브라우저를 잠그고 사용자의 다른 작업은 실행 전에 완료하기를 기다려야합니다) URL : "../handler/departmenthandler.ashx", data : {{}, // 조건부 데이터 유형 : // return data form : // jsonsucess : // return json " {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 <bood> list = new list <bood> (); foreach (datarow dr in result.rows) {// echarts에 필요한 형식을 첨부합니다 : [{value : 335, 'direct access'}] deart d = new deart (); d.value = convert.toint32 (dr [number "); dr [ "d_name"]. toString (); list.add (d);} javascriptteserializer jss = new javascriptSerializer (); String JSON = jss.serialize (list); public class deart // 실제로, 당신은이면 자신을 정의 할 필요가 없으므로, 그 가치가 int {public int value {get; 세트; } 공개 문자열 이름 {get; 세트; }}렌더링 첨부 :
막대 차트 :
환경 : Echarts 3.19 대 2013
구현 방법 : AJAX+ASHX+JSON
참고 : 공식 웹 사이트의 필요한 형식은 다음과 같습니다. [5,6,7,9,34] 배열 유형
특정 코드의 경우 아래를 살펴보십시오.
<!-js code-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <scrip src = "../ scripts/echarts/echarts.min.js"> </script> <div> <%-----%triggers- <input type = "id"btncanv "btncanv. Pikachu "/> </div> <%-캔버스로 그려진 이미지를 설치하도록 DIV를 선언합니다-%> <div id ="contanis "> <script type ="text/javaScript "> $ ("#btncanv "). click (function () {// Domvar dom = document.getElementByid ("Contanis "); eCharts.init (dom); mychart.setOption ({title : {text : 'astync data loading example'// image title}, 툴팁 : {}, legend : {data : [ 'Department']}, xaxis : {data : []}, yaxis : {{{name : 'type : // type :'re on bare on re on one re on one re on one reance ' 데이터 : [] // ajax 값을 할당하기 위해 여기에서 비어있는 문제}});이전 규칙은 Ajax 부분입니다.
mychart.showloading (); // 데이터가로드되기 전에 간단한로드 애니메이션이 표시됩니다. var names = []; // 카테고리 배열 (실제로 x 축 좌표 값을 유지하는 데 사용) var nums = []; // 판매 배열 (실제로 y- 코디네이트 값을 보유하는 데 사용) $ .ajax ({type : "post", async : true, // async request (동기 요청은 브라우저를 잠그고, 사용자의 다른 작업은 실행 전에 완료되기까지 기다려야합니다. {}, datatype : "json", // data form jsonsuccess : function (result) {// 요청이 성공할 때 함수 내용을 실행하고 (rets) {for (var i = 0; i ++) {rength.push (result [i] .name); (var i = 0; i <rength.length; i ++) {nums.push (result [i] .values); }]});}}, error : function (errormsg) {// 요청이 실패하면이 함수 경고를 실행합니다 ( "문자 요청 데이터 실패!");렌더링 첨부 :
실제로 옵션 설정은 Ajax에 배치 될 수 있으며 효과를 생성하고 쉽게 볼 수 있습니다.
원형 차트를 예로 들어보십시오. 코드는 이렇게 작성할 수 있습니다
$ .ajax ({type : "get", async : true, // async 요청 (동기 요청은 브라우저를 잠그고 사용자의 다른 작업은 실행 전에 완료되기까지 기다려야합니다) URL : "../handler/departmenthandler.ashx", data : {{}, // demo no condational dataType : "JSON", json " for (var i = 0; i <result.length; i ++) {name.push (result [i] .name)} {text : {텍스트 : '부서 인구 비율', '테스트 데이터', '센터'}, 도구 : {trigger : 'item', formatter ({d}%) "}, 범례 : {동양 : '수직', 왼쪽 : '왼쪽 :'왼쪽 ', 데이터 : 이름}, 시리즈 : [{name :'2012 ', type :'pie ', radius : '55%', ''55%', '60%', '60%'], 결과, 항목 스타일 : {emplasis : {shadowoffsetx : 0, 섀도우 텍사스 : 0, Shadowspetx : 0, 섀 'rgba (0, 0, 0, 0.5)'}}};손실을당한 신인으로서 이것을 배우고 싶다면 먼저 공식적인 예를 살펴보고 아이디어를 명확히하고 시작하십시오.
위는 Echarts 3.19를 기반으로 일반적으로 사용되는 그래픽 (비 정적)에 대해 귀하에게 소개 된 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!