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. list<T>中的按特定顺序排序

    前段时间有个任务,就是把参数要按特定顺序排序,就是要是在一张大的参数表中,只选取,2,5,12,9,13,10 这几个参数,并按上述顺序进行排序. 假设这个参数在一个类中.例如: 上述参数序列就存在P ...

  2. ACM__队列

    今天学回顾bfs的时候遇到了,遂总结一下 队列是一种特殊的线性表,只允许在队列的前端(front)进行删除操作,在队尾进行插入操作,进行插入操作的端称作队尾,进行删除操作的端称作对头.(来自百度百科) ...

  3. 灵活控制 Hibernate 的日志或 SQL 输出,以便于诊断

    我们在使用 Hibernate 时一般只会关注是否显示生成的 SQL 语句,不过有些时候还不够.默认时 Hibernate 执行的 SQL 语句是打印在控制台上的,它也可以配置为输出给 Log4J 或 ...

  4. windows下如何查看端口,关闭端口,开启端口

    如何查看端口 在Windows 2000/XP/Server 2003中要查看端口,可以使用NETSTAT命令: “开始">"运行”>“cmd”,打开命令提示符窗口.在 ...

  5. Unity3D教程宝典之Shader篇

    教程目录 基础讲:Shader学习方法基础讲:基础知识特别讲:常见问题解答特别讲:CG函数 第一讲: Shader总篇第二讲: Fixed Function Shader 第三讲: Vertex&am ...

  6. 解决ngui挡住粒子的问题

    using UnityEngine; using System.Collections; [ExecuteInEditMode] public class ControlParticle : Mono ...

  7. js高级-原型链

    JavaScript是基于原型的面向对象的语言(相当于一个基类,父类),而不是像Java通过类模板构造实例,通过原型实现属性函数的复用 函数都有 prototype属性 指向函数的原型对象 只有函数根 ...

  8. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  9. iview 表单验证

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  10. centos 升级sqlite3

    1.yum remove sqlite3 2. 下载: wget -O sqlite-autoconf-.tar.gz https://www.sqlite.org/2019/sqlite-autoc ...