博客介绍了直角坐标系的X轴和Y轴适合展示连续数据，可绘制折线图等；极坐标系的radiusAxis径向轴和angleAxis角度轴也适合连续数据，常用于绘制饼图等。还详细讲解了极坐标系两轴的配置，给出径向轴和角度轴解剖图及配置实例代码。
直角坐标系的 X 轴和 Y 轴：
X 轴、Y轴对应 水平和垂直方向，属于数值型轴(value),适合展示连续的数据，刻度等距，通常来绘制折线图、散点图、柱状图等
极坐标系的 radiusAxis 径向轴 和 angleAxis 角度轴：
radiusAxis 轴 、 angleAxis 轴对应 半径方向，角度方向，适合展示连续的数据，通常绘制饼图、雷达图等极坐标系的图表。
一、极坐标系的 radiusAxis 轴配置
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', //线的颜色。
扫一扫
3817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
