横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下:

  1. var myChart = echarts.init(document.getElementById('thisId'));
  2. /*指定图表的配置项和数据*/
  3. option = {
  4. textStyle:{
  5. color:'#fff',
  6. fontSize:'16'
  7. },
  8. title: {
  9. textStyle:{
  10. color:'#fff',
  11.  
  12. },
  13. left:'50%',
  14. text: '',
  15. /* subtext: '数据来自网络'*/
  16. },
  17. tooltip: {
  18. trigger: 'axis',
  19. axisPointer: {
  20. type: 'shadow'
  21. }
  22. },
  23. legend: {
  24.  
  25. textStyle:{
  26. color:'#fff',
  27. },
  28. /* data: [titleName],*/
  29. },
  30. grid: {//设置图表位置
  31. left: '3%',
  32. right: '4%',
  33. bottom: '3%',
  34. containLabel: true
  35. },
  36. xAxis: {
  37. color:'#fff',
  38. splitLine : {//去掉网格线
  39. show : false
  40. },
  41. position: 'top',//X轴位置
  42. type: 'value',
  43. boundaryGap: [0, 0.01],
  44. axisLabel : {//坐标轴刻度标签的相关设置
  45. rotate:'45',//坐标轴文字旋转角度
  46. show : true,
  47. textStyle : {
  48. color : '#FFF',
  49. align : 'right',
  50. fontSize: 15
  51. }
  52. },
  53.  
  54. axisLine : {
  55.  
  56. lineStyle : {
  57. color : '#FFF'
  58. }
  59. },
  60. axisTick : {
  61. lineStyle : {
  62. color : '#FFF'
  63. }
  64. },
  65. },
  66. yAxis: {
  67.  
  68. type: 'category',//轴的类型分两种 1.category(类别)2.value(值)
  69. data: /*da*/[ '本地商城','网上营业厅', '微信营业厅', '掌上营业厅' ],
  70. axisLabel : {
  71. show : true,
  72. textStyle : {
  73. color : '#FFF',
  74. align : 'right',
  75. fontSize: 15 /*文字大小*/
  76. }
  77. },
  78. axisLine : {
  79. lineStyle : {
  80. color : '#fff'//轴的颜色
  81. }
  82. },
  83. axisTick : {
  84. lineStyle : {
  85. color : '#FFF'//轴上点的颜色
  86. }
  87. },
  88.  
  89. },
  90. series: [
  91. {
  92. name: channelArr,
  93. type: 'bar',
  94. data: /*aa*/indexArr,/*请求回来的数据数组*/
  95.  
  96. label : {
  97. normal : {
  98. show : true,//显示数字
  99. position : 'right'
  100. }
  101. },
  102.  
  103. barWidth : 15,//柱子宽度
  104. itemStyle : {
  105. normal : {
  106. color:'#ccecff',//柱状的颜色
  107. label : {
  108. textStyle : {
  109. fontSize : '15',//柱状上的显示的文字
  110. color:'#ccecff'
  111. }
  112. }
  113. }
  114. },
  115.  
  116. }
  117.  
  118. ]
  119. };
  120. // 使用刚指定的配置项和数据显示图表。
  121. myChart.setOption(option);

echarts_部分图表配置简介_横向柱状图的更多相关文章

  1. echarts_部分图表配置_堆叠折线图

    echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...

  2. echarts_部分图表配置_dataZoom精确控制显示数据数量

    echarts为我们提供了dataZoom组件,当数据过多时就有了它的用武之地,业务场景:数据返回100调可是为了前端显示效果默认只显示20条,其他数据由dataZoom控制显示隐藏: functio ...

  3. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  4. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  5. SpringBoot常用配置简介

    SpringBoot常用配置简介 1. SpringBoot中几个常用的配置的简单介绍 一个简单的Spring.factories # Bootstrap components org.springf ...

  6. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  7. Configuration所有配置简介

    // 内存缓存的设置选项 (最大图片宽度,最大图片高度) 默认当前屏幕分辨率                // .memoryCacheExtraOptions(480, 800) // 硬盘缓存的 ...

  8. Django中的路由配置简介

    Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...

  9. 转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介

    转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...

随机推荐

  1. Python pycrypto 加密与解密

    参考: python 使用 pycrypto‎ 实现 AES 加密解密 参考: 分组对称加密模式:ECB/CBC/CFB/OFB 代码示例 : import hashlib from Crypto.C ...

  2. PHPCMS V9 为今天或几天前文章加new

    今天内发布: {pc:content action="lists" catid="13" order="listorder DESC" nu ...

  3. JavaScript练习笔记整理·3 - 6.25

    欢迎和大家一起来讨论~   基础练习(1):   我的解答为: function array_diff(a, b) { if (b == "") return a; return ...

  4. ReactiveCocoa源码解析(三) Signal代码的基本实现

    上篇博客我们详细的聊了ReactiveSwift源码中的Bag容器,详情请参见<ReactiveSwift源码解析之Bag容器>.本篇博客我们就来聊一下信号量,也就是Signal的的几种状 ...

  5. centos中NAT模式下静态IP连接外网

    使用linux虚拟机时,通常会用到yum命令来安装软件,然而这个命令需要连外网下载软件,用maven下载jar包也需要外网.虚拟机在内网可以互相ping通,然而ping不了外网,于是通过试验,终于找到 ...

  6. 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe

    消息队列NetMQ 原理分析4-Socket.Session.Option和Pipe 前言 介绍 目的 Socket 接口实现 内部结构 Session Option Pipe YPipe Msg Y ...

  7. 游戏UI框架设计(7): 资源国际化技术

    游戏UI框架设计(7) --资源国际化技术 说起"资源国际化"技术,个人认为可以追述到微软Window2000 PC操作系统的发布,在这之前windows98操作系统的开发都是先由 ...

  8. usaco training 4.2.4 Cowcycles 题解

    Cowcycles题解 Originally by Don Gillies [International readers should note that some words are puns on ...

  9. c# 上传附件大小限制的问题

    在c# 相关的asp.net  中.需要设置附件的大小.需要修改2部分. 1.修改metabase.XML 以Windows2003 为例子. 打开 C:\Windows\System32\Inets ...

  10. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...