echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置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_部分图表配置简介_横向柱状图的更多相关文章
- echarts_部分图表配置_堆叠折线图
echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...
- echarts_部分图表配置_dataZoom精确控制显示数据数量
echarts为我们提供了dataZoom组件,当数据过多时就有了它的用武之地,业务场景:数据返回100调可是为了前端显示效果默认只显示20条,其他数据由dataZoom控制显示隐藏: functio ...
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- SpringBoot常用配置简介
SpringBoot常用配置简介 1. SpringBoot中几个常用的配置的简单介绍 一个简单的Spring.factories # Bootstrap components org.springf ...
- JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...
- Configuration所有配置简介
// 内存缓存的设置选项 (最大图片宽度,最大图片高度) 默认当前屏幕分辨率 // .memoryCacheExtraOptions(480, 800) // 硬盘缓存的 ...
- Django中的路由配置简介
Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...
- 转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介
转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...
随机推荐
- MYSQL导入数据报错|MYSQL导入超大文件报错|MYSQL导入大数据库报错:2006 - MySQL server has gone away
导SQL数据库结构+数据时,如果数据是批量插入的话会报错:2006 - MySQL server has gone away. 解决办法:找到你的mysql目录下的my.ini配置文件(如果安装目录没 ...
- Realm的一对多配置以及版本兼容
前言:本篇博客将介绍Realm的一些高级用法,基本使用在这里 一.配置一对多关系 // // Teacher.h #import <Realm/Realm.h> #import " ...
- 浅谈OpenStack架构
首先,先来了解,什么是OpenStack? OpenStack是一个云平台管理的项目,它不是一个软件.这个项目由几个主要的组件组合起来完成一些具体的工作.OpenStack是一个旨在为公共及私有云 ...
- java 类变量的初始化
有代码如下:class Price{ final static Price INSTANCE = NEW Price(2.8); static double initPrice = 20; ...
- 探索Windows命令行系列(2):命令行工具入门
1.理论基础 1.1.命令行的前世今生 1.2.命令执行规则 1.3.使用命令历史 2.使用入门 2.1.启动和关闭命令行 2.2.执行简单的命令 2.3.命令行执行程序使用技巧 3.总结 1.理论基 ...
- jquery获取当前选项的属性值a
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Ionic开发笔记
Ionic 开发笔记 记录开发中遇到的一些问题 ion-side-menu,使所有顶部导航标题居中 <!-- 添加 align-title="center" 使顶部导航标题居 ...
- centos 7 yum方式安装MySQL 5.6
本文根据mysql的官方文档操作:https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 由于Centos7 默认数据库是mariabd(网上 ...
- mysql中的limit
mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...