แผนภูมิวงกลม:
สิ่งแวดล้อม: echarts 3.19 เทียบกับ 2013
วิธีการใช้งาน: AJAX+ASHX+JSON
หมายเหตุ: รูปแบบที่ต้องการของเว็บไซต์อย่างเป็นทางการคือ [{value: 23, ชื่อ: 'xxxx'}] โปรดอย่าเขียนชื่อคีย์ไม่ถูกต้อง
สำหรับรหัสเฉพาะโปรดมองลงไป
<!-โปรดอ้างอิงไฟล์แรก-> <สคริปต์ src = "../ สคริปต์/jQuery-1.8.2.min.js"> </script> <script src = "../ สคริปต์/echarts/echarts.min.js"> </script>
เพียงตั้งค่า div ในส่วนหน้า
<div> <อินพุต type = "ปุ่ม" id = "btngo" value = "PIE"/> </div> <div id = "contanis"> </div>
ถัดไปคือส่วน JS ในความเป็นจริง echarts ยังคงเกี่ยวข้องกับผ้าใบใน HTML5 หากคุณต้องการทราบคุณสามารถตรวจสอบข้อมูล
$ ("#btngo") คลิก (ฟังก์ชั่น () {// เหตุการณ์คลิกที่นี่แน่นอนนี่เป็นการจำลองเมื่อคุณมีแบบสอบถามแบบสอบถามเงื่อนไข var dom = document.getElementById ('contanis'); var mycharts = echarts.init (dom) {ทริกเกอร์: 'รายการ', formatter: "{a} <br/> {b}: {c} ({d}%)"}, ตำนาน: {Orient: 'แนวตั้ง', ซ้าย: 'ซ้าย', ข้อมูล: []}, ซีรีส์: [{ชื่อ: '2012', ประเภท: [], itemstyle: {empasis: {shadowblur: 10, shadowoffsetx: 0, shadowcolor: 'rgba (0, 0, 0, 0, 0.5)' // สิ่งนี้จะเป็น. 5 ได้อย่างไรถัดไปคือส่วน Ajax การโหลดข้อมูลแบบไดนามิกเป็นปัญหาพื้นฐาน มันน่าเบื่อมาก ฉันจะทำซุป Mengpo ชามนี้ในชีวิตหน้า ฉันจะออกแบบ UI
$ .ajax ({type: "get", async: true, // async Request (คำขอซิงโครนัสจะล็อคเบราว์เซอร์และการดำเนินการอื่น ๆ ของผู้ใช้จะต้องรอคำขอให้เสร็จสมบูรณ์ก่อนการดำเนินการ) url: "../handler/departmenthandler.ashx" ข้อมูล: {} {สำหรับ (var i = 0; i <result.length; i ++) {name.push (ผลลัพธ์ [i] .name); ล้มเหลว!");}});ส่วน ASHX นั้นง่ายกว่ามากที่จะทำให้ข้อมูลเป็นอนุกรม
dataTable result = bll.department.getDeptNumber (); รายการ <jobch> list = รายการใหม่ <jobch> (); foreach (dataRow dr in result.rows) {// แนบรูปแบบที่ต้องการสำหรับ echarts: [{value: 335, ชื่อ: 'การเข้าถึงโดยตรง'}] deart d = new deart () D.Value = convert.toint32 dr ["d_name"]. toString (); list.add (d);} javascriptserializer jss = ใหม่ javascripterializer (); string json = jss.serialize (รายการ); ชั้นเรียนสาธารณะ deart // ในความเป็นจริงคุณไม่จำเป็นต้องนิยามตัวเองตราบเท่าที่สิ่งนี้ ชุด; } ชื่อสตริงสาธารณะ {get; ชุด; -แนบการเรนเดอร์:
แผนภูมิบาร์:
สิ่งแวดล้อม: echarts 3.19 เทียบกับ 2013
วิธีการใช้งาน: AJAX+ASHX+JSON
หมายเหตุ: รูปแบบที่ต้องการของเว็บไซต์อย่างเป็นทางการคือ: [5,6,7,9,34] ประเภทอาร์เรย์
สำหรับรหัสเฉพาะโปรดมองลงไป
<!-รหัส js-> <script src = "../ สคริปต์/jQuery-1.8.2.min.js"> </สคริปต์> <สคริปต์ src = "../ สคริปต์/echarts/echarts.min.js"> </script> <div> </div> <%-ประกาศ div เพื่อติดตั้งภาพที่วาดโดย Canvas-%> <div id = "contanis"> <script type = "text/javascript"> $ ("#btncanv") คลิก (ฟังก์ชั่น () {// echarts.init (dom); mychart.setOption ({title: {text: 'async data loading ตัวอย่าง' // ชื่อภาพ}, tooltip: {}, Legend: {data: ['แผนกประชากร']}, xaxis: {data: []}, yaxis: {}, ซีรี่ส์: ข้อมูล: [] // ปัญหาว่างเปล่าที่นี่เพื่อกำหนดค่า Ajax ให้กับมัน}]});กฎเก่าคือส่วน Ajax:
myChart.SHOWLOADING (); // ก่อนที่จะโหลดข้อมูลจะมีการแสดงภาพเคลื่อนไหวอย่างง่าย ชื่อ var = []; // หมวดหมู่อาร์เรย์ (จริง ๆ แล้วใช้เพื่อเก็บค่าพิกัด x-axis) var nums = []; // การขายอาร์เรย์ (ใช้จริงเพื่อเก็บค่าพิกัด y) $ .ajax ({type: "post", async: true, // async คำขอ (คำขอซิงโครนัสจะล็อคเบราว์เซอร์และการดำเนินการอื่น ๆ ของผู้ใช้จะต้องรอการร้องขอให้เสร็จสิ้นก่อนการดำเนินการ) {}, ประเภทข้อมูล: "json", // ส่งคืนแบบฟอร์มข้อมูล jSonsuccess: ฟังก์ชั่น (ผลลัพธ์) {// ดำเนินการเนื้อหาฟังก์ชันเมื่อคำขอสำเร็จและผลลัพธ์คือวัตถุ JSON ที่ส่งคืนโดยเซิร์ฟเวอร์ถ้า (ผลลัพธ์) {สำหรับ (var i = 0; อาร์เรย์} สำหรับ (var i = 0; i <result.length; i ++) {nums.push (ผลลัพธ์ [i] .values); }]});}}, ข้อผิดพลาด: ฟังก์ชั่น (errormsg) {// ดำเนินการแจ้งเตือนฟังก์ชันนี้เมื่อคำขอล้มเหลว ("ข้อมูลคำขออักขระล้มเหลว!");แนบการเรนเดอร์:
ในความเป็นจริงการตั้งค่าตัวเลือกสามารถวางไว้ใน AJAX และจะสร้างเอฟเฟกต์และมองเห็นได้ง่ายขึ้น
นำแผนภูมิวงกลมเป็นตัวอย่าง รหัสสามารถเขียนได้เช่นนี้
$ .ajax ({type: "get", async: true, // async Request (คำขอซิงโครนัสจะล็อคเบราว์เซอร์และการดำเนินการอื่น ๆ ของผู้ใช้จะต้องรอคำขอให้เสร็จสมบูรณ์ก่อนการดำเนินการ) url: "../handler/departmenthandler.ashx" ข้อมูล: {} {สำหรับ (var i = 0; i <result.length; i ++) {name.push (ผลลัพธ์ [i] .name); ({d}%) "}, Legend: {Orient: 'แนวตั้ง', ซ้าย: 'ซ้าย', ข้อมูล: ชื่อ}, ซีรีส์: [{ชื่อ: '2012', ประเภท: 'พาย', รัศมี: '55%', ศูนย์: ['50%', '60%' 'rgba (0, 0, 0, 0.5)'}}}]};หากคุณต้องการเรียนรู้สิ่งนี้ในฐานะมือใหม่ที่ได้รับความสูญเสียให้บอกให้คุณดูตัวอย่างอย่างเป็นทางการก่อนแล้วชี้แจงความคิดของคุณและเริ่มต้น
ข้างต้นเป็นความรู้ที่เกี่ยวข้องที่แนะนำให้คุณทราบเกี่ยวกับกราฟิกที่ใช้กันทั่วไป (ไม่คงที่) ตาม Echarts 3.19 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!