X-axis and Y-axis of the Cartesian coordinate system:
The X-axis and Y-axis correspond to the horizontal and vertical directions. They are numerical axes (value) and are suitable for displaying continuous data with equidistant scales. They are usually used to draw line charts, scatter charts, histograms, etc.
The radiusAxis radial axis and angleAxis angle axis of the polar coordinate system:
The radiusAxis axis and the angleAxis axis correspond to the radius direction and the angle direction. They are suitable for displaying continuous data. They are usually drawn in polar coordinate systems such as pie charts and radar charts.
1. RadiusAxis axis configuration of polar coordinate system
option={
// 极坐标径向轴
radiusAxis:{
id:'1', //组件ID
polarIndex:1, //径向轴所在极坐标系的索引，从 0 开始 ，或者不配置。
type:'value', //坐标轴类型
name:'坐标轴名称', //坐标轴名称
nameLocation:'end', // 坐标轴名称显示位置
// 坐标轴名称样式
nameTextStyle:{
color:'red', //文字颜色
fontStyle:'normal', //字体风格
fontWeight:'normal', //字体粗细
fontFamily:'sans-serif',//字体
fontSize:12, //字体大小
align:'left', //字体水平对齐方式
verticalAlign:'top', //竖直对齐方式
lineHeight:10, //行高
backgroundColor:'red', //文字块背景颜色，可以用图片
borderColor:'red', //文字块边框颜色
borderWidth:5, //文字块边框宽度
borderType:'solid', //文字块描边
borderDashOffset:10, //描边为虚线时的偏移量
borderRadius:10, //文字块圆角
padding:[5,5,5,5], //文字块内边距
shadowColor:'red', //文字块阴影颜色
shadowBlur:10, //阴影程度
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
width:50, //文本显示宽度
height:50, //文本显示高低
textBorderColor:'red', //文字的描边颜色
textBorderWidth:10, //描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10,//虚线偏移量
textShadowColor:'red', //文字的阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowPffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出宽度是否截断或者换行
ellipsis:'···', //文字超出截断时，末尾显示的内容
// 设置坐标轴名称盒子的丰富样式
rich:{
//这里的文字样式优先于上面的配置,同上面的 nameTextStyle包含的配置一样
color:'red', //字体颜色
fontStyle: "italic", //字体风格
fontWeight: 'normal', //字体粗细
fontFamily:'sans-serif',//字体
fontSize:12, //字体大小
align:'left', //字体水平对齐方式
verticalAlign:'top', //竖直对齐方式
lineHeight:10, //行高
//···略
},
},
nameGap:15, //坐标轴名称与坐标轴的距离
nameRotate:true, //坐标轴名称的旋转角度
inverse:true, //坐标轴是否反向
boundaryGap:true, //坐标轴两边间隙
//以下仅对数值奏效
min:10, //设置坐标轴刻度的最小值
max:150, //设置坐标轴刻度的最大值
scale:true, //刻度是否需要 0 刻度
splitNumber:5, //坐标轴分割段数
maxInterval:50, //坐标轴最大间隔值
interval:50, //强制限制坐标轴间隔值
logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效。
silent:true, //坐标轴是否静态无法交互
triggerEvent:true, //坐标轴的标签是否响应和触发鼠标事件，默认不响应。
//轴线相关设置
axisLine:{
show:true, //是否显示坐标轴轴线
onZero:true, //轴线是否在另一个轴的 0 刻度上
onZeroAxisIndex:10, //当有双轴时，设置从哪一个 0 刻度开始
symbol: ['circle','circle'],//轴线两边的形状，可为图片
symbolSize:[10,10], //轴线两边的形状大小
symbolOffset:[10,10], //轴线两边的形状偏移
// 坐标轴轴线的样式
lineStyle：{
color:'red', //轴线的颜色
width:5, //轴线的宽度
type:'solid', //轴线类型
dashOffset:10, //轴线为虚线时，虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分的形状
miterLimit:10, //join 为 miter 时，设置斜面限制比例
shadowBlur:50, //轴线的阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
opacity:0.5, //轴线透明度
},
},
// 轴刻度相关设置
axisTick:{
show:true, //轴刻度是否显示
alignWithLabel:true, //刻度线是否和标签对齐
interval:'auto', //设置为 1，表示 隔一个标签显示一个标签
inside:true, //刻度线方向朝内还是朝外
length:10, //坐标轴刻度长度
lineStyle:{
color:'red', //线的颜色
width:5, //线的宽度
type:'solid', //线类型
dashOffset:10, //线为虚线时，虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分的形状
miterLimit:10, //join 为 miter 时，设置斜面限制比例
shadowBlur:50, //线的阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:10, //阴影在水平方向上的偏移
shadowOffsetY:10, //阴影在竖直方向上的偏移
opacity:0.5, //线透明度
},
},
// 刻度标签
axisLabel:{
show:true, //是否显示刻度标签
interval:auto, //标签间隔
inside:true, //标签朝内还是朝外
rotate:80, //标签旋转角度
margin:10, //刻度标签与轴线距离
formater:funtion(value,index){ //标签内容格式化
return '标签名称：'+ value;
},
showMinLabel:true, //是否显示最小值的标签
showMaxLabel:true, //是否显示最大值的标签
hideOverLap:true, //是否隐藏重叠的标签
//标签字体样式 ，内容同 nameTextStyle 一致
color:'red', //字体颜色
fontStyle:'normal', //字体风格
//···略
},
// 坐标轴分隔线
splitLine{
show:true, //是否显示分割线
interval:1, //值为 2，表示隔两个标签显示一个标签，
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
//次刻度线
minorTick:{
show:true, //是否显示次刻度
splitNumber:10, //次刻度线分割数
length:5, //次刻度线的长度
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
// 次刻度线的分割线
minorSplitLine:{
show:true,
//线的样式
lineStyle:{
// 同上的 lineStyle 一样 ···
},
},
// 分割区域 用来装饰图形的，可以用来做 斑马线类似的条纹
splitArea:{
interval:'auto', //显示间隔数
show:true, //是否显示分隔区域
//分割区域的样式
areaStyle:{
color:["rgba(193, 53, 53, 0.1)","rgba(193, 53, 53, 0.5)"], //分割区域的颜色
shoadowBlur:10, //区域阴影程度
shadowColor:'red',//阴影颜色
shadowOffsetX:10, // 阴影在水平方向上的偏移
shadowOffsetY:10, // 阴影在竖直方向上的偏移
opacity:0.5, //透明度
},
},
//数据，以及数据样式的单独配置
data:[{
value:'值一',
//文字样式同 上面的坐标轴名称样式 nameTextStyle一样的内容
textStyle:{
color:'red', // ···略
},
},
{
value:'值二',
//文字样式同 上面的坐标轴名称样式 nameTextStyle一样的内容
textStyle:{
color:'red', // ···略
},
}],
// 径向轴指示器配置项
axisPointer:{
show:false, // 是否显示径向的指示器
type:'line', // 径向指示器类型
snap:true, // 指示器是否吸附到点上
z:1, // 指示器的 z 值
animation:true, //是否开启动画
animationThreshold:2000, //动画的阈值，单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration:1000, //初始动画的时长
animationEasing:'cubicOut', //初始动画的缓动效果
animationDelay:2000, //初始动画的延迟
animationDurationUpdate:1000, //数据更新动画的时长
animationEasingUpdate:200, //数据更新动画的缓动效果
animationDelayUpdate:200, //数据更新动画的延迟
//径向指示器文本标签
label:{
show:true, //是否显示文本标签
precision:'auto', //显示文本值的小数点
formatter:"显示文字", //文本标签显示设置，可写方法
margin:3, //label 距离轴的距离
color: "rgba(234, 21, 21, 1)",
//文字颜色
fontStyle:'normal', //字体风格
fontWeight:'normal', //字体粗细
fontFamily:'sans-serif', //文字字体
fontSize:15, //字体大小
lineHeigh:10, //行高
width:10, //文字显示宽度
height:10, //文字显示高度
textBorderColor:'red', //文本描边颜色
textBorderWidth:10, //文本描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10, //描边为虚线时的偏移量
textShadowColor:'transparent', //文字阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowOffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出是否截断
ellipsis:'···', //文字截断时末尾显示内容
padding:[5,5,5,5], //文本标签内边距
backgroundColor:'auto', //文本标签的背景颜色
borderColor:'red', //文本标签的边框颜色
borderWidth:20, //文本标签的边框宽度
shadowBlur:20, //文本标签阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:20, //文本标签的阴影水平偏移
shadowOffsetY:20, //文本标签的阴影竖直偏移
},
// 指示器 竖直 标记线的样式
lineStyle:{
color:'red', //线的颜色。
width:10, //线宽
type:10, //线的类型
dashOffset:10, //虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分形状
miterLimit:10, // join 为 miter 设置斜接面限制比例
shadowBlur:10, //线的阴影大小
shadowColor:'red', //线的阴影颜色
shadowOffsetX:20, //阴影水平偏移
shadowOffsetY:20, //阴影竖直偏移
opacity:0.5, //线的透明度
},
// 当指示器的类型 type ='shadow' 生效 阴影指示器
shadowStyle:{
color: "rgba(194, 91, 91, 1)", //填充颜色
shadowBlur:10, //图形的阴影模糊程度
shadowColor:10, //阴影颜色
shadowOffsetX:10, //阴影水平偏移距离
shadowOffsetY:10, //阴影水平偏移距离
opacity:0.5, //图形透明度
},
triggerEmphasis:true, //是否触发强调功能
triggerTooltip:true, //是否触发 tooltip
value:10, // axisPointer 的初始位置
status:'show', //当前状态
//控制手柄，我在径向轴重设置是似乎无效
handle:{
show:true, //是否显示手柄
icon:'图片URL', //手柄图标
size:45, //手柄尺寸
margin:50, //手柄与轴的距离
color:'red', //手柄颜色
throttle:40, //视图更新周期
shadowBlur:4, //图形阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:2, //阴影在水平方向上的偏移
shadowOffsetY:2, //阴影在垂直方向上的偏移
},
},
},
}2. angleAxis axis configuration of polar coordinate system
option={
//极坐标角度轴
// 在角度轴中，没有轴名称所以对于上面中的name的配置都没有 例如 name、nameLocation、nameTextStyle
angleAxis:{ // 角度轴和径向轴配置类似
id:'1', //组件ID
polarIndex:1, //绑定极坐标 从0 开始，或者不进行配置
type:'value', //坐标轴类型
startAngle:90, // 起始刻度的角度
clockwise:true, //刻度增长是顺时针还是逆时针
boundaryGap:true, //坐标轴两边留白
min:0, //坐标轴刻度标签最小值
max:360, //坐标轴刻度标签最大值
scale:true, //是否需要 0 刻度，type 为 value 时才生效
splitNumber:5, //刻度分割数
minInterval:10, //最小间隔大小
maxInterval:10, //最大间隔大小
interval:10, //强制设置坐标轴分割间隔
logBase:10, //对数轴的底数，type 为 log 时有效
silent:true, //是否静态交互
triggerEvent:true, //坐标轴标签是否响应和触发鼠标事件
//坐标轴轴线样式
axisLine:{
// 该配置与径向轴中的配置一致
},
//坐标轴刻度样式
axisTick:{
// 该配置与径向轴中的配置一致
},
//坐标轴次刻度线样式
minorTick:{
// 该配置与径向轴中的配置一致
},
//坐标轴刻度标签颜色
axisLabel:{
// 该配置与径向轴中的配置一致
},
//分割线样式
splitLine:{
// 该配置与径向轴中的配置一致
},
//次分割线
minorSplitLine:{
// 该配置与径向轴中的配置一致
},
//分隔区域
splitArea:{
// 该配置与径向轴中的配置一致
},
//类目数据
data:[{
// 该配置与径向轴中的配置一致
}],
//指示器配置
axisPointer:{
// 该配置与径向轴中的配置一致
},
animation:true, //是否开启动画
animationThreshold:1000, //是否开启动画阈值
animationDuration:1000, //初始动画时长
animationEasing:'cubicOut', // 初始动画的缓动效果
animationDelay:1000, // 初始动画的延迟
animationDurationUpdate:1000, // 更新动画的时长
animationEasingUpdate:1000, // 更新动画的缓动效果
animationDelayUpdate:1000, // 数据更新动画的延迟
zlevel:10, //角度轴所有图形的 zlevel 值
z:10, //角度轴组件的所有图形的 z 值
}
}3. Anatomy diagram
1. Radial axis anatomy. The option code of this example is available at the top of the article.
2. Angular axis anatomy. The option code of this example is available at the top of the article.
Configuration code reference, after downloading the configuration file, just copy and paste it into the Echats example.
