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

有时我们需要统计自定义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);  
  9.   max = Math.max(max, x1);
  10.   return [x0, x1, item[1]];
  11. });
  12.  

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

总结

以上所述是小编给大家介绍的echarts统计x轴区间的数值实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

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

本站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号