ExtJs integrates the Echarts sample code, extjsecharts

ExtJs integrates the Echarts sample code, extjsecharts

Because Echarts does not provide the table function, you need to add a table label to implement the following table.

ExtJs integration Echarts

Download the js file from the Echarts official website and create a page using import reference. Use the vertical layout of the two divs. The top is reserved for Echarts, and the bottom is reserved for table labels.

InitPanel: function () {if (this. panel) {return} var panel = new Ext. panel ({id: 'echart', html: '<div id = "mainEchart" style = "height: 50%; border: 1px solid # ccc; padding: 10px; "> </div> '+' <div id =" mainTable "style =" position: relative; text-align: center; padding: 10px; "> '+' <label for =" mainTable "> 
Echarts initialization and Data Loading
The official statement only generates one echarts at a time, defines the relevant styles, and queries data from the background for echarts
InitData: function (id, personName, year) {this. id = id; var div = document. getElementById ("mainEchart"); var myChart = echarts. init (div); // myChart. showLoading ({// text: "The chart data is loading... "//}); this. myChart = myChart; // initialize the data var data = []; var yearStr = ""; var flag = false; var monthData = []; var res = QueryData (); // call the data query, involving the project name, for (var I = 0; I <res. json. body. length; I ++) {var map = res. json. body [I]; monthData. push (map. MM); // month data. push (map. DYCS); // number of calls} var options = {arg: {id: this. id}, noDataLoadingOption: {text: 'No data', effect: 'bucket', partition toption: {effect: {n: 0 }}, title: {text: personName + "file call situation", x: 'west'}, tooltip: {trigger: 'axis '}, legend: {data: ['call times']}, toolbox: {show: true, feature: {mark: {show: true}, dataView: {// override dataView // 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> time </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: 'Call times', type: 'bar', barWidth: 35, data: data, itemStyle: {// modify the color of the bar chart and display the 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) // table loading}
Assignment of table data
The table is a simple html assignment, which is nothing to mention. After splicing, refresh the html. The Code is as follows:
TableData: function (personName, monthData, data) {// var html = '<div id = "mainTable" style = "position: relative; text-align: center; padding: 10px; "> '+' <label for =" mainTable "> 
The data interaction can be completed. We hope to help you learn the data and support the customer's house.