资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Echarts怎么在ExtJs中使用-创新互联

Echarts怎么在ExtJs中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的彭泽网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用 新建一个页面,通过竖直放置的两个div排版,上方预留给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 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
    //在切换视图的时候能够以的形式显示
     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 += ''      +''      + monthData[i]      + ''      + data[i]      + ''  }  html += '
';  document.getElementById('mainTable').innerHTML = html; }

看完上述内容,你们掌握Echarts怎么在ExtJs中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:Echarts怎么在ExtJs中使用-创新互联
链接URL:http://cdkjz.cn/article/ddpscj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220