ExtJs整合Echarts的Demo

ExtJs整合Echarts的Demo

由于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}'//'{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 = '<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;
}

以上就可完成数据的联动