{site_name}

{site_name}

🌜 搜索

ECharts 平行坐标轴范围选取是指在平行坐标系中,通过拖拽选择某一维度的数值

前端 𝄐 0
echarts平行坐标系,echarts设置坐标轴间隔,echarts坐标轴名称位置,echarts横坐标,echarts地图坐标,echarts坐标轴刻度
ECharts 平行坐标轴范围选取是指在平行坐标系中,通过拖拽选择某一维度的数值范围,从而筛选数据并突出显示符合条件的数据。可以方便地查看不同维度之间的关系和趋势。

例如,我们可以使用以下代码创建一个简单的平行坐标系:

javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: '平行坐标系示例' },
tooltip: {},
parallelAxis: [
{ dim: 0, name: '年龄' },
{ dim: 1, name: '薪资' },
{ dim: 2, name: '工作年限' }
],
series: [
{
type: 'parallel',
data: [
[22, 5000, 2],
[35, 7500, 7],
[28, 6000, 4],
[42, 9000, 10],
[30, 6500, 5]
]
}
]
});


然后我们将启用 brush 组件来支持范围选取功能:

javascript
myChart.setOption({
brush: {
xAxisIndex: 'all',
brushMode: 'single',
throttleDelay: 300,
inBrush: {
opacity: 1
}
},
series: [
{
type: 'parallel',
data: [
[22, 5000, 2],
[35, 7500, 7],
[28, 6000, 4],
[42, 9000, 10],
[30, 6500, 5]
],
coordinateSystem: 'parallel',
lineStyle: {
normal: {
color: '#577ceb',
width: 0.5,
opacity: 0.6
}
},
emphasis: {
lineStyle: {
width: 3
}
}
}
]
});


现在,当我们在图表中拖动任何一个轴上的矩形选择区域时,只有符合条件的数据将被突出显示。