{site_name}

{site_name}

🌜 搜索

ECharts中的parallelAxis配置是一种可以在平行坐标系组件上定义坐标轴属性和样式的配置项

前端 𝄐 0
echarts设置坐标轴间隔,echarts坐标轴标签位置偏移,echarts自定义纵坐标的刻度,echarts坐标轴名称位置,echarts横坐标间隔设置,echarts设置坐标轴颜色
ECharts中的parallelAxis配置是一种可以在平行坐标系组件上定义坐标轴属性和样式的配置项。通过这个配置,可以自定义平行坐标系不同维度的坐标轴的显示内容、刻度线样式、标签样式等。

使用平行坐标轴组件刻度标签需要通过设置axisLabel属性来实现。具体来说,可以设置axisLabel.normal.formatter属性来指定标签显示格式化函数,或者设置axisLabel.emphasis.formatter属性来指定鼠标悬停时标签的格式化函数。

下面是一个使用ECharts平行坐标系组件的示例,其中对不同维度的坐标轴进行了刻度标签的自定义设置:

javascript
option = {
// 定义平行坐标系组件
parallelAxis: [
{dim: 0, name: 'A', inverse: true},
{dim: 1, name: 'B'},
{dim: 2, name: 'C'},
{dim: 3, name: 'D'},
{dim: 4, name: 'E'},
],
// 定义数据系列
series: [{
type: 'parallel',
lineStyle: {
width: 2,
},
data: [
[10, 8, 0.01, 5, 200],
[20, 12, 0.02, 15, 500],
[30, 24, 0.03, 25, 800],
[40, 32, 0.04, 35, 1100],
[50, 48, 0.05, 45, 1500],
]
}],
// 设置坐标轴标签样式
parallelAxis: {
axisLabel: {
normal: {
textStyle: {
color: 'red',
fontSize: 14,
},
formatter: function(value) {
return value.toFixed(2); // 将数值保留两位小数并返回
}
},
emphasis: {
textStyle: {
color: 'blue',
fontSize: 16,
},
formatter: function (value) {
return value.toFixed(2) + '%'; // 加上百分号并保留两位小数
}
}
}
}
};


在这个例子中,我们定义了一个包含5个维度的平行坐标系组件,并设置了每个维度坐标轴的名称(A、B、C、D、E)。然后,我们定义了一个数据系列,并通过parallel类型指定使用平行坐标系展示数据。最后,我们通过设置parallelAxis.axisLabel.normal和parallelAxis.axisLabel.emphasis来自定义不同状态下的坐标轴刻度标签样式和格式化函数。