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 限制输入脚本大全
Nov 03 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
深入研究React中setState源码
Nov 17 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
JavaScript实现简单进度条效果
Mar 25 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邮件类
2007/01/03 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
range 标准化之获取
2011/08/28 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python访问系统环境变量的方法
2015/04/29 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python 对象和json互相转换方法
2018/03/22 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
搬迁通知
2015/04/20 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
MySQL池化框架学习接池自定义
2022/07/23 MySQL