ExtJs整合的Echarts

php中世界最好的语言

发布时间：2018-03-17 13:29:26

1885人浏览过

来源于php中文网

原创

这次给大家带来ExtJs整合的Echarts，使用ExtJs整合Echarts的注意事项有哪些，下面就是实战案例，一起来看一下。

由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用新建一个页面，通过竖直放置的两个p排版，上方预留给Echarts，下方预留给table标签

initPanel : function() {
 if (this.panel) {
  return
 }
 
 var panel = new Ext.Panel({
  id : 'echart',
  html :   ''
        + ''
        +'
档案调用次数表'
        +''
        + '',
  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 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
    //在切换视图的时候能够以
月份 调用次数
的形式显示
     show : true,
     readOnly : true,
     optionToContent : function(opt) {
      var axisData = opt.xAxis[0].data;
      var series = opt.series;
      var table = ''
        + ''
        + ''
        // + ''
        + '';
      for (var i = 0, l = axisData.length; i < l; i++) {
       table += '' + '' + ''
         // + ''
         + '';
      }
      table += '时间 '
        + series[0].name + ' '
        // + series[1].name
        // + '
' + axisData[i]
         + ' '
         + series[0].data[i] + ' ' + series[1].data[i]
         // + '';
      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 = ''
   +'
'
   + personName
   + '档案调用情况表'
   +''
   + '';
 // if(monthData.length != data.length)
 // throw new Error("数据条数不对，请检查！");
 for (var i = 0; i < data.length; i++) {
  html += ''
     +''
 }
 html += '月份 调用次数
'
     + monthData[i]
     + ' '
     + data[i]
     + '
';
 document.getElementById('mainTable').innerHTML = html;
}