مخطط الفطيرة:
البيئة: Echarts 3.19 مقابل 2013
طريقة التنفيذ: AJAX+ASHX+JSON
ملاحظة: التنسيق المطلوب للموقع الرسمي هو [{value: 23 ، الاسم: 'xxxx'}] من فضلك لا تكتب اسم المفتاح بشكل غير صحيح
للحصول على رمز محدد ، يرجى إلقاء نظرة على الأسفل.
<!-يرجى اقتباس الملف أولاً-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js" </cript>
فقط اضبط DIV في قسم الصفحة
<div> <input type = "button" id = "btngo" value = "pie"/> </viv> <div id = "contanis"> </viv>
التالي هو جزء JS. في الواقع ، لا يزال Echarts مرتبطًا بـ Canvans في HTML5. إذا كنت تريد أن تعرف ، يمكنك التحقق من المعلومات.
$ ("#btngo"). انقر فوق (function () {// يتم استخدام حدث النقر هنا. بالطبع ، هذا أيضًا محاكاة عندما يكون لديك استعلام مشروط var dom = document.getElementById ('contanis') {trigger: 'item' ، formatter: "{a} <br/> {b}: {c} ({d} ٪)"} ، Legend: {Orient: 'vertical' ، left: 'left' ، data: []] [] ، itemstyle: {empasis: {Shadowblur: 10 ، Shadowoffsetx: 0 ، ShadowColor: 'RGBA (0 ، 0 ، 0 ، 0.5)' // كيف يمكن أن يكون هذا .5؟التالي هو الجزء Ajax. التحميل الديناميكي للبيانات هو المشكلة الأساسية. إنه ممل للغاية. سأفعل هذا الوعاء من حساء Mengpo في الحياة القادمة. سأقوم بتصميم واجهة المستخدم.
$ .ajax ({type: "get" ، async: true ، // request arsync (طلب متزامن سيقوم بإغلاق المتصفح ، وينتظر العمليات الأخرى للمستخدم حتى الإكمال قبل التنفيذ). {for (var i = 0 ؛ i <result.length ؛ i ++) {name.push (النتيجة [i] .name) ؛ فشل!")؛}})؛جزء ASHX أبسط بكثير لتسلسل البيانات ببساطة
نتيجة datatable = bll.department.getDeptNumber () ؛ قائمة <Object> list = قائمة جديدة <Object> () ؛ foreach (dataRow dr in result.rows) {// إرفاق التنسيق المطلوب لـ echarts: [{value: 335 ، name: 'direct access'}] devert d = new deart () ؛ DR ["d_name"]. ToString () ؛ list.add (d) ؛} javaScriptSerializer JSS = New JavaScriptSerializer () ؛ String JSON = JSS.Serialize (قائمة) ؛ الطبقة العامة deart // في الواقع ، لا تحتاج إلى تعريف نفسك بقدر هذا ، بحيث تكون قيمة ذلك int {public int {get ؛ تعيين؛ } اسم السلسلة العامة {get ؛ تعيين؛ }}إرفاق الاداءات:
مخطط بار:
البيئة: Echarts 3.19 مقابل 2013
طريقة التنفيذ: AJAX+ASHX+JSON
ملاحظات: التنسيق المطلوب للموقع الرسمي هو: [5،6،7،9،34] نوع المصفوفة
للحصول على رمز محدد ، يرجى إلقاء نظرة على الأسفل.
<!-رمز JS-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script> <div> <٪-button triggers-٪> </viv> <٪-إعلان DIV لتثبيت الصورة المرسومة بواسطة قماش-٪> <div id = "contanis"> <script type = "text/javaScript"> $ ("#btncanv"). echarts.init (dom) ؛ mychart.setOption ({title: {text: 'Async data load example' // title title} ، tooltip: {} ، legend: {data: ['department supal']} ، xaxis: {data: [] البيانات: [] // المشكلات فارغة هنا لتعيين قيمة ajax إليها}]}) ؛القواعد القديمة هي الجزء Ajax:
mychart.showloading () ؛ // قبل تحميل البيانات ، يتم عرض رسوم متحركة بسيطة تحميل. أسماء var = [] ؛ // فئة صفيف (يستخدم فعليًا لعقد قيم إحداثيات المحور X) var nums = [] ؛ // مجموعة المبيعات (تستخدم فعليًا للاحتفاظ بقيم الإحداثيات y) $ .ajax ({type: "post" ، async: true ، // arme arsync request (request synchronous سوف يغلق المتصفح ، ويجب على عمليات المستخدم الأخرى أن يتم إرسال الطلب قبل التنفيذ). {} ، نوع البيانات: "json" ، // نموذج بيانات الإرجاع jsonsuccess: الدالة (النتيجة) {// تنفيذ محتوى الوظيفة عندما يكون الطلب ناجحًا ، والنتيجة هي كائن JSON الذي تم إرجاعه بواسطة الخادم إذا كان ذلك (var i = 0 ؛ i <result.length ؛ i ++) Array} لـ (var i = 0 ؛ i <result.length ؛ i ++) {nums.push (النتيجة [i]. }]}) ؛}} ، خطأ: دالة (errormsg) {// تنبيه هذا التنبيه عند فشل الطلب ("فشلت بيانات طلب الحرف!") ؛إرفاق الاداءات:
في الواقع ، يمكن وضع إعداد الخيار في AJAX وسيؤثر على تأثيرات ويكون من الأسهل رؤيتها.
خذ مخطط الفطيرة كمثال. يمكن كتابة الرمز مثل هذا
$ .ajax ({type: "get" ، async: true ، // request arsync (طلب متزامن سيقوم بإغلاق المتصفح ، وينتظر العمليات الأخرى للمستخدم حتى الإكمال قبل التنفيذ). {for (var i = 0 ؛ i <result.length ؛ i ++) {name.push (result [i] .name) ؛ ({d} ٪) "} ، Legend: {ORINCE: 'vertical' ، اليسار: 'اليسار' ، البيانات: name} ، السلسلة: [{name: '2012' ، النوع: 'pie' ، RADIUS: '55 ٪ '، المركز: ['50 ٪' ، '60 ٪ '] "RGBA (0 ، 0 ، 0 ، 0.5) '}}]} ؛إذا كنت تريد أن تتعلم هذا على أنه صاعد عانى من خسارة ، فأخبرك بإلقاء نظرة على المثال الرسمي أولاً ثم توضيح أفكارك وابدأ
ما سبق هو المعرفة ذات الصلة التي تم تقديمها لك عن الرسومات الشائعة الاستخدام (غير الستاطية) استنادًا إلى ECHARTS 3.19. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!