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

代码:

option = {
backgroundColor: 'black',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle: {
color: '#6a717b',
}, },
grid: {
top: '0.5%',
left: '3%',
right: '11%',
bottom: '2.5%',
containLabel: true
},
yAxis: [{
type: 'category',
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g3', 'h', 'i', 'j'],
inverse: true,
axisTick: {
alignWithLabel: true, },
axisLabel: {
margin: 10,
textStyle: {
fontSize: 18,
color: 'white'
}
},
axisLine: {
lineStyle: {
color: '#2548ac'
}
}, }],
xAxis: [{
type: 'value',
axisLabel: {
margin: 10,
interval: 1, //横轴信息全部显示
rotate: -30, //-15度角倾斜显示
textStyle: {
fontSize: 18,
color: 'white',
}
},
axisLine: {
lineStyle: {
color: '#192469'
}
},
splitLine: {
lineStyle: {
color: '#17367c'
}
}
}],
series: [{
name: 'Top 10',
type: 'bar',
barWidth: 26,
data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609],
label: {
normal: {
show: true,
position: 'insideRight',
textStyle: {
color: 'blue', //color of value
fontSize: 18,
}
}
},
itemStyle: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0590eb' // 0% 处的颜色
}, {
offset: 1,
color: '#08e3f1' // 100% 处的颜色
}], false),
barBorderRadius: [0, 15, 15, 0],
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 3,
shadowOffsetY: 3
}
}
}]
};

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. elasticsearch-java

    elastissearch的JAVA客户端 官网  java api文档  https://www.elastic.co/guide/en/elasticsearch/client/java-api/ ...

  2. tfs对接数据-File

    在使用tfs时,数据结构 /** * getFile */ @RequestMapping("/tfs/{fileName}") public ResponseEntity< ...

  3. ORM查询api

    下面的方法都是对查询的结果进行出理:比如objects.filter.values()... 1)values(*field):返回一个可迭代的字典序列<QuerySet: [{name='小王 ...

  4. RESET MASTER和RESET SLAVE使用场景和说明,以及清除主从同步关系

    mysql主从复制中,需要将从库提升为主库,需要取消其从库角色,这可通过执行RESET SLAVE ALL清除从库的同步复制信息.包括连接信息和二进制文件名.位置.从库上执行这个命令后,使用show ...

  5. Spring AOP demo 和获取被CGLIB代理的对象

    本文分为两部分:1)给出Spring AOP的一个例子(会使用CGLIB代理):2)给出获取被CGLIB代理的原始对象. 1.Spring AOP Demo 这部分参考了博文(http://www.v ...

  6. [CI]CodeIgniter特性 & 结构

    ------------------------------------------------------------------------------------------------- 市场 ...

  7. Hibernate 再接触 多对一与一对多

    多对一单向关联 数据库设计: 错误做法:在多方加外键 在多这一方加外键 第一种 annotation Group.java package com.bjsxt.hibernate; import ja ...

  8. 安装mysql 初始化的时候报错 Can't find file: './mysql/db.frm' (errno: 13) ERROR: 1017

    目录下没有权限 需要权限

  9. django中使用mysql数据库的事务

    django中怎么使用mysql数据库的事务   Mysql数据库事务: 在进行后端业务开始操作修改数据库时,可能会涉及到多张表的数据修改,对这些数据的修改应该是一个整体事务,即要么一起成功,要么一起 ...

  10. h5内容初探

    h5简介: h5新特性 h5新增标签 article  和  section 的区别相当于 div  和  p标签的区别 1—6都是块级元素 h5新增属性 拖放 拖动事件 <style> ...