How to integrate Echarts using ExtJs (detailed tutorial)-JS Tutorial-php.cn

This article mainly introduces the sample code for integrating Echarts with ExtJs. Now I share it with you and give it as a reference.

Since Echarts does not provide table functions, if you want to implement the above picture and the following table, you need to add a table tag yourself.

ExtJs integrates Echarts

Download the js file from the Echarts official website and create a new page through the import reference, typesetting through two vertically placed p, the top is reserved for Echarts, The bottom is reserved for table tags

initPanel : function() { if (this.panel) { return } var panel = new Ext.Panel({ id : 'echart', html : '
' + '' +'
档案调用次数表
' +'' + '', buttonAlign : 'center', autoScroll : true,//允许滚动 bodyStyle : 'overflow-x:hidden; overflow-y:scroll' //开启竖直滚动条，关闭水平滚动条 }); this.panel = panel; return this.panel; }
         Copy after login
        
Echarts initialization and data loading
The official statement states that only one echarts can be generated at a time, define related styles, and query data from the background Provided to 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 //在切换视图的时候能够以
月份 调用次数
        
       
       
       
       
的形式显示 show : true, readOnly : true, optionToContent : function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '
' + '' + '' // + '' + ''; for (var i = 0, l = axisData.length; i < l; i++) { table += '' + '' + '' // + '' + ''; } table += '时间 ' + series[0].name + ' ' // + series[1].name // + '
' + axisData[i] + ' ' + series[0].data[i] + ' ' + series[1].data[i] // + '
'; 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) //表格的加载 }

Copy after login

Assignment of table data

The table part is a simple html assignment. There is not much to say. Just refresh the html after splicing. The code is as follows:

tableData : function(personName, monthData, data) { // 表格部分 var html = '' +'
' + personName + '档案调用情况表
' +'' + ''; // if(monthData.length != data.length) // throw new Error("数据条数不对，请检查！"); for (var i = 0; i < data.length; i++) { html += '' +'' } html += '月份 调用次数
' + monthData[i] + ' ' + data[i] + '
'; document.getElementById('mainTable').innerHTML = html; }

月份	调用次数
' + monthData[i] + '	' + data[i] + '

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use filters in the Vue2.0 series?

How to return to the top through the tween method in the vue project

How to use vue to determine that the input content is all spaces?

The above is the detailed content of How to integrate Echarts using ExtJs (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!