웹 프론트엔드 JS 튜토리얼 ExtJ를 사용하여 Echarts를 통합하는 방법(자세한 튜토리얼)

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 : '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; 
}
로그인 후 복사
.

Echarts 초기화 및 데이터 로딩

공식문은 한 번에 하나의 echart만 생성하고 관련 스타일을 정의하며 백그라운드에서 데이터를 쿼리하여 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
    //在切换视图的时候能够以<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)
 //表格的加载
}
로그인 후 복사

테이블 데이터 할당

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

tableData : function(personName, monthData, data) {
 // 表格部分
 var html = '<p 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></p>';
 document.getElementById('mainTable').innerHTML = html;
}
로그인 후 복사

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

관련 기사:

Vue2.0 시리즈에서 필터를 사용하는 방법은 무엇입니까?

vue 프로젝트에서 tween 메소드를 통해 최상위로 돌아가는 방법

vue를 사용하여 입력 내용이 모두 공백인지 확인하는 방법은 무엇입니까?

위 내용은 ExtJ를 사용하여 Echarts를 통합하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

ECharts 및 Python 인터페이스를 사용하여 대시보드를 그리는 단계 ECharts 및 Python 인터페이스를 사용하여 대시보드를 그리는 단계 Dec 18, 2023 am 08:40 AM

ECharts 및 Python 인터페이스를 사용하여 대시보드를 그리는 단계

PHP 인터페이스와 ECharts를 사용하여 시각적 통계 차트를 생성하는 방법 PHP 인터페이스와 ECharts를 사용하여 시각적 통계 차트를 생성하는 방법 Dec 18, 2023 am 11:39 AM

PHP 인터페이스와 ECharts를 사용하여 시각적 통계 차트를 생성하는 방법

지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법 지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법 Dec 18, 2023 pm 04:00 PM

지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법

달력 차트를 사용하여 ECharts에 시간 데이터를 표시하는 방법 달력 차트를 사용하여 ECharts에 시간 데이터를 표시하는 방법 Dec 18, 2023 am 08:52 AM

달력 차트를 사용하여 ECharts에 시간 데이터를 표시하는 방법

ECharts 및 PHP 인터페이스를 사용하여 통계 차트를 생성하는 방법 ECharts 및 PHP 인터페이스를 사용하여 통계 차트를 생성하는 방법 Dec 18, 2023 pm 01:47 PM

ECharts 및 PHP 인터페이스를 사용하여 통계 차트를 생성하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

ECharts 다축 차트: 다차원 데이터를 표시하는 방법 ECharts 다축 차트: 다차원 데이터를 표시하는 방법 Dec 18, 2023 pm 06:39 PM

ECharts 다축 차트: 다차원 데이터를 표시하는 방법

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법

See all articles