{site_name}

{site_name}

🌜 搜索

ECharts中的angleAxis配置是用于设置极坐标系下角度轴(也称为极轴)的属性和样式

前端 𝄐 0
echarts设置y轴间隔,echarts 圆角,echarts折线图配置,echarts设置y轴的刻度,echarts自定义y轴间隔,echarts y轴间隔
ECharts中的angleAxis配置是用于设置极坐标系下角度轴(也称为极轴)的属性和样式。该配置包括以下常用属性:

- type: 角度轴类型,可选值为 'value'(数值轴) 或者 'category'(类目轴)。
- startAngle: 极坐标系起始角度,单位为度。
- splitNumber: 分割段数,用于控制分隔线的数量。
- axisLabel: 坐标轴刻度标签的相关设置,如文字样式、显示格式等。
- axisLine: 坐标轴轴线的相关设置,如线条颜色、宽度等。
- splitLine: 坐标轴分隔线的相关设置,如线条颜色、宽度等。

以下是一个简单的例子,展示如何使用angleAxis配置设置极坐标系下的角度轴:

javascript
option = {
polar: {}, // 开启极坐标系
angleAxis: { // 设置角度轴
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
startAngle: 90,
axisLabel: {
color: '#666',
fontSize: 12,
formatter: '{value} °' // 坐标轴标签格式化,单位为度
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
width: 1,
type: 'dashed'
}
}
},
series: [{
type: 'bar',
data: [12, 34, 56, 43, 23, 45, 67],
coordinateSystem: 'polar' // 使用极坐标系
}]
};


在上述例子中,我们设置了一个类目轴类型的角度轴,并定义了刻度标签、轴线和分隔线的样式。同时,我们使用polar配置开启了极坐标系,并在柱状图系列中指定了使用极坐标系进行绘制。