option = {
polar: {
center: ['50%', '50%'],
radius: '80%'
},
radiusAxis: {
type: 'value', // 坐标轴类型,可选值为 'value', 'category', 'time', 'log'
name: '半径轴', // 坐标轴名称
nameLocation: 'center', // 坐标轴名称显示位置,可选值为 'start', 'middle', 'end'
nameGap: 15, // 坐标轴名称与轴线之间的距离
axisLine: {
show: true, // 是否显示坐标轴轴线
lineStyle: {
color: 'blue', // 坐标轴轴线颜色
width: 2 // 坐标轴轴线宽度
// 其他轴线样式属性
}
},
axisLabel: {
show: true, // 是否显示刻度标签
color: 'green', // 刻度标签文字颜色
fontSize: 12, // 刻度标签文字大小
margin: 8 // 刻度标签与轴线之间的距离
// 其他刻度标签样式属性
},
splitLine: {
show: true, // 是否显示分隔线
lineStyle: {
type: 'dashed', // 分隔线类型,可选值为 'solid', 'dashed', 'dotted'
color: 'gray' // 分隔线颜色
// 其他分隔线样式属性
}
},
splitArea: {
show: true, // 是否显示分隔区域
areaStyle: {
color: ['rgba(255, 255, 255, 0)', 'rgba(200, 200, 200, 0.3)'] // 分隔区域颜色
// 其他分隔区域样式属性
}
},
min: 0, // 坐标轴刻度最小值
max: 100 // 坐标轴刻度最大值
// 其他径向轴属性
},
series: [{
type: 'bar',
data: [2, 1, 3, 4],
coordinateSystem: 'polar'
}]
};
在上述例子中,通过设置 radiusAxis 中的各个属性,你可以自定义径向轴的样式、刻度标签、分隔线、分隔区域等。根据你的需求,可以进一步调整这些属性。
转载请注明出处:http://www.zyzy.cn/article/detail/5239/ECharts