横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下:

 var myChart = echarts.init(document.getElementById('thisId'));
/*指定图表的配置项和数据*/
option = {
textStyle:{
color:'#fff',
fontSize:'16'
},
title: {
textStyle:{
color:'#fff', },
left:'50%',
text: '',
/* subtext: '数据来自网络'*/
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: { textStyle:{
color:'#fff',
},
/* data: [titleName],*/
},
grid: {//设置图表位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
color:'#fff',
splitLine : {//去掉网格线
show : false
},
position: 'top',//X轴位置
type: 'value',
boundaryGap: [0, 0.01],
axisLabel : {//坐标轴刻度标签的相关设置
rotate:'45',//坐标轴文字旋转角度
show : true,
textStyle : {
color : '#FFF',
align : 'right',
fontSize: 15
}
}, axisLine : { lineStyle : {
color : '#FFF'
}
},
axisTick : {
lineStyle : {
color : '#FFF'
}
},
},
yAxis: { type: 'category',//轴的类型分两种 1.category(类别)2.value(值)
data: /*da*/[ '本地商城','网上营业厅', '微信营业厅', '掌上营业厅' ],
axisLabel : {
show : true,
textStyle : {
color : '#FFF',
align : 'right',
fontSize: 15 /*文字大小*/
}
},
axisLine : {
lineStyle : {
color : '#fff'//轴的颜色
}
},
axisTick : {
lineStyle : {
color : '#FFF'//轴上点的颜色
}
}, },
series: [
{
name: channelArr,
type: 'bar',
data: /*aa*/indexArr,/*请求回来的数据数组*/ label : {
normal : {
show : true,//显示数字
position : 'right'
}
}, barWidth : 15,//柱子宽度
itemStyle : {
normal : {
color:'#ccecff',//柱状的颜色
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#ccecff'
}
}
}
}, } ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

echarts_部分图表配置简介_横向柱状图的更多相关文章

  1. echarts_部分图表配置_堆叠折线图

    echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...

  2. echarts_部分图表配置_dataZoom精确控制显示数据数量

    echarts为我们提供了dataZoom组件,当数据过多时就有了它的用武之地,业务场景:数据返回100调可是为了前端显示效果默认只显示20条,其他数据由dataZoom控制显示隐藏: functio ...

  3. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  4. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  5. SpringBoot常用配置简介

    SpringBoot常用配置简介 1. SpringBoot中几个常用的配置的简单介绍 一个简单的Spring.factories # Bootstrap components org.springf ...

  6. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  7. Configuration所有配置简介

    // 内存缓存的设置选项 (最大图片宽度,最大图片高度) 默认当前屏幕分辨率                // .memoryCacheExtraOptions(480, 800) // 硬盘缓存的 ...

  8. Django中的路由配置简介

    Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...

  9. 转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介

    转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...

随机推荐

  1. 常见浏览器User-Agent大全

    http://blog.csdn.net/tianjinjianzhan/article/details/51702232

  2. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  3. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

    最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000

  4. WCF学习——WCF简介(三)

    一.WCF简介 1.什么是WCF? WCF的全称是:Windows Communication Foundation.从本质上来说,它是一套软件开发包,是微软公司推出的符合SOA思想的技术框架. 2. ...

  5. Web 前端代码规范

    Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...

  6. 避免循环做SQL操作

    经常犯的错误是把一个SQL 操作放置到一个循环中, 这就导致频繁的访问数据库,更重要的是, 这会直接导致脚本的性能低下.以下的例子, 你能够把一个循环操作重置为一个单一的SQL语句. foreach ...

  7. 开源搜索引擎abelkhan

    发起一个开源项目http://www.abelkhan.com/ 目前而言,已经用python编写了一个网络爬虫抓取页面,和一个简单的前端 网络爬虫,已经有很多高手写过,我基本上奉行了拿来主义, 得益 ...

  8. 【Android Developers Training】 32. 向其它应用发送简单数据

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. CentOS 7.2mini版本下编译安装php7.0.10+MySQL5.7.14+Nginx1.10

    一.安装前的准备工作 1.yum update    #更新系统 2.yum install gcc gcc-c++ autoconf automake cmake bison m4 libxml2  ...

  10. iOS获取ipa素材、提取ipa包资源文件

    当我们看到一款优秀的App时,我们可能对它的一些素材比较感兴趣,或者我们也想仿写一款类似app,那么怎么能获取到它的素材资源文件呢? 下面我以ofo举例: 1.打开iTunes,搜索ofo关键字,选择 ...