echarts xAxis 和 yAxis - x 轴、y 轴和网格线的详细配置
????博主：小猫娃来啦
????文章核心：echarts的xAxis和yAxis——x轴y轴以及网格线的详细配
目录
先详细看一下xAxis和yAxis配置的图表效果
下图详细的标注了图表中x轴y轴可见的内容
通过配置xAxis和yAxis可实现内容
温馨提示:复制代码之前请先下载并引入echarts文件
完整配置代码展示
总结
先详细看一下xAxis和yAxis配置的图表效果
网络异常，图片无法展示
|
下图详细的标注了图表中x轴y轴可见的内容
网络异常，图片无法展示
|
说明一下：
x轴y轴在echarts配置项里，从内容上来说大体上没有太大区别，x轴能用的配置项y轴基本也可以用。
通过配置xAxis和yAxis可实现内容
- 坐标轴箭头的样式，颜色，风格
- 网格线颜色，样式
- 网格区域
- 坐标轴刻度的颜色，指向
- 坐标轴刻度文字数据的颜色，旋转角度，颜色，风格，字体，粗细，大小
- 坐标轴名称颜色， 风格，边距，偏移
- 坐标轴箭头
and so on
温馨提示:复制代码之前请先下载并引入echarts文件
<script src="./js/echarts.js"></script>完整配置代码展示
option = {
xAxis: {
show: true, //是否显示 x 轴
position: 'bottom', //x轴的位置 (可选位置top bottom)
offset: 0, //x轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type: 'category', //坐标轴类型 (可选value category time log)
name: 'x轴', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置 (可选start center end)
nameTextStyle: { //坐标轴名称的文字样式
color: 'black', //坐标轴名称的颜色
fontSize:30, //坐标轴名称的大小 (用数字表示)
fontWeight:'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
fontstyle:'normal', //坐标轴文字样式 (可选normal italic oblique)
fontFamily:'华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
padding: [5, 0, 2, -5] //坐标轴文字边距 (上右下左)
},
nameGap: 25, //坐标轴名称与轴线之间的距离 (用数字表示)
nameRotate: 0, //坐标轴名字旋转的角度值
inverse:false, //是否为反向坐标轴
axisLine: { //坐标轴轴线设置
show: true, //是否显示坐标轴轴线
symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
symbolSize: [8, 8], //箭头大小 ([宽度,高度])
symbolOffset: [0, 7], //箭头偏移
lineStyle: { //坐标轴的线
color: 'green', //线的颜色
width: 3, //线的粗细程度 (用数字表示)
type: 'solid', //线的类型 (可选solid dotted dashed)
opacity:1 //线的透明度 (用0~1的小数表示)
}
},
axisTick: { //坐标轴刻度设置
show: true, //是否显示坐标轴刻度
inside: true, //坐标轴刻度指向 (true表示向上 false表示向下)
alignWithLabel:true, //刻度线是否和标签对齐
length: 5, //坐标轴刻度长度
lineStyle: { //坐标轴刻度的样式
color: 'black', //坐标轴刻度的颜色
width: 2, //坐标轴刻度的粗细程度 (用数字表示)
type: 'solid' //坐标轴刻度的类型 (可选solid dotted dashed)
}
},
axisLabel: { //坐标轴刻度文字的设置
show: true, //是否显示
inside: false, //坐标轴刻度文字指向 (true表示向上 false表示向下)
rotate: 30, //坐标轴刻度文字的旋转角度
margin: 10, //坐标轴刻度文字与轴线之间的距离
color: 'red', //坐标轴刻度文字的颜色
fontSize:17, //坐标轴刻度文字的大小 (用数字表示)
fontWeight:'lighter', //坐标轴刻度文字的加粗程度 (可选bold bolder lighter normal)
fontstyle:'normal', //坐标轴刻度文字的样式 (可选normal italic oblique)
fontFamily:'华文行楷', //坐标轴刻度文字的风格 (可选楷体 宋体 华文行楷等等)
padding: [5, 0, 2, -5] //坐标轴刻度文字的边距 (上右下左)
},
splitLine: { //网格线
show: true, //是否显示
lineStyle: { //网格线样式
color: '#0735a2', //网格线颜色
width: 1, //网格线的加粗程度
type: 'dashed' //网格线类型
}
},
splitArea: { //网格区域
show: true //是否显示
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据
},
yAxis: {
show: true, //是否显示 y 轴
position: 'bottom', //y轴的位置 (可选位置top bottom)
offset: 0, //y轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type: 'category', //坐标轴类型 (可选value category time log)
name: '单位/个', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置 (可选start center end)
nameTextStyle: { //坐标轴名称的文字样式
color: 'black', //坐标轴名称的颜色
fontSize:30, //坐标轴名称的大小 (用数字表示)
fontWeight:'bold', //坐标轴文字加粗程度 (可选bold bolder lighter normal)
fontstyle:'normal', //坐标轴文字样式 (可选normal italic oblique)
fontFamily:'华文行楷', //坐标轴文字风格 (可选楷体 宋体 华文行楷等等)
padding: [5, 0, 2, -5] //坐标轴文字边距 (上右下左)
},
nameGap: 25, //坐标轴名称与轴线之间的距离 (用数字表示)
nameRotate: 0, //坐标轴名字旋转的角度值
inverse:false, //是否为反向坐标轴
axisLine: { //坐标轴轴线设置
show: true, //是否显示坐标轴轴线
symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
symbolSize: [8, 8], //箭头大小 ([宽度,高度])
symbolOffset: [0, 7], //箭头偏移
lineStyle: { //坐标轴的线
color: 'green', //线的颜色
width: 3, //线的粗细程度 (用数字表示)
type: 'solid', //线的类型 (可选solid dotted dashed)
opacity:1 //线的透明度 (用0~1的小数表示)
}
},
axisTick: { //坐标轴刻度设置
show: true, //是否显示坐标轴刻度
inside: true, //坐标轴刻度指向 (true表示向上 false表示向下)
alignWithLabel:true, //刻度线是否和标签对齐
length: 5, //坐标轴刻度长度
lineStyle: { //坐标轴刻度的样式
color: 'black', //坐标轴刻度的颜色
width: 2, //坐标轴刻度的粗细程度 (用数字表示)
type: 'solid' //坐标轴刻度的类型 (可选solid dotted dashed)
}
},
axisLabel: { //坐标轴刻度文字的设置
show: true, //是否显示
inside: false, //坐标轴刻度文字指向 (true表示向上 false表示向下)
rotate: 0, //坐标轴刻度文字的旋转角度
margin: 10, //坐标轴刻度文字与轴线之间的距离
color: 'red', //坐标轴刻度文字的颜色
fontSize:17, //坐标轴刻度文字的大小 (用数字表示)
fontWeight:'lighter', //坐标轴刻度文字的加粗程度 (可选bold bolder lighter normal)
fontstyle:'normal', //坐标轴刻度文字的样式 (可选normal italic oblique)
fontFamily:'宋体', //坐标轴刻度文字的风格 (可选楷体 宋体 华文行楷等等)
padding: [5, 0, 2, -5] //坐标轴刻度文字的边距 (上右下左)
},
splitLine: { //网格线
show: true, //是否显示
lineStyle: { //网格线样式
color: '#0735a2', //网格线颜色
width: 1, //网格线的加粗程度
type: 'dashed' //网格线类型
}
},
splitArea: { //网格区域
show: true //是否显示
},
data: ['100', '500', '1000', '1500', '2000', '2500', '3000', '4000', '5000', '6000', '7000', '8000'] //坐标轴刻度文字数据
},
}
总结：
从六个方面总结xAxis和yAxis的配置：数据类型：
类目轴（category）：用于展示离散的类目数据，如名称、日期等。
数值轴（value）：用于展示连续的数值数据，可以是整数或小数。
时间轴（time）：用于展示时间数据，支持各种时间格式。
对数轴（log）：用于展示对数关系的数据。
坐标轴位置：
xAxis：可放置在图表的底部（默认），也可以放置在顶部。
yAxis：可放置在图表的左侧（默认），也可以放置在右侧。
坐标轴定义：
type：指定坐标轴的类型，如 'category'、'value' 等。
data：当轴类型为类目轴时，用于指定类目数据。
min 和 max：用于指定数值轴或时间轴的最小值和最大值。
坐标轴刻度：
axisTick：控制轴刻度的显示与隐藏。
axisLabel：调整刻度标签的样式、格式及显示方式。
splitLine：控制刻度线的显示与隐藏。
坐标轴轴线和网格线：
axisLine：控制轴线的样式，可以设置颜色、宽度等属性。
splitArea：控制坐标轴背景分区带（用于柱状图或区域图）的显示与隐藏。
坐标轴交叉：
boundaryGap：仅适用于类目轴，控制是否在数据两侧留白，以显示整体效果。
推荐阅读
-
echarts xAxis 和 yAxis - x 轴、y 轴和网格线的详细配置
-
腾讯视频直播 02-推流-美颜滤镜 同样，腾讯云提供了 setBeautyFilter 方法来设置美颜风格、磨皮程度、美白程度和泛红程度 //style 磨皮风格：0：平滑 1：自然 2：朦胧 //美容级别：0-9。值为 0 时关闭美颜效果。默认值：0，关闭美颜效果。 //美白级别：取值 0-9。值为 0 时，将关闭美白效果。默认值：0，关闭美白效果。 //ruddyLevel：取值范围为 0-9。值为 0 时关闭美白效果。默认值：0，关闭美白效果。 public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel);; public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel) 滤镜 setFilter 方法可以设置滤镜效果，滤镜本身是一个直方图文件。setSpecialRatio 方法可以设置滤镜的程度，从 0 到 1，越大滤镜效果越明显，默认值为 0.5。 Bitmap bitmap = BitmapUtils.decodeResource(getResources, R.drawable.langman); if (mLivePusher) if (mLivePusher ! = null) { mLivePusher.setFilter(bmp)； } 控制摄像头 腾讯云 sdk 默认为前置摄像头（可以通过修改 TXLivePushConfig 的配置函数 setFrontCamera 来修改默认值），调用一次 switchCamera 就切换一次，注意切换摄像头前要确保 TXLivePushConfig 和 TXLivePusher 对象已经初始化。 mLivePushConfig.setFrontCamera(true); // 默认前置摄像头。 mLivePusher.switchCamera; //切换摄像头。 ⑦ 设置徽标水印 腾讯视频云目前支持两种设置水印的方式：一种是在流媒体 SDK 中设置水印，原理是在 SDK 中对视频进行编码前在画面中设置水印。另一种方式是在云端设置水印，即由云端解析视频并添加水印标识。 建议使用 SDK 添加水印，因为在云端添加水印会有问题。下面是添加水印的 SDK 介绍： //设置视频水印 mLivePushConfig.setWatermark(BitmapFactory.decodeResource(getResources,R.drawable.watermark), 10, 10); // 最后两个参数是视频的水印。 //最后两个参数是水印位置的 X 轴和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig)； 如果需要对水印图像的位置进行模型适配，则需要调用水印规范化接口。 /设置视频水印 mLivePushConfig.setWatermark(mBitmap, 0.02f, 0.05f, 0.2f); //参数为水印图像。 //参数包括水印图像的位图、水印位置的 X 轴坐标、水印位置的 Y 轴坐标和水印宽度。后三个参数的范围是 [0，1]。 // 最后两个参数是水印位置的 X 轴坐标和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig)； TXLivePushConfig 中的 setHardwareAcceleration 方法可以启用或禁用硬件编码。 if (mHWVideoEncode){ if (mLivePushConfig ! = null) { if (Build.VERSION.SDK_INT < 18){ Toast.makeText(getApplicationContext, "Hardware acceleration failed, current phone API level is too low (min 18)"、 Toast.LENGTH_SHORT).show； mHWVideoEncode = false; } } } } mLivePushConfig.setHardwareAcceleration(mHWVideoEncode ? TXLiveConstants.ENCODE_VIDEO_HARDWARE : TXLiveConstants.ENCODE_VIDEO_SOFTWARE)； mLivePusher.setConfig(mLivePushConfig)； // 如果您不确定何时启用硬件加速，建议将其设置为 ENCODE_VIDEO_AUTO。 // 默认情况下启用软件编码，但如果手机的 CPU 使用率超过 80% 或帧速率为 10，SDK 将自动切换到硬件编码。 ⑨ 后台推流 在常规模式下，一旦应用程序进入后台，摄像头捕捉数据的能力就会被 Android 禁用，这意味着 SDK 无法继续捕捉和编码音频和视频数据。如果我们什么都不做，故事就会按照下面的脚本发展： 阶段 1（背景剪切后 10 秒 ->）- CDN 无法将视频流传输给观众，因为没有数据，观众看到的是主帧。 阶段 2（10 秒-> 70 秒）--观众一方的播放器因无法接收到直播流而退出，房间里空无一人。 第 3 阶段（70 秒后）--服务器直接断开了推送流媒体的 RTMP 链接，主播需要重新打开直播才能继续。 主播可能只是短暂地接了一个紧急电话，但各云提供商的安全措施会迫使主播的直播提前结束。 1) 设置 setPauseFlag 在开始推流之前，使用 TXLivePushConfig 的 setPauseImg 接口设置一个等待图像，其含义建议为 "主播将暂时离开，稍后再回来"。