ホームページ > 記事 > ウェブフロントエンド > ExtJs を使用して Echarts を統合する方法 (詳細なチュートリアル)
この記事では主に Echarts と ExtJs を統合するためのサンプル コードを紹介し、参考として提供します。
Echartsはテーブル関数を提供していないため、上記の図と次のテーブルを実装したい場合は、自分でテーブルタグを追加する必要があります。
Echarts と ExtJs を統合する
Echarts 公式 Web サイトから js ファイルをダウンロードし、縦に配置された 2 つの p を介して新しいページを作成します。上部は Echarts 用に予約され、下部はテーブル タグ用に予約されます。
Eチャートの初期化とデータのロード
公式ステートメントでは、一度に1つのEチャートのみを生成し、関連するスタイルを定義し、バックグラウンドからデータをクエリしてeチャートを提供できます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; }
テーブルデータの割り当て
テーブル部分はシンプルな HTML の割り当て、大したことはありません。 そういえば、結合後の HTML の更新に注意してください。 コードは次のとおりです: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) //表格的加载 }上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。 関連記事:
vueプロジェクトのtweenメソッドを通じて先頭に戻る方法
vueを使用して入力コンテンツがすべてスペースであることを確認するにはどうすればよいですか?
以上がExtJs を使用して Echarts を統合する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。