echarts横向柱状图Demo
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的更多相关文章
- echarts横向柱状图如果想打开网址
代码: var data = eval(data); var xList = new Array(); var yList = new Array(); var urlList = new Array ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- http://echarts.baidu.com/demo.html#effectScatter-map
http://echarts.baidu.com/demo.html#effectScatter-map
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo
前言 上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt. 本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...
- Echarts绘制横向柱状图
效果图: 关键配置: 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示
随机推荐
- Linux系统基础5周入门精讲(Linux发展过程)
什么是操作系统 作为应用开发程序员,我们开发的软件都是应用软件,而应用软件必须运行于操作系统之上,操作系统则运行于硬件之上,应用软件是无法直接操作硬件的,应用软件对硬件的操作必须调用操作系统的接口,由 ...
- 解决eclipse新建项目看不到src/main/java目录办法
1.eclipse->window->preferences->java->compiler->选择本地要用的Java版本 2.eclipse->window-&g ...
- deploy service on swarm
转自:https://www.cnblogs.com/jsonhc/p/7852530.html swarm集群配置完成后,查看一些基本的信息: [root@manager1 ~]# docker-m ...
- wx小程序获取组件属性数据data-prop
在微信小程序中有时会在组件上定义一些属性,使用data-来定义 <view data-idvalue="id" data-Index-Name="IndexName ...
- 如何创建Servlet
//Servlet的生命周期:从Servlet被创建到Servlet被销毁的过程 //一次创建,到处服务 //一个Servlet只会有一个对象,服务所有的请求 /* * 1.实例化(使用构造方法创建对 ...
- GIS案例学习笔记-多边形内部缓冲区地理模型
GIS案例学习笔记-多边形内部缓冲区地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:对于多边形,建立内部缓冲区. 问题:ArcGIS缓冲工具不支持内部 ...
- C++读取txt和保存到txt
哇,今天又重新用C++来写了一些代码发现自己竟然在类的使用和文件读取和保存上面特别头疼,于是,各种问度娘+各种翻看之前的代码.不禁感叹,自己的代码还是写的太少了,对这些一点都不熟悉.于是,今晚!一定! ...
- Java编译时多态和运行时多态
来源:https://blog.csdn.net/wendizhou/article/details/73733061 编译时多态:主要是方法的重载,通过参数列表的不同来区分不同的方法. 运行时多态: ...
- SpringBoot整合RabbitMQ,实现消息发送和消费以及多个消费者的情况
下载安装Erlang和RabbitMQ Erlang和RabbitMQ:https://www.cnblogs.com/theRhyme/p/10069611.html AMQP协议 https:// ...
- redis分布式锁Redisson扩展
如果大家项目中Redis是多机部署的可以来好好看看这篇实现,讲的非常好. 使用Redisson实现分布式锁,Spring AOP简化之 源码 Redisson概述 Redisson是一个在Redi ...