echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM

代码:

  1. option = {
  2. backgroundColor: 'black',
  3. tooltip: {
  4. trigger: 'axis',
  5. backgroundColor: 'rgba(255,255,255,0.8)',
  6. extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
  7. textStyle: {
  8. color: '#6a717b',
  9. },
  10.  
  11. },
  12. grid: {
  13. top: '0.5%',
  14. left: '3%',
  15. right: '11%',
  16. bottom: '2.5%',
  17. containLabel: true
  18. },
  19. yAxis: [{
  20. type: 'category',
  21. data: ['a', 'b', 'c', 'd', 'e', 'f', 'g3', 'h', 'i', 'j'],
  22. inverse: true,
  23. axisTick: {
  24. alignWithLabel: true,
  25.  
  26. },
  27. axisLabel: {
  28. margin: 10,
  29. textStyle: {
  30. fontSize: 18,
  31. color: 'white'
  32. }
  33. },
  34. axisLine: {
  35. lineStyle: {
  36. color: '#2548ac'
  37. }
  38. },
  39.  
  40. }],
  41. xAxis: [{
  42. type: 'value',
  43. axisLabel: {
  44. margin: 10,
  45. interval: 1, //横轴信息全部显示
  46. rotate: -30, //-15度角倾斜显示
  47. textStyle: {
  48. fontSize: 18,
  49. color: 'white',
  50. }
  51. },
  52. axisLine: {
  53. lineStyle: {
  54. color: '#192469'
  55. }
  56. },
  57. splitLine: {
  58. lineStyle: {
  59. color: '#17367c'
  60. }
  61. }
  62. }],
  63. series: [{
  64. name: 'Top 10',
  65. type: 'bar',
  66. barWidth: 26,
  67. data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609],
  68. label: {
  69. normal: {
  70. show: true,
  71. position: 'insideRight',
  72. textStyle: {
  73. color: 'blue', //color of value
  74. fontSize: 18,
  75. }
  76. }
  77. },
  78. itemStyle: {
  79.  
  80. normal: {
  81. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  82. offset: 0,
  83. color: '#0590eb' // 0% 处的颜色
  84. }, {
  85. offset: 1,
  86. color: '#08e3f1' // 100% 处的颜色
  87. }], false),
  88. barBorderRadius: [0, 15, 15, 0],
  89. shadowColor: 'rgba(0,0,0,0.1)',
  90. shadowBlur: 3,
  91. shadowOffsetY: 3
  92. }
  93. }
  94. }]
  95. };

echarts横向柱状图Demo的更多相关文章

  1. echarts横向柱状图如果想打开网址

    代码: var data = eval(data); var xList = new Array(); var yList = new Array(); var urlList = new Array ...

  2. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

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

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

  4. echarts_部分图表配置简介_横向柱状图

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

  5. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  6. http://echarts.baidu.com/demo.html#effectScatter-map

    http://echarts.baidu.com/demo.html#effectScatter-map

  7. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  8. Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt.  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...

  9. Echarts绘制横向柱状图

    效果图: 关键配置: 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

随机推荐

  1. SRM-供应商关系管理-组织模式

    https://wiki.scn.sap.com/wiki/display/SRM/PPOMA_BBP 供应商关系管理 ... 组织模式 PPOMA_BBP     跳到元数据结束   由Ivy Li ...

  2. LeetCode题解 Permutations II 和 Permutations I ——回溯算法

    这个算法感觉还是很陌生的.算法导论里没有讲这个算法,而数据结构与算法分析只用了一节来阐述.我居然跳过去了..尴尬. 笨方法解决的: 第一题: 给定一个元素不重复的数组,枚举出他们的全排列. 方法1:递 ...

  3. Delphi 集合和字符串互转

    集合和字符串互转  集合:     type TSocketState = (ssDisconnecting, ssDisconnected, ssConnected, ssConnecting, s ...

  4. jquery接触初级----- 一种新奇的选择器用法

    今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...

  5. ADO.NET基础知识

    ADO.NET定义 ADO是ActiveX Data Objects的缩写,ADO.NET是数据库应用程序和数据源之间沟通的桥梁,主要提供一个面向对象的数据访问架构,用来开发数据库应用程序,就是一组类 ...

  6. SQL 语句 写法

    SELECT * FROM article where  userid=4 order by sort asc LIMIT 0,10; 先根据写where 条件,再排序,在LIMIT.

  7. c 时间 学习

    linux #include <stdio.h> #include <time.h> int main(int argc,char **argv) { //两种时间的获取方法 ...

  8. Structs复习 Path问题

    Path问题相对复杂 主要是路劲问题 但结论很简单 就是统一使用绝对路径 jar包 web.xml <?xml version="1.0" encoding="UT ...

  9. Javascript中构造函数的返回值问题和new对象的过程

    首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...

  10. C# Excel导数据

    遇到的几个坑,记录一下. 隐藏表,隐藏行,隐藏列, 单元格合并 => 拆分并填充内容, 显示隐藏列,结果那个列 还是不显示出来,拖动旁边的列也不显示. 结果在旁边的列上,按左右箭头键就出来了,也 ...