ExtJs整合Echarts的示例代碼

更新時間：2018年02月27日 14:39:03 作者：阿達xi

本篇文章主要介紹了ExtJs整合Echarts的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

由于Echarts不提供表格功能，想要實現上圖下表，需要自己增加一個table標簽。

ExtJs整合Echarts

從Echarts官網下載js文件通過import引用新建一個頁面，通過豎直放置的兩個div排版，上方預留給Echarts，下方預留給table標簽

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"><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 div = document.getElementById("mainEchart");
 var myChart = echarts.init(div);
 // 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}'//'\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 = '<div 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></div>';
 document.getElementById('mainTable').innerHTML = html;
}

以上就可完成數據的聯(lián)動，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS使用canvas技術模仿echarts柱狀圖
這篇文章主要介紹了JS使用canvas技術模仿echarts柱狀圖，對canvas感興趣的同學，可以參考下
2021-04-04
js 頁面關閉前的出現提示的實現代碼
主流的瀏覽器都支持onbeforeunload事件(即頁面卸載前觸發(fā)的事件)，而現在大多網站都用到了此功能
2011-05-05
詳解使用mocha對webpack打包的項目進行"冒煙測試"的大致流程
這篇文章主要介紹了詳解使用mocha對webpack打包的項目進行"冒煙測試"的大致流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式.這篇文章主要介紹了Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)的相關資料,需要的朋友可以參考下
2016-10-10
JavaScript實現復制圖片功能的方法示例
本文主要介紹了在JavaScript中實現復制圖片的方法,先介紹了實現復制的前置知識,包括傳統(tǒng)的 execCommand 方法及其優(yōu)缺點和 Clipboard API,然后詳細闡述了如何將不同形式的圖片轉化為blob對象并通過Clipboard API實現復制,還提及了兼容性問題及預覽、下載圖片的實現思路
2025-03-03
JavaScript變量作用域_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript變量作用域，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
微信小程序配置服務器提示驗證token失敗的解決方法
這篇文章主要介紹了微信小程序配置服務器提示驗證token失敗的解決方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
基于JavaScript定位當前的地理位置
這篇文章主要為大家詳細介紹了基于JavaScript定位當前的地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript將一個數組插入到另一個數組的方法
這篇文章主要介紹了JavaScript將一個數組插入到另一個數組的方法,涉及javascript中Array.prototype.push.apply方法的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
js動態(tài)添加刪除,后臺取數據(示例代碼)
這篇文章主要是對js動態(tài)添加刪除,后臺取數據(示例代碼)進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11