最近项目使用到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 time,random，os,sys,序列化模块

    一.time模块 表示时间的三种方式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳 ...

  2. python学习13-类的约束 异常处理 日志

    一 .约束 python中约束有两种 第一种,通过抛异常进行约束,这种是子类不按我要求的来,我就给你抛异常(推荐) 操作:提取一个父类. 在父类中给出一个方法.但在方法中不给出任何代码,直接抛异常 # ...

  3. Linux下jenkins改端口、解决内存溢出、版本升级

    1.新版本的jenkins修改端口新版本jenkins的配置文件在/etc/sysconfig/jenkinsvi /etc/sysconfig/jenkins找到JENKINS_PORT=" ...

  4. Mac下Jenkins+SVN+Xcode构建持续导出环境

    1 安装Jenkins Jenkins是基于Java开发的一种持续集成工具.所以呢,要使用Jenkins必须使用先安装JDK. JDK安装 JDK 下载地址 jdk 1.8.png 安装JDK的过程略 ...

  5. ReactJS 页面跳转保存当前scrollTop回来时，自动移动到上次浏览器的位置

    在移动端的操作的时候,相信大家都遇到到这种情况,翻了好几页了,点击一项进去查,然后回来的时候,还想回来我原来的位置. google上也找了一此,有一个组件,但是好像是如果想实现这个功能,页面就得用那个 ...

  6. PHP冒泡排序的实现方法

    <?php function BubbleSort($arr){ $count = count($arr); if($count<=1){ return $arr; } for($i=0; ...

  7. 使用windows的BitLocker+VHD加密“文件夹”

    进入磁盘管理 创建VHD,选定位置 初始化创建的虚拟盘,新建简单卷 给新的盘启用BitLocker 其他: 快速锁定:manage-bde.exe D: -lock  -fd

  8. params传递任意参数

    namespace 传递任意参数{ class Program { static void Main(string[] args) { //可传递任意数量参数 Test(1, 2, "sas ...

  9. js 添加HTML属性的方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. SQL动态配置，动态解析SQL

    在项目中使用SQL动态配置的方式可以让后期的维护和发布后的修改变得更加方便,无论使用那种配置方式都离不开解析成最终真正能执行的SQL.下面代码就是一种比较简单的处理方法,SQL的参数以##括起来. 1 ...