在 ECharts 中,平行坐标轴的范围选取可以通过设置坐标轴的 min 和 max 属性来实现。这允许你手动指定坐标轴的范围,或者根据数据动态计算范围。

以下是一个简单的例子,演示如何在 ECharts 平行坐标轴中手动指定坐标轴的范围:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 平行坐标轴范围选取</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>

<!-- 创建一个包含平行坐标轴的 DOM 元素 -->
<div id="parallelAxis" style="width: 800px; height: 400px;"></div>

<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('parallelAxis'));

// 模拟的数据
var data = [
    [1, 2, 3, 4, 5],
    [5, 4, 3, 2, 1],
    [3, 2, 5, 4, 1],
    // 其他数据...
];

// 获取数据的最大值和最小值
var dataMin = Math.min.apply(null, data.flat());
var dataMax = Math.max.apply(null, data.flat());

// ECharts 配置项
var option = {
    parallelAxis: [
        {dim: 0, name: 'Axis 1', type: 'value', min: dataMin, max: dataMax},
        {dim: 1, name: 'Axis 2', type: 'value', min: dataMin, max: dataMax},
        {dim: 2, name: 'Axis 3', type: 'value', min: dataMin, max: dataMax},
        {dim: 3, name: 'Axis 4', type: 'value', min: dataMin, max: dataMax},
        {dim: 4, name: 'Axis 5', type: 'value', min: dataMin, max: dataMax}
        // 其他坐标轴...
    ],
    parallel: {
        // 平行坐标轴的数据
        parallelAxisDefault: {
            type: 'value',
            name: 'Value'
        }
    },
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 1,
                opacity: 0.5
            },
            data: data
        }
    ]
};

// 使用配置项设置 ECharts 图表
myChart.setOption(option);
</script>

</body>
</html>

在上面的例子中,我们使用了 parallelAxis 配置项来定义平行坐标轴的属性,包括坐标轴的名称、类型、以及手动指定的最小值和最大值。在这个例子中,我们通过获取数据的最小值和最大值来动态设置坐标轴的范围。你可以根据实际情况调整这些值。

请注意,这只是一个简单的示例,具体的实现可能会根据你的需求和数据结构有所调整。你可以根据 ECharts 的文档(https://echarts.apache.org/zh/api.html#parallel)进行更详细的配置。


转载请注明出处:http://www.zyzy.cn/article/detail/5099/ECharts