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. 页面中onclick事件引号问题

    第一种:html中onclick调用事件 <p id="txt" onclick="changeSize()">加括弧的changeSize()&l ...

  2. newCachedThreadPool使用案例

    newCachedThreadPool 缓存默认60s 猜下你的结果 package com.juc.threadpool; import java.util.concurrent.ExecutorS ...

  3. java 实现Bridge模式(转)

    原文:http://chjking.blog.163.com/blog/static/6439511120081152534252/ 看了网上一些关于咖啡加奶的例子,觉得真是天下文章一大抄,不管好的坏 ...

  4. 解决 'Could not convert variant of type (NULL) into type (String)

    写存储过程中有不允许为空的字段,在客户端转化取数时显示 Could not convert variant of type (NULL) into type (String) 可以在存储过程中使用is ...

  5. ReactiveX 学习笔记(16)RxPY

    RxPY RxPY 是 ReactiveX 的 Python语言实现. # 安装 RxPY $ pip3 install rx Successfully installed rx-1.6.1 Basi ...

  6. WinForm textbox 全选

    原地址:忘了 textBox1.KeyPress += anyTextBox_KeyPress; private void anyTextBox_KeyPress(object sender, Sys ...

  7. 利用等概率Rand5产生等概率Rand3(转)

    问题本身很明确,但不知道起个什么题目好,姑且先这么说吧. 问题描述:现在有一个叫做Rand5的函数,可以生成等概率的[0, 5)范围内的随机整数,要求利用此函数写一个Rand3函数(除此之外,不能再使 ...

  8. CAP与Base理论

    分布一致性的提出 在分布式系统中要解决的一个重要问题就是数据的复制.在我们的日常开发经验中,相信很多开发人员都遇到过这样的问题:假设客户端C1将系统中的一个值K由V1更新为V2,但客户端C2无法立即读 ...

  9. 使用yii\filters下的比如\PageCache需要在web.php里面的组件上配置'cache' => [ 'class' => 'yii\caching\FileCache', ],

    public function behaviors(){ /*需要在config文件下的web.php里面加上 'cache' => [ 'class' => 'yii\caching\F ...

  10. 递归算法结合数据库 解析 java树形结构

    1.准备表结构及对应的表数据a.表结构: create table TB_TREE ( CID NUMBER not null, CNAME VARCHAR2(50), PID NUMBER //父节 ...