ExtJ를 사용하여 Echarts를 통합하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

ExtJ를 사용하여 Echarts를 통합하는 방법(자세한 튜토리얼)

Jun 04, 2018 am 10:46 AM

echarts extjs javascript

이 글에서는 주로 Echarts와 ExtJs를 통합하기 위한 샘플 코드를 소개하고 있습니다.

Echarts에서는 테이블 기능을 제공하지 않기 때문에 위 그림과 아래 테이블을 구현하려면 테이블 태그를 직접 추가해야 합니다.

ExtJs와 Echarts 통합

Echarts 공식 웹사이트에서 js 파일을 다운로드하고 수직으로 배치된 두 개의 p를 통해 조판을 통해 새 페이지를 만듭니다. 하단은 테이블 태그용으로 예약되어 있습니다

initPanel : function() {
 if (this.panel) {
  return
 }
 
 var panel = new Ext.Panel({
  id : &#39;echart&#39;,
  html :   &#39;&lt;p id=&quot;mainEchart&quot; style=&quot;height:50%;border:1px solid #ccc;padding:10px;&quot;&gt;&lt;/p&gt;&#39;
        + &#39;&lt;p id=&quot;mainTable&quot; style=&quot;position:relative;text-align:center;padding:10px;&quot;&gt;&#39;
        +&#39;&lt;label for=&quot;mainTable&quot;&gt;&lt;h1&gt;档案调用次数表&lt;/h1&gt;&lt;/label&gt;&#39;
        +&#39;&lt;table id=&quot;content-table&quot; border=&quot;1&quot; style=&quot;width:100%;text-align:center;&quot;&gt;&#39;
        + &#39;&lt;tr&gt;&lt;th&gt;月份&lt;/th&gt;&lt;th&gt;调用次数&lt;/th&gt;&lt;/tr&gt;&#39;,
  buttonAlign : &#39;center&#39;,
  autoScroll : true,//允许滚动
  bodyStyle : &#39;overflow-x:hidden; overflow-y:scroll&#39;
  //开启竖直滚动条，关闭水平滚动条
 });
 
 this.panel = panel;
 return this.panel; 
}

로그인 후 복사

Echarts 초기화 및 데이터 로딩

공식문은 한 번에 하나의 echart만 생성하고 관련 스타일을 정의하며 백그라운드에서 데이터를 쿼리하여 echarts를 제공할 수 있습니다.

