ECharts y轴(yAxis)
yAxis: {show: true, // 是否显示 y 轴position: 'top', // y 轴的位置('top','bottom') type: 'category', // 坐标轴类型nameLocation: 'end', // 坐标轴名称显示位置nameGap: 15, // 坐标轴名称与轴线之间的距离nameRotate: 10, // 坐标轴名字旋转,角度值inverse: false, // 是否是反向坐标轴nameTextStyle: {color: '#333', // 坐标轴名称的颜色fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)fontSize: '20', // 文字字体大小align: 'left', // 文字水平对齐方式,默认自动('left','center','right')verticalAlign: 'left', // 文字垂直对齐方式,默认自动('top','middle','bottom'lineHeight: '50', // 行高 )backgroundColor: 'red', // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'},axisLine: {show: true, // 是否显示坐标轴轴线symbol: ['none', 'arrow'], // 轴线两端箭头,两个值,none表示没有箭头,arrow表示有箭头symbolSize: [10, 15], // 轴线两端箭头大小,数值一表示宽度,数值二表示高度lineStyle: {color: '#333', // 坐标轴线线的颜色width: '5', // 坐标轴线线宽type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)},},axisTick: {show: true, // 是否显示坐标轴刻度inside: true, // 坐标轴刻度是否朝内,默认朝外length: 5, // 坐标轴刻度的长度lineStyle: {color: '#FFF', // 刻度线的颜色width: 10, // 坐标轴刻度线宽type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)},},axisLabel: {show: true, // 是否显示刻度标签interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有inside: true, // 刻度标签是否朝内,默认朝外rotate: 90, // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从 -90 度到 90 度margin: 10, // 刻度标签与轴线之间的距离// formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式color: '#FFF', // 刻度标签文字的颜色fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)fontSize: '20', // 文字字体大小align: 'left', // 文字水平对齐方式,默认自动('left','center','right')verticalAlign: 'left', // 文字垂直对齐方式,默认自动('top','middle','bottom'lineHeight: '50', // 行高 )backgroundColor: 'red', // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'},splitLine: {show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有color: ['#ccc'], // 分隔线颜色,可以设置成单个颜色,也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色width: 3, // 分隔线线宽type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)},splitArea: {show: true, // 是否显示分隔区域interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有areaStyle: {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形},},data: {textStyle: {color: '#FFF', // 文字的颜色fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)fontSize: '20', // 文字字体大小align: 'left', // 文字水平对齐方式,默认自动('left','center','right')verticalAlign: 'left', // 文字垂直对齐方式,默认自动('top','middle','bottom'lineHeight: '50', // 行高 )backgroundColor: 'red', // 文字块背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'},},
}
ECharts y轴(yAxis)相关推荐
- echarts y轴刻度加单位
echarts y轴刻度加单位 今天学习到的新知识,如何在echarts图表中给刻度加单位. 方法有很多,我用的是formatter来加单位的: yAxis: {min: 0,max: 60,type ...
- 动态设置echarts Y轴最大刻度与最小刻度
动态设置echarts Y轴最大刻度与最小刻度 yAxis: { max: function (value) { return (value.max + 0.01 * (value.min)).toF ...
- Echarts Y轴遮挡解决方案
Echarts Y轴遮挡解决方案 背景:在做手机端的时候要实现图表展示,但是Echarts有个通病,就是对小屏幕的浏览器不太兼容,开始尝试设置绑定div的样式,加上padding :0发现不管用,用谷 ...
- echarts y轴只显示5个刻度_Echarts 双Y轴刻度不一致
项目中使用了 百度Echarts 根据项目需要,要实现双Y轴展示柱状图 最终的样子是这样的 最终效果 实现过程中遇到的问题 一开始是这个样子的(因为没有设置max min,天真的以为只要有数据,就会系 ...
- Echarts Y轴单位自动转换
用Echarts展示交易额趋势时,发现过百万的数字显示的0太难数了,想实现Y轴的单位可以根据金额的大小自动选择单位,在网络上找了好久,做个笔记. Y轴 JS代码如下: yAxis: [{type: ' ...
- vue echarts y轴文本过长,设置超出隐藏,然后显示省略号,并且鼠标悬浮上之后显示全部
效果图 <template><div><!-- 生态流量报警:echarts图2:柱状图 --><div id="main-barChart&quo ...
- echarts y轴文本过长,设置超出隐藏,然后显示省略号,并且鼠标悬浮上之后显示全部
Echarts 标签中文本内容太长的时候怎么办 ? 看如下两块有分别说明: 具体代码如下: <!--引入js文件--> <script src="${ctx}/tiles/ ...
- echarts y轴只显示5个刻度_ECharts 解决双Y轴刻度不一致问题
若最大最小值固定,直接初始化设置option的yAxis的min和max属性值即可: 假设已知固定最大最小值为0和1. var option = { ... yAxis:[ { name: " ...
- Echarts Y轴添加单位
yAxis: {name: 'bpm', //关键代码nameTextStyle: { //关键代码 padding: [30, 0, 0, -30],},type: 'category',// 添加 ...
最新文章
- VC6迁移到VS2008几个问题——良好的代码,从我做起,从现在开始。
- unity实战 实现鼠标选择对象前置显示
- yum 安装php7和相关扩展
- 【NLP】文本相似度的BERT度量方法
- ACM1598并查集方法
- notejs环境搭建
- CGI(通用网关接口)
- linux thread 状态检查,Linux下查看进程的线程 - pstree
- 安徽大学计算机语言学考研真题,2019年安徽大学英语语言文学复试真题回忆
- 《从0到1学习Flink》—— Flink 项目如何运行?
- 20151024-1025-威海-第5届全国高校软件工程专业教育年会参会总结
- 计算机教室联成的网络,多媒体网络教室的功能
- error: ‘__ATOMIC_RELAXED’ undeclared (first use in this function)
- STM32 LL库延时函数 LL_mDelay解析
- Noisy machines: understanding noisy NNs and enhancing robustness to analog hardware errors
- CentOS7 下配置svn的安装及基础配置介绍
- 数据挖掘神经网络算法,人工神经网络分析方法
- android studio(as)找不到手机
- java md5 签名_java md5签名
- 心脏出血(Heartbleed)漏洞浅析、复现
热门文章
- 快上车!Java技术开发大厂直通车马上启动!
- JVM设置Young Gen大小
- centos 6.4 163yuan
- 捷联惯导系统学习4.1(惯导数值更新算法)
- 解决:Error resolving template [/xxx], template might not exist or might not be accessible by any of th
- 计算机画面的音乐素材,电脑作品制中素材的3.ppt
- 个人永久性免费-Excel催化剂功能第96波-地图数据挖宝之全国天气查询(区域最细可到区县,最长预报4天)...
- 分布式全链路灰度发布的探索与实践
- 【校招VIP】互联网校招项目实习对项目的要求不重要?大错特错!你忽略掉的项目考察重点都在这里!
- 关于Arthas如何远程监视Java程序