以下是一个简单的例子,演示如何在 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