echarts统计x轴区间的数值实例代码详解


Posted in Javascript onJuly 07, 2019

有时我们需要统计自定义echarts图,统计x轴区间的y轴数量。

思路是利用echarts的自定义配置:option.series[i].type='custom'中的renderItem(params, api)函数进行处理,这里包括了两个参数:params是对应每一个dataItem的数据信息;api是可调用的方法(api.value()和api.coord())。详情可以查看官方文档。

以下是改自官方实例: https://www.echartsjs.com/examples/editor.html?c=bar-histogram ,把以下引用 ecStat.js来处理数据的部分修改成自己拼装成需要的格式

var bins = ecStat.histogram(girth);
var min = Infinity;
var max = -Infinity;
edata = echarts.util.map(bins.data, function (item, index) {
 var x0 = bins.bins[index].x0;
 var x1 = bins.bins[index].x1;
 interval = x1 - x0;
 min = Math.min(min, x0);

max = Math.max(max, x1);

return [x0, x1, item[1]];
});

原因是引用ecStat.js处理数据时,有时出现以下错误,暂时没找到解决方法。

echarts统计x轴区间的数值实例代码详解

改写后的代码显示效果如下:

echarts统计x轴区间的数值实例代码详解

<div id="main1" style="width: 1000px;height: 500px"></div>
<script type="text/javascript">
 $(function(){
  generateChart();
 });
 function generateChart(){
  var myChart1 = echarts.init(document.getElementById('main1'));
  var girth = [19, 26.4, 34, 41.4, 42.4, 42.7, 42.9, 43.1, 43.2, 43.3, 43.3, 43.3, 44.9, 45.4, 46.2, 46.7, 48, 48, 49.1, 54.2];
  //自定义拼装数据方式

 var edata = new Array();
  var scopeMin = 0;
  var scopeMax = 100;
  var interval = (scopeMax-scopeMin)/10;
  var tmin = scopeMin;
  while(tmin < scopeMax){
   var x0 = tmin; 
   var x1 = tmin+interval;
   var samplenum = 0;
   for(var i=0;i<girth.length;i++){
    if((scopeMin == x0 && girth[i] < x0) || (x0 <= girth[i] && x1 > girth[i])
     ||(scopeMin == x1 && girth[i] > x1)) {
     samplenum++;    
    }
   }
   tmin += interval;
   edata.push([x0, x1, samplenum]);
  }
  var option = {
   color: ['rgb(25, 183, 207)'],
   grid: {
    top: 80,
    containLabel: true
   },
   xAxis: [{
    type: 'value',
    min: scopeMin,
    max: scopeMax,
    interval: interval
   }],
   yAxis: [{
    type: 'value',
   }],
   series: [{
    name: 'height',
    type: 'custom',
    renderItem: renderItem,
    label: {
     normal: {
      show: true,
      position: 'top'
     }
    },
    encode: {
     x: [0, 1],
     y: 2,
     tooltip: 2,
     label: 2
    },
    // data: data
    data: edata
   }]
  };
  myChart1.setOption(option);
  window.onresize = function () {
   myChart1.resize();
  }
 }
 function renderItem(params, api) {
  var yValue = api.value(2);
  var start = api.coord([api.value(0), yValue]);
  var size = api.size([api.value(1) - api.value(0), yValue]);
  var style = api.style();
  return {
   type: 'rect',
   shape: {
    x: start[0] + 1,
    y: start[1],
    width: size[0] - 2,
    height: size[1]
   },
   style: style
  };
 }
</script>

总结

以上所述是小编给大家介绍的echarts统计x轴区间的数值实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 #Javascript
详解django模板与vue.js冲突问题
Jul 07 #Javascript
django中使用vue.js的要点总结
Jul 07 #Javascript
Vue使用lodop实现打印小结
Jul 06 #Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 #Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
You might like
php实现mysql数据库备份类
2008/03/20 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
redux-saga 初识和使用
2018/03/10 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python创建n行m列数组示例
2019/12/02 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
中学生关于梦想的演讲稿
2014/08/22 职场文书
助学金感谢信
2015/01/20 职场文书
信访维稳承诺书
2015/05/04 职场文书
刘胡兰观后感
2015/06/16 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书