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 相关文章推荐
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
js自制图片放大镜功能
Jan 24 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
element中table高度自适应的实现
Oct 21 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源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python中有趣在__call__函数
2015/06/21 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python中class的定义及使用教程
2019/09/18 Python
python对一个数向上取整的实例方法
2020/06/18 Python
数控技术专科生自我评价
2014/01/08 职场文书
美术毕业生求职信
2014/02/25 职场文书
个人授权委托书
2014/04/03 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
买卖合同协议书范本
2014/10/18 职场文书
文艺演出主持词
2015/07/01 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android