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. Servlet3模块化应用中,@Controller没有被注入,导致出现:No mapping found for HTTP request with URI [/xxx/xxx] in DispatcherServlet with name 'springmvc'

    问题描述:Servlet3模块化应用中,@Controller没有被注入,导致出现: org.springframework.web.servlet.DispatcherServlet noHandl ...

  2. spark 集成elasticsearch

    pyspark读写elasticsearch依赖elasticsearch-hadoop包,需要首先在这里下载,版本号可以通过自行修改url解决. """ write d ...

  3. gevent mysql

    使用gevent实现mysql并发时,每个greenlet应该独享一个mysql连接,否则,不同的greenlet之间会相互影响. ultramysql doesn't allow you to ma ...

  4. python中序列化json模块和pickle模块

    内置模块和第三方模块 json模块和pickle 模块(序列化模块) 什么是序列化? 序列化就是将内粗这种的数据类型转成另一种格式 序列化:字典类型——>序列化——>其他格式——>存 ...

  5. php 获取文件后缀最简单的方法

    1 <?php 2 $recordingname = '通话录音@18502290616(18502290616)_20171103142448.mp3'; 3 $suffix = end(ex ...

  6. split()方法解析

    split()方法用于将字符串分割为字符串数组. 废话不多说,直接贴代码: var str="How are you doing today?" console.log(str.s ...

  7. JAVAWEB 一一 框架整合(SSH,Spring+Struts2+Hibernate IOC/DI AOP声明式事务处理 定时任务)

    package org.springframework.orm.hibernate3; import java.io.Serializable; import java.util.List; impo ...

  8. SSM商城项目(一)

    1. 学习计划 1.电商行业的背景. 2.宜立方商城介绍 3.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 4.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomc ...

  9. Shader基础(渲染管线)

    Shader原理部分 渲染绘图管线流程:     1.顶点处理(坐标系的转换) 一个模型有自身的方向(前方,上方,右方等)和中心点,既本地坐标系: 将这个模型放到场景当中,通过场景中的世界坐标原点和世 ...

  10. camstar --调用自定义的CDO报帐号没有执行权限的错误

    解决: 访问站点--〉modeling-->role-->Default Modeling-->筛选(如:modeling or Inquiry) 在右边找到自己定义的CDO(ser ...