{site_name}

{site_name}

🌜 搜索

ECharts angleAxis 是配置极坐标系角度轴的选项,用于展示在极坐标系上的数据

前端 𝄐 0
echart设置x轴的刻度位置,echarts设置y轴数值,echarts设置y轴刻度,echarts的y轴刻度,echart设置y轴刻度,echarts怎么设置y轴单位
ECharts angleAxis 是配置极坐标系角度轴的选项,用于展示在极坐标系上的数据。它可以设置角度轴的各种属性,如刻度线、标签、轴线等,以及对应的数据。

以下是一个简单的例子:

javascript
option = {
polar: {},
angleAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: '#999',
width: 1,
type: 'solid'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#999',
fontSize: 12
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
width: 1,
type: 'solid'
}
}
},
series: [{
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
coordinateSystem: 'polar',
name: '销售额',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#F9713C'
}
},
areaStyle: {
normal: {
opacity: 0.5,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
color: '#F9713C',
offset: 0
}, {
color: '#F9713C',
offset: 1
}])
}
}
}]
};


在上面的例子中,angleAxis 配置了以下属性:

- type: 轴类型,可以是 'value'(数值轴)、'category'(类目轴)、'time'(时间轴)或 'log'(对数轴)。
- data: 类目数据,在 type 为 'category' 时有效,用于表示坐标轴上的分类名称。
- boundaryGap: 坐标轴两边留白策略。默认值为 true,即留白。设为 false 时可以让第一个和最后一个点在坐标轴上。
- axisLine: 轴线配置项,包括是否显示、线条样式等。
- axisLabel: 刻度标签的相关设置,如文本样式、间隔等。
- splitLine: 分隔线配置项,包括是否显示、线条样式等。

同时,在 series 中使用了 coordinateSystem: 'polar',表示该系列数据使用极坐标系展示。