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 相关文章推荐
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Javascript的表单验证长度
Mar 16 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
浅谈开发eslint规则
Oct 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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中的MVC模式运用技巧
2007/05/03 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
python 域名分析工具实现代码
2009/07/15 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python使用folium excel绘制point
2019/01/03 Python
django最快程序开发流程详解
2019/07/19 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
颁奖典礼主持词
2014/03/25 职场文书
廉洁教育学习材料
2014/05/19 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
大学开学感言
2015/08/01 职场文书
python如何获取网络数据
2021/04/11 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Python IO文件管理的具体使用
2022/03/20 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技