最近项目使用到Echarts，所以学习了下

根据API，实现Echarts很简单，在这就不多说了，下面就说说项目中碰到的一些需求

1.由于横坐标很多，导致数据不能展示完整，所以需要设置横坐标样式倾斜展示

2.每个数据列（比如柱形图），顶部需要显示具体数值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="ECharts">
  8. <title>Echarts横坐标倾斜,顶部文字显示实现</title>
  9. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  10. </head>
  11. <script type="text/javascript">
  12. var width;
  13. var height;
  14. var myChart;
  15. $(function(){
  16. //自适应设置
  17. width = $(window).width();
  18. height = $(window).height();
  19. $("#mainBar").css("width",width-40);
  20. $("#mainBar").css("height",height-40);
  21. console.log(height);
  22. setEcharts();
  23. });
  24. $(window).resize(function() {
  25. width = $(window).width();
  26. height = $(window).height();
  27. $("#mainBar").css("width",width-40);
  28. $("#mainBar").css("height",height-40);
  29. });
  30. function setEcharts(){
  31. myChart = echarts.init(document.getElementById('mainBar'));
  32. //自适应
  33. window.onresize = myChart.resize;
  34. myChart.setOption({
  35. tooltip : {
  36. trigger: 'axis'
  37. },
  38. legend: {
  39. data:['蒸发量','降水量']
  40. },
  41. toolbox: {
  42. show : true,
  43. feature : {
  44. mark : {show: true},
  45. dataView : {show: true, readOnly: false},
  46. magicType : {show: true, type: ['line', 'bar']},
  47. restore : {show: true},
  48. saveAsImage : {show: true}
  49. }
  50. },
  51. calculable : true,
  52. xAxis : [
  53. {
  54. type : 'category',
  55. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  56. //设置字体倾斜
  57. axisLabel:{
  58. interval:0,
  59. rotate:45,//倾斜度 -90 至 90 默认为0
  60. margin:2,
  61. textStyle:{
  62. fontWeight:"bolder",
  63. color:"#000000"
  64. }
  65. },
  66. }
  67. ],
  68. yAxis : [
  69. {
  70. type : 'value',
  71. splitArea : {show : true}
  72. }
  73. ],
  74. series : [
  75. {
  76. name:'蒸发量',
  77. type:'bar',
  78. data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  79. },
  80. {
  81. name:'降水量',
  82. type:'bar',
  83. data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
  84. //顶部数字展示pzr
  85. itemStyle: {
  86. normal: {
  87. label: {
  88. show: true,//是否展示
  89. textStyle: {
  90. fontWeight:'bolder',
  91. fontSize : '12',
  92. fontFamily : '微软雅黑',
  93. }
  94. }
  95. }
  96. },
  97. }
  98. ]
  99. });
  100. }
  101. </script>
  102. <body>
  103. <div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>
  104. <!-- 标签式引入Eharts 如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。 -->
  105. <script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>
  106. <script>
  107. </script>
  108. </body>
  109. </html>

效果图如下：

还有一个地方可以看到效果图，很不错的一个网站

效果演示

Echarts横坐标倾斜,顶部显示数字的更多相关文章

  1. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  2. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  3. [收集]在iPhone桌面的应用程序图标右上角显示数字

    能够在ios桌面的程序icon右上角显示数字(badge number)的方法 在ViewController中的viewDidLoad方法中添加如下代码即可 - (void)viewDidLoad ...

  4. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  5. flex学习笔记 显示数字步进

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  6. echarts隐藏之后的显示问题

    好久没有更新博客了,今天搞了快一天的网页自适应,头晕...因为最近开始做项目,项目中需要用到图表方面的知识,于是乎接触到了echarts,所以其实我也算是新手了.只是近几天弄了很久的关于图表隐藏之后再 ...

  7. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  8. 快速创建显示数字数据的动画——CountUp.js

    由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...

  9. 【Excle数据透视表】如何在组的顶部显示分类汇总

    调整前                                                                                     调整后        例 ...

随机推荐

  1. python--交互器，编译器

    1在写python的时候调交互器的作用 唯一作用:调试代码 2.编译器

  2. html中的flv视频播放器

    项目中要播放flv视屏,第一时间想到html5的<video>标签,只是很可惜<video>兼容性差也就算了,居然还对格式有明确限制,也就是说只支持Ogg.MPEG4.WebM ...

  3. URL篇之不安全字符处理

    URL是可移植的.它要统一命名因特网上的所有资源,就需要通过各种不同的协议来传送这些资源.这些协议在传输数据时会使用不同的机制,所以,设计URL,使其可以通过任意因特网协议安全地传输是很重要的. UR ...

  4. day07 - Python - 面向对象进阶

    本节内容: 面向对象高级语法部分异常处理异常处理异常处理 经典类vs新式类 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 作业:开发一个支持多用户在线的FTP程序 面向对象高级语法部分 1 ...

  5. mongodb常用语句(集合操作)

    mongodb常用语句(集合操作) 查看集合帮助 db.songs.help(); 查看集合总数据量 db.songs.count(); 查看表空间大小 db.songs.dataSize(); 查看 ...

  6. SpringBoot 之 打war包

    1.修改打包方式为 war <packaging>war</packaging> 2. 修改tomcat 依赖 <dependency> <groupId&g ...

  7. Windows 下推荐软件

    神器 Dism++ Quicker(效率工具) Bandizip 火绒安全软件 Everyting(搜索神器并支持http远程连接) Xmanager VMware Workstation IDMan ...

  8. Java Bean Validation（参数校验） 最佳实践

    转载来自:http://www.cnblogs.com 参数校验是我们程序开发中必不可少的过程.用户在前端页面上填写表单时,前端js程序会校验参数的合法性,当数据到了后端,为了防止恶意操作,保持程序的 ...

  9. [转]ASP.NET MVC中的两个Action之间值的传递--TempData

    本文转自:ASP.NET MVC中的两个Action之间值的传递--TempData 一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在 ...

  10. SpringSecurity 3.2入门（8）自定义权限控制数据库设计

    ; -- ---------------------------- -- Table structure for t_system_authority_info -- ---------------- ...