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 AnythingSlider滑动效果插件
Feb 07 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 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邮件发送,php发送邮件的类
2011/03/24 PHP
Yii配置文件用法详解
2014/12/04 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
jquery清空表单数据示例分享
2014/02/13 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
保护地球的标语
2014/06/17 职场文书
工作证明英文模板
2014/10/21 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
python 下划线的多种应用场景总结
2021/05/12 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers