横向柱状图主要配置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. MYSQL导入数据报错|MYSQL导入超大文件报错|MYSQL导入大数据库报错:2006 - MySQL server has gone away

    导SQL数据库结构+数据时,如果数据是批量插入的话会报错:2006 - MySQL server has gone away. 解决办法:找到你的mysql目录下的my.ini配置文件(如果安装目录没 ...

  2. Realm的一对多配置以及版本兼容

    前言:本篇博客将介绍Realm的一些高级用法,基本使用在这里 一.配置一对多关系 // // Teacher.h #import <Realm/Realm.h> #import " ...

  3. 浅谈OpenStack架构

    首先,先来了解,什么是OpenStack?   OpenStack是一个云平台管理的项目,它不是一个软件.这个项目由几个主要的组件组合起来完成一些具体的工作.OpenStack是一个旨在为公共及私有云 ...

  4. java 类变量的初始化

    有代码如下:class Price{    final static Price INSTANCE = NEW Price(2.8);    static double initPrice = 20; ...

  5. 探索Windows命令行系列(2):命令行工具入门

    1.理论基础 1.1.命令行的前世今生 1.2.命令执行规则 1.3.使用命令历史 2.使用入门 2.1.启动和关闭命令行 2.2.执行简单的命令 2.3.命令行执行程序使用技巧 3.总结 1.理论基 ...

  6. jquery获取当前选项的属性值a

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

  7. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  8. Ionic开发笔记

    Ionic 开发笔记 记录开发中遇到的一些问题 ion-side-menu,使所有顶部导航标题居中 <!-- 添加 align-title="center" 使顶部导航标题居 ...

  9. centos 7 yum方式安装MySQL 5.6

    本文根据mysql的官方文档操作:https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 由于Centos7 默认数据库是mariabd(网上 ...

  10. mysql中的limit

    mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...