initData : function(id, personName, year) {
 this.id = id;
 var p = document.getElementById(&quot;mainEchart&quot;);
 var myChart = echarts.init(p);
 // myChart.showLoading({
 // text: &quot;图表数据正在努力加载...&quot;
 // });
 this.myChart = myChart;
 // 初始化数据
 var data = [];
 var yearStr = &quot;&quot;;
 var flag = false;
 var monthData = [];
 
 var res = QueryData();//调用数据查询，涉及项目名，略
 
 for (var i = 0; i &lt; 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 : &#39;暂无数据&#39;,
   effect : &#39;bubble&#39;,
   effectOption : {
    effect : {
     n : 0
    }
   }
  },
  title : {
   text : personName + &quot;的档案调用情况&quot;,
   x : &#39;west&#39;
  },
  tooltip : {
   trigger : &#39;axis&#39;
  },
  legend : {
   data : [&#39;调用次数&#39;]
  },
  toolbox : {
   show : true,
   feature : {
    mark : {
     show : true
    },
    dataView : {
    //重写dataView
    //在切换视图的时候能够以&lt;table&gt;的形式显示
     show : true,
     readOnly : true,
     optionToContent : function(opt) {
      var axisData = opt.xAxis[0].data;
      var series = opt.series;
      var table = &#39;&lt;table style=&quot;width:100%;text-align:center&quot; border=&quot;1&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;
        + &#39;&lt;td&gt;时间&lt;/td&gt;&#39;
        + &#39;&lt;td&gt;&#39;
        + series[0].name + &#39;&lt;/td&gt;&#39;
        // + &#39;&lt;td&gt;&#39;
        // + series[1].name
        // + &#39;&lt;/td&gt;&#39;
        + &#39;&lt;/tr&gt;&#39;;
      for (var i = 0, l = axisData.length; i &lt; l; i++) {
       table += &#39;&lt;tr&gt;&#39; + &#39;&lt;td&gt;&#39; + axisData[i]
         + &#39;&lt;/td&gt;&#39; + &#39;&lt;td&gt;&#39;
         + series[0].data[i] + &#39;&lt;/td&gt;&#39;
         // + &#39;&lt;td&gt;&#39; + series[1].data[i]
         // + &#39;&lt;/td&gt;&#39;
         + &#39;&lt;/tr&gt;&#39;;
      }
      table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;
      return table;
     }
    },
    magicType : {
     show : true,
     type : [&#39;line&#39;, &#39;bar&#39;]
    },
    restore : {
     show : true
    },
    saveAsImage : {
     show : true
    }
   }
  },
  calculable : true,
  xAxis : [{
     type : &#39;category&#39;,
     data : monthData
    }],
  yAxis : [{
     type : &#39;value&#39;,
     splitArea : {
      show : true
     }
    }],
  series : [{
   name : &#39;调用次数&#39;,
   type : &#39;bar&#39;,
   barWidth : 35,
   data : data,
   itemStyle : {//修改柱状图的颜色并在顶部显示数值
    normal : {
     color : &#39;#3575a8&#39;, 
     label : {
      show : true,
      position : &#39;top&#39;,
      formatter : &#39;{c}&#39;//&#39;{b}\n{c}&#39;
     }
    }
   }
  }]
 };
 myChart.setOption(options, true);
 myChart.on(&#39;click&#39;, function eConsole(param) {
   });
 this.tableData(personName, monthData, data)
 //表格的加载
}

로그인 후 복사

테이블 데이터 할당

테이블 부분은 다음과 같습니다. 간단한 html 할당, 별거 없습니다. 말하자면, 스플라이싱 후 html을 새로 고치는 데 주의하세요. 코드는 다음과 같습니다.

tableData : function(personName, monthData, data) {
 // 表格部分
 var html = &#39;&lt;p id=&quot;mainTable&quot; style=&quot;position:relative;text-align:center;padding:10px;&quot;&gt;&#39;
   +&#39;&lt;label for=&quot;mainTable&quot;&gt;&lt;h1&gt;&#39;
   + personName
   + &#39;档案调用情况表&lt;/h1&gt;&lt;/label&gt;&#39;
   +&#39;&lt;table id=&quot;content-table&quot; border=&quot;1&quot; style=&quot;width: 100%;text-align: center;&quot;&gt;&#39;
   + &#39;&lt;tr style=&quot;height: 30px;text-align:center;&quot;&gt;&lt;th&gt;月份&lt;/th&gt;&lt;th&gt;调用次数&lt;/th&gt;&lt;/tr&gt;&#39;;
 // if(monthData.length != data.length)
 // throw new Error(&quot;数据条数不对，请检查！&quot;);
 for (var i = 0; i &lt; data.length; i++) {
  html += &#39;&lt;tr style=&quot;height: 30px;text-align: center;&quot;&gt;&#39;
     +&#39;&lt;td id=&quot;data-month-&#39;+i+&#39;&quot;&gt;&#39;
     + monthData[i]
     + &#39;&lt;/td&gt;&lt;td id=&quot;data-value-&#39;+i+&#39;&quot;&gt;&#39;
     + data[i]
     + &#39;&lt;/td&gt;&lt;/tr&gt;&#39;
 }
 html += &#39;&lt;/table&gt;&lt;/p&gt;&#39;;
 document.getElementById(&#39;mainTable&#39;).innerHTML = html;
}

로그인 후 복사

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.