最近项目使用到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. CAPL编程实现诊断刷写，车联网FOTA流程自动化测试（方案篇）

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

  2. vue 修饰符（转载）

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...

  3. oracle 笔记---(五)__内存管理

    ###查看连接池的信息 select connection_pool,status,maxsize from dba_cpool_info            

  4. shell 括号的区别

    $() 用于命令交换 里面会会执行命令,如果你写其他的: 会直接报错的 ` ` 也是用于命令交换的哦   和$() 的操作是一样的 ${ } 用于变量替换 每次调用环境的时候是需要带一个${ } 但是 ...

  5. shell 进阶之匹配字符串

      一,操作字符串 1,字符串长度 expr 命令取字符串函数 自带shell函数读取 2,匹配字符串开头字串的长度   !!!!!!!!!!!!$substring是正则表达式.!!!!!!!!! ...

  6. nodejs初探（一）nodejs开发环境搭建

    简介 JavaScript是一种运行在浏览器的脚本.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件 ...

  7. 安装cloudermanager时出现org.spingframework.web.bind.***** host[] is not present at AnnotationMethodHandlerAdapter.java line 738 ****错误（图文详解）（博主推荐）

    不多说,直接上干货! 首先,这个问题,写给需要帮助的朋友们,本人在此,搜索资料近半天,才得以解决.看过国内和国外,资料甚少.特此,写此博客,为了弥补此错误解决的资料少的缘故! 问题详解  解决办法   ...

  8. c#输入方法名来调用方法(反射)

    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...

  9. winform代码生成器(二)

    代码下载 地址 http://pan.baidu.com/s/1nuZjyat 接着说 上文继续说,这次我们要生成主从表. 此方用到了第三方的 控件 DevExpress 的Gridview .大家可 ...

  10. 微服务学习笔记一：Spring Cloud简介

    1.Spring Cloud是一个工具集:Spring   Cloud是在Spring    Boot的基础上构建的,用于简化分布式系统构建的工具集:使架构师在创建和发布微服务时极为便捷和有效. Sp ...