最近项目使用到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 Excel操作库

    xlrd:支持.xls..xlsx读 xlwt:只支持.xls写 xlutils:只支持.xls读写 依赖于xlrd和xlwt xlwings:支持.xls读,.xlsx读写 可以实现Excel和Py ...

  2. Ionic3，关于配置公共的css文件，引用非标准的文件（三）

    说明 在开发过程中,很多样式为了能够共用,这样能够节省很大一部分时间用来编写样式,同时,一个完整的共用模板,在进行样式更换的时候,可以达到事半功倍的效果,因此在开发效率上也可以获得提高. 相关步骤: ...

  3. nginx 问题总结

    1, 403错误 403是很常见的错误代码,一般就是未授权被禁止访问的意思. 可能的原因有两种:Nginx程序用户无权限访问web目录文件Nginx需要访问目录,但是autoindex选项被关闭 修复 ...

  4. lxc 容器基础配置篇

    一, 首先配置lxc需要的网卡断 吧eth0复制一份变为br0 配置br0 配置eth0 重启网卡   /etc/init.d/network restart 安装lxc软件 需要epel源--- y ...

  5. vue嵌套路由 && 404重定向

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...

  6. PHP jQuery实现上传图片时预览图片的功能实例

    在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...

  7. 基于 jdk1.7 发布一个 WebService 服务

    1 服务端的发布 第一步: 创建一个 Java 项目第二步: 创建一个类, 加入 Webservice 注解第三步: 提供一个方法 sayHello第四步: 在 main 方法中调用 jdk 提供的发 ...

  8. 详解 UWP (通用 Windows 平台) 中的两种 HttpClient API

    UWP (通用 Windows 平台) 应用开发者在构建通过 HTTP 与 Web 服务或服务器断点交互的应用时,有多种 API 可以选择.要在一个托管 UWP 应用中实现 HTTP 客户端角色,最常 ...

  9. 解决python3缺少zlib的问题

    解决python3缺少zlib的问题 Table of Contents 1. 安装zlib 2. 重新编译安装python 3. 补充说明 在使用python3运行spark时,报缺少zlib的错误 ...

  10. random模块/string模块

    一.random模块 random模块可以很容易生成随机数和随机字符串. random.randint(1, 100) # 1-100之间取一个随机数 random.randrange(1, 100) ...