Bagan PIE:
Lingkungan: Echarts 3.19 vs 2013
Metode Implementasi: AJAX+ASHX+JSON
CATATAN: Format yang diperlukan dari situs web resmi adalah [{value: 23, nama: 'xxxx'}] Harap jangan menulis nama kunci secara tidak benar
Untuk kode tertentu, silakan lihat ke bawah.
<!-Harap kutip file First-> <Script src = "../ Scripts/jQuery-1.8.2.min.js"> </script> <script src = "../ Scripts/echarts/echarts.min.js"> </script>
Cukup atur div di bagian halaman
<div> <input type = "tombol" id = "btngo" value = "pie"/> </div> <div id = "contanis"> </div>
Berikutnya adalah bagian JS. Faktanya, Echarts masih terkait dengan kanvan di HTML5. Jika Anda ingin tahu, Anda dapat memeriksa informasinya.
$ ("#btngo"). Klik (function () {// Acara klik digunakan di sini. Tentu saja, ini juga simulasi ketika Anda memiliki kueri bersyarat var dom = document.getElementById ('contanis'); var mycharts = echarts.init (dom); opsi = {title: {text: 'department ratio', echarts.in (dom); {title: {text: 'department ratio', echarts.init (dom); {title: {text: 'department ratio', echarts.init (dom); {title: {text: 'department ratio', echarts.init (dom); {title: {text: 'department ratio', echarts.init (dom); {Trigger: 'item', formatter: "{a} <br/> {b}: {c} ({d}%)"}, legenda: {orient: 'vertikal', kiri: 'kiri', data: []}, seri: {{name: '2012', type: 'pie', Radius: '5%: {{name: '2012', type: 'pie', Radius: '55%',', '2012,' 2012, '2012, [], ItemStyle: {Empasis: {Shadowblur: 10, Shadowoffsetx: 0, ShadowColor: 'RGBA (0, 0, 0, 0.5)' // Bagaimana ini bisa .5?Berikutnya adalah bagian Ajax. Pemuatan data yang dinamis adalah masalah mendasar. Sangat membosankan. Saya akan melakukan semangkuk sup Mengpo ini di kehidupan berikutnya. Saya akan melakukan desain UI.
$.ajax({type: "get",async: true, //Async request (synchronous request will lock the browser, and other operations of the user must wait for the request to complete before execution) url: "../Handler/DepartmentHandler.ashx", data: {},//demo No conditional dataType: "json", //Return data form jsonsuccess: function (result) {for (var i = 0; i <result.length; i ++) {name.push (hasil [i] .name); gagal!");}});Bagian Ashx jauh lebih sederhana untuk sekadar membuat serial data
DATATABLE Hasil = bll.department.getDeptNumber (); Daftar <POMPERTS> DAFTAR = DAFTAR BARU <POMPERSI> (); FOREACH (DATAROW DR IN Hasil. dr ["d_name"]. ToString (); list.add (d);} javascriptserializer jss = new javascriptserializer (); string json = jss.serialize (daftar); kelas publik deart // sebenarnya, Anda tidak perlu mendefinisikan diri Anda sejauh ini, sehingga nilainya keluar adalah int {public int value {get; mengatur; } Nama string publik {get; mengatur; }}Lampirkan rendering:
Bagan batang:
Lingkungan: Echarts 3.19 vs 2013
Metode Implementasi: AJAX+ASHX+JSON
Catatan: Format situs web resmi yang diperlukan adalah: [5,6,7,9,34] Jenis Array
Untuk kode tertentu, silakan lihat ke bawah.
<!-JS Code-> <skrip src = "../ Scripts/jQuery-1.8.2.min.js"> </script> <script src = "../ skrip/echarts/echarts.min.js"> </skrip> <v> <%--- kancing triggers-%> <input type = " </div> <%-Deklarasikan Div untuk menginstal gambar yang digambar oleh Canvas-%> <div id = "contanis"> <script type = "text/javascript"> $ ("#btncanv"). klik (function () {// dapatkan gambar domvar = document.getElementById ("contanis"); var mychart = echarts.init (dom); mychart.setOption ({title: {text: 'async data loading example' // judul gambar}, tooltip: {}, legenda: {data: ['Department Population']}, xaxis: {data: []}, yaxis: {}, {{{{{{{{{{{{{{{{{{' (Polyline) Data: [] // Masalah kosong di sini untuk menetapkan nilai AJAX untuk itu}]});Aturan lama adalah bagian AJAX:
mychart.showloading (); // Sebelum data dimuat, animasi pemuatan sederhana ditampilkan. nama var = []; // Array Kategori (sebenarnya digunakan untuk menahan nilai koordinat x-sumbu) var nums = []; //Sales array (actually used to hold Y-coordinate values) $.ajax({type: "post",async: true, //Async request (synchronous request will lock the browser, and other operations of the user must wait for the request to be completed before execution) url: "../Handler/DepartmentHandler.ashx", //The request is sent to ../Handler/DepartmentHandler data: {}, DataType: "json", // return data bentuk jsonsuccess: function (hasil) {// jalankan konten fungsi ketika permintaan berhasil, dan hasilnya adalah objek JSON yang dikembalikan oleh server jika hasilnya (i]. (var i = 0; i <result.length; i ++) {nums.push (hasil [i] .values); }]});}}, error: function (errorMsg) {// Jalankan peringatan fungsi ini ketika permintaan gagal ("Data permintaan karakter gagal!");Lampirkan rendering:
Bahkan, pengaturan opsi dapat ditempatkan di AJAX dan akan menghasilkan efek dan lebih mudah dilihat.
Ambil diagram lingkaran sebagai contoh. Kode dapat ditulis seperti ini
$ .AJAX ({tipe: "get", async: true, // permintaan async (permintaan sinkron akan mengunci browser, dan operasi lain dari pengguna harus menunggu permintaan untuk diselesaikan sebelum eksekusi) url: "../handler/departmenthandler.ashx", data: {}, // demo no datatipe conditional datashyler: "Data", {{}, // Demo no DATATATED CONDISIAL DATATIPE: "DATER", {{}, // DEMO NO DATATIP CONDISIAL: "DATEREP:" DATA, "DATA", {{}, // DEMO NO DATATIPE CONDISIAL: "DATACC: {{{}, // DEMO NO DATATIPE: untuk (var i = 0; i <result.length; i ++) {name.push (hasil [i] .name);} opsi = {title: {text: 'Department Population Ratio', Subtext: 'Test Data', x: 'Center'}, tooltip: {trigger: 'item', formatter: "{a} <br/ {{{{{{{{{{{{{a {{{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {{a {a {{a {{a {{a {a formatter. ({d}%) "}, legenda: {orient: 'vertikal', kiri: 'kiri', data: name}, seri: [{{name: '2012', type: 'pie', radius: '55%', center: ['50%', '60%'], data: hasil, itemstyle: {{'50%', '60%'], data: {{'50%','. ' 'RGBA (0, 0, 0, 0.5)'}}}]};Jika Anda ingin mempelajari ini sebagai pemula yang telah menderita kerugian, beri tahu Anda untuk melihat contoh resmi terlebih dahulu dan kemudian mengklarifikasi ide -ide Anda dan mulai
Di atas adalah pengetahuan yang relevan yang diperkenalkan kepada Anda tentang grafik yang umum digunakan (non-statis) berdasarkan Echarts 3.19. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!