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(出处: 中国电子技术论坛) 设备支持 ...
随机推荐
- Python pycrypto 加密与解密
参考: python 使用 pycrypto 实现 AES 加密解密 参考: 分组对称加密模式:ECB/CBC/CFB/OFB 代码示例 : import hashlib from Crypto.C ...
- PHPCMS V9 为今天或几天前文章加new
今天内发布: {pc:content action="lists" catid="13" order="listorder DESC" nu ...
- JavaScript练习笔记整理·3 - 6.25
欢迎和大家一起来讨论~ 基础练习(1): 我的解答为: function array_diff(a, b) { if (b == "") return a; return ...
- ReactiveCocoa源码解析(三) Signal代码的基本实现
上篇博客我们详细的聊了ReactiveSwift源码中的Bag容器,详情请参见<ReactiveSwift源码解析之Bag容器>.本篇博客我们就来聊一下信号量,也就是Signal的的几种状 ...
- centos中NAT模式下静态IP连接外网
使用linux虚拟机时,通常会用到yum命令来安装软件,然而这个命令需要连外网下载软件,用maven下载jar包也需要外网.虚拟机在内网可以互相ping通,然而ping不了外网,于是通过试验,终于找到 ...
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
消息队列NetMQ 原理分析4-Socket.Session.Option和Pipe 前言 介绍 目的 Socket 接口实现 内部结构 Session Option Pipe YPipe Msg Y ...
- 游戏UI框架设计(7): 资源国际化技术
游戏UI框架设计(7) --资源国际化技术 说起"资源国际化"技术,个人认为可以追述到微软Window2000 PC操作系统的发布,在这之前windows98操作系统的开发都是先由 ...
- usaco training 4.2.4 Cowcycles 题解
Cowcycles题解 Originally by Don Gillies [International readers should note that some words are puns on ...
- c# 上传附件大小限制的问题
在c# 相关的asp.net 中.需要设置附件的大小.需要修改2部分. 1.修改metabase.XML 以Windows2003 为例子. 打开 C:\Windows\System32\Inets ...
- JavaScript+canvas 绘制多边形
效果图: <body> <canvas id="square" width="500"></canvas> <canv ...