最近项目使用到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实现图片验证码识别

    转载地址:https://blog.csdn.net/EB_NUM/article/details/77060009 具体想要实现上面的代码需要安装两个包和一个引擎 在安装之前需要先安装好Python ...

  2. CAPL编程实现诊断刷写，车联网FOTA流程自动化测试（方案篇）

    原创内容,转载请注明出处 本文围绕车联网的ECU,TBOX的FOTA升级业务展开描述.主要讲如何通过CANoe编程实现自动化测试, 验证TBOX在FOTA业务过程中作为一个诊断仪刷写整车其它ECU的流 ...

  3. scala 列表的子集判断

    val list1=List.range(0,5) val list2=List.range(0,2) val list3=List(0,6) list1.contains(2) list1.cont ...

  4. vue之理解异步更新 --- nextTick

    默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要. 当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入 ...

  5. 牛客网Java刷题知识点之为什么HashMap和HashSet区别

    不多说,直接上干货! HashMap  和  HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collection框架的 ...

  6. 深入理解jQuery插件开发【转】

    如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...

  7. 简单的 shell 脚本 切分日志

    为避免日志过大,需要按天分割日志,定时计划任务脚本如下: /data/shell/backup_yesterday_nginx_log.sh declare logs_path="/data ...

  8. JS异步上传Excel 并使用NPOI进行读写操作

    实现功能 导入——客户端使用 ajaxfileupload.js 插件实现Excel的异步上传,并在服务端解析成JSON字符串返回页面 导出——将页面中的grid表拼接成JSON串上传至服务器,在服务 ...

  9. [转]Load ASP.NET MVC Partial Views Dynamically Using jQuery

    本文转自:http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx Most of the t ...

  10. Jquery实现自动生成二级目录

    在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...