ExtJs整合的Echarts
这次给大家带来ExtJs整合的Echarts,使用ExtJs整合Echarts的注意事项有哪些,下面就是实战案例,一起来看一下。
由于Echarts不提供表格功能,想要实现上图下表,需要自己增加一个table标签。
ExtJs整合Echarts
从Echarts官网下载js文件通过import引用 新建一个页面,通过竖直放置的两个p排版,上方预留给Echarts,下方预留给table标签
initPanel : function() { if (this.panel) { return } var panel = new Ext.Panel({ id : 'echart', html : '<p id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></p>' + '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">' +'<label for="mainTable"><h1>档案调用次数表</h1></label>' +'<table id="content-table" border="1" style="width:100%;text-align:center;">' + '<tr><th>月份</th><th>调用次数</th></tr>', buttonAlign : 'center', autoScroll : true,//允许滚动 bodyStyle : 'overflow-x:hidden; overflow-y:scroll' //开启竖直滚动条,关闭水平滚动条 }); this.panel = panel; return this.panel; }
Echarts初始化和数据加载
官方声明一次性只能生成一个echarts,定义相关的样式,并且从后台查询数据提供给echarts
initData : function(id, personName, year) { this.id = id; var p = document.getElementById("mainEchart"); var myChart = echarts.init(p); // myChart.showLoading({ // text: "图表数据正在努力加载..." // }); this.myChart = myChart; // 初始化数据 var data = []; var yearStr = ""; var flag = false; var monthData = []; var res = QueryData();//调用数据查询,涉及项目名,略 for (var i = 0; i < res.json.body.length; i++) { var map = res.json.body[i]; monthData.push(map.MM);//月份 data.push(map.DYCS);//调用次数 } var options = { arg : { id : this.id }, noDataLoadingOption : { text : '暂无数据', effect : 'bubble', effectOption : { effect : { n : 0 } } }, title : { text : personName + "的档案调用情况", x : 'west' }, tooltip : { trigger : 'axis' }, legend : { data : ['调用次数'] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { //重写dataView //在切换视图的时候能够以<table>的形式显示 show : true, readOnly : true, optionToContent : function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>' + '<td>时间</td>' + '<td>' + series[0].name + '</td>' // + '<td>' // + series[1].name // + '</td>' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' // + '<td>' + series[1].data[i] // + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; } }, magicType : { show : true, type : ['line', 'bar'] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [{ type : 'category', data : monthData }], yAxis : [{ type : 'value', splitArea : { show : true } }], series : [{ name : '调用次数', type : 'bar', barWidth : 35, data : data, itemStyle : {//修改柱状图的颜色并在顶部显示数值 normal : { color : '#3575a8', label : { show : true, position : 'top', formatter : '{c}'//'{b}\n{c}' } } } }] }; myChart.setOption(options, true); myChart.on('click', function eConsole(param) { }); this.tableData(personName, monthData, data) //表格的加载 }
表格数据的赋值
表格部分就是简单的html赋值,没什么好多讲的,注意拼接完后刷新一下html即可。 代码如下:
tableData : function(personName, monthData, data) { // 表格部分 var html = '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">' +'<label for="mainTable"><h1>' + personName + '档案调用情况表</h1></label>' +'<table id="content-table" border="1" style="width: 100%;text-align: center;">' + '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>'; // if(monthData.length != data.length) // throw new Error("数据条数不对,请检查!"); for (var i = 0; i < data.length; i++) { html += '<tr style="height: 30px;text-align: center;">' +'<td id="data-month-'+i+'">' + monthData[i] + '</td><td id="data-value-'+i+'">' + data[i] + '</td></tr>' } html += '</table></p>'; document.getElementById('mainTable').innerHTML = html; }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci ExtJs整合的Echarts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python memerlukan contoh kod khusus: ECharts ialah alat visualisasi data yang sangat baik yang boleh melakukan pemprosesan data dan lukisan grafik melalui antara muka Python. Artikel ini akan memperkenalkan langkah khusus untuk melukis papan pemuka menggunakan antara muka ECharts dan Python serta menyediakan kod sampel. Kata kunci: ECharts, antara muka Python, papan pemuka, visualisasi data Pengenalan Papan pemuka ialah bentuk visualisasi data yang biasa digunakan, yang menggunakan

Dalam konteks hari ini di mana visualisasi data menjadi semakin penting, ramai pembangun berharap untuk menggunakan pelbagai alatan untuk menjana pelbagai carta dan laporan dengan cepat supaya mereka boleh memaparkan data dengan lebih baik dan membantu pembuat keputusan membuat pertimbangan yang pantas. Dalam konteks ini, menggunakan antara muka Php dan perpustakaan ECharts boleh membantu ramai pembangun menjana carta statistik visual dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan antara muka Php dan perpustakaan ECharts untuk menjana carta statistik visual. Dalam pelaksanaan khusus, kami akan menggunakan MySQL

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts ECharts (pustaka carta JavaScript sumber terbuka Baidu) ialah alat visualisasi data yang berkuasa dan mudah digunakan. Ia menawarkan pelbagai jenis carta, termasuk carta garisan, carta bar, carta pai dan banyak lagi. Carta kalendar ialah jenis carta yang sangat tersendiri dan praktikal dalam ECharts, yang boleh digunakan untuk memaparkan data berkaitan masa. Artikel ini akan memperkenalkan cara menggunakan carta kalendar dalam ECharts dan memberikan contoh kod khusus. Pertama, anda perlu menggunakan

Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts ECharts ialah perpustakaan carta visual berkuasa yang menyediakan pelbagai jenis carta untuk digunakan oleh pembangun, termasuk peta haba peta. Peta haba peta boleh digunakan untuk menunjukkan populariti bandar atau wilayah, membantu kami memahami dengan cepat populariti atau kepadatan tempat yang berbeza. Artikel ini akan memperkenalkan cara menggunakan peta haba peta dalam ECharts untuk memaparkan haba bandar dan menyediakan contoh kod untuk rujukan. Pertama, kami memerlukan fail peta yang mengandungi maklumat geografi, EC

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik Pengenalan: Dalam pembangunan aplikasi web moden, visualisasi data ialah pautan yang sangat penting, yang boleh membantu kami memaparkan dan menganalisis data secara intuitif. ECharts ialah perpustakaan carta JavaScript sumber terbuka yang berkuasa Ia menyediakan pelbagai jenis carta dan fungsi interaktif yang kaya, dan boleh menjana pelbagai carta statistik dengan mudah. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik, dan memberikan contoh kod khusus. 1. Gambaran keseluruhan ECha

Carta berbilang paksi ECharts: Cara memaparkan data berbilang dimensi, contoh kod khusus diperlukan Pengenalan: Dengan kemunculan era data besar, kita perlu memaparkan data berbilang dimensi yang kompleks dengan lebih baik. Sebagai perpustakaan visualisasi yang berkuasa, ECharts menyediakan pelbagai jenis carta, antaranya carta berbilang paksi merupakan salah satu alat penting untuk memaparkan data berbilang dimensi. Artikel ini akan memperkenalkan carta berbilang paksi dan cara menggunakan ECharts untuk memaparkan data berbilang dimensi dan memberikan contoh kod yang sepadan. 1. Apakah carta berbilang paksi? Carta berbilang paksi ialah carta yang boleh dipaparkan pada carta yang sama.

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
