经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
echarts统计x轴区间的数值
来源:cnblogs  作者:blacker50  时间:2019/7/8 8:49:34  对本文有异议

有时我们需要统计自定义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来处理数据的部分修改成自己拼装成需要的格式

  1. var bins = ecStat.histogram(girth);
  2. var min = Infinity;
  3. var max = -Infinity;
  4. edata = echarts.util.map(bins.data, function (item, index) {
  5. var x0 = bins.bins[index].x0;
  6. var x1 = bins.bins[index].x1;
  7. interval = x1 - x0;
  8. min = Math.min(min, x0);  
      max = Math.max(max, x1);
  9.   return [x0, x1, item[1]];
  10. });

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

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

 

  1. <div id="main1" style="width: 1000px;height: 500px"></div>
  2. <script type="text/javascript">
  3. $(function(){
  4. generateChart();
  5. });
  6. function generateChart(){
  7. var myChart1 = echarts.init(document.getElementById('main1'));
  8. 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];
  1. //自定义拼装数据方式
         var edata = new Array();
  2. var scopeMin = 0;
  3. var scopeMax = 100;
  4. var interval = (scopeMax-scopeMin)/10;
  5. var tmin = scopeMin;
  6. while(tmin < scopeMax){
  7. var x0 = tmin;
  8. var x1 = tmin+interval;
  9. var samplenum = 0;
  10. for(var i=0;i<girth.length;i++){
  11. if((scopeMin == x0 && girth[i] < x0) || (x0 <= girth[i] && x1 > girth[i])
  12. ||(scopeMin == x1 && girth[i] > x1)) {
  13. samplenum++;
  14. }
  15. }
  16. tmin += interval;
  17. edata.push([x0, x1, samplenum]);
  18. }
  19. var option = {
  20. color: ['rgb(25, 183, 207)'],
  21. grid: {
  22. top: 80,
  23. containLabel: true
  24. },
  25. xAxis: [{
  26. type: 'value',
  27. min: scopeMin,
  28. max: scopeMax,
  29. interval: interval
  30. }],
  31. yAxis: [{
  32. type: 'value',
  33. }],
  34. series: [{
  35. name: 'height',
  36. type: 'custom',
  37. renderItem: renderItem,
  38. label: {
  39. normal: {
  40. show: true,
  41. position: 'top'
  42. }
  43. },
  44. encode: {
  45. x: [0, 1],
  46. y: 2,
  47. tooltip: 2,
  48. label: 2
  49. },
  50. // data: data
  51. data: edata
  52. }]
  53. };
  54. myChart1.setOption(option);
  55. window.onresize = function () {
  56. myChart1.resize();
  57. }
  58. }
  59. function renderItem(params, api) {
  60. var yValue = api.value(2);
  61. var start = api.coord([api.value(0), yValue]);
  62. var size = api.size([api.value(1) - api.value(0), yValue]);
  63. var style = api.style();
  64. return {
  65. type: 'rect',
  66. shape: {
  67. x: start[0] + 1,
  68. y: start[1],
  69. width: size[0] - 2,
  70. height: size[1]
  71. },
  72. style: style
  73. };
  74. }
  75. </script>

 

原文链接:http://www.cnblogs.com/HexUha/p/11141651.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号