目录
- 平行坐标系简介
- 平行坐标系的常用配置项
- Vue3中创建平行坐标系
- 美化平行坐标系
- 样式美化
平行坐标系简介
平行坐标系是一种将多个维度的数值以平行的直线绘制在坐标系上的可视化方式。通过绘制多条平行直线，并将数据点映射到这些直线上，我们可以直观地观察到不同维度之间的关系和趋势。平行坐标系在数据探索和分析中具有广泛的应用，特别是在多维数据的可视化方面。
平行坐标系的常用配置项
parallelAxis：定义坐标轴和维度的配置。
dim：坐标轴的维度序号(索引)，指定维度在数据中的位置。name：坐标轴的名称。type：坐标轴类型。可选值如下：
value数值轴，适用于连续数据。
category 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 ataset.source 中取，或者可通过 parallelAxis.data 设置类目数据。 time时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
log对数轴。适用于对数数据。min: 坐标轴刻度最小值。
可以设置成特殊值 ‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。 不设置时会自动计算最小值保证坐标轴刻度的均匀分布。 在类目轴中，也可以设置为类目的序数（如类目轴 data: [‘类A’, ‘类B’, ‘类C’] 中，序数 2 表示 ‘类C’。也可以设置为负数，如 -3）。 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
min: function (value) {
return value.min - 20;
}
其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最小值，也可返回 null/undefined 来表示“自动计算最小值”（返回 null/undefined 从 v4.8.0 开始支持）。
max：坐标轴刻度最大值。
可以设置成特殊值 ‘dataMax’，此时取数据在该轴上的最大值作为最大刻度。 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。 在类目轴中，也可以设置为类目的序数（如类目轴 data: [‘类A’, ‘类B’, ‘类C’] 中，序数 2 表示 ‘类C’。也可以设置为负数，如 -3）。 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
max: function (value) {
return value.max - 20;
}
其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最大值，也可返回 null/undefined 来表示“自动计算最大值”（返回 null/undefined 从 v4.8.0 开始支持）。
inverse：是否是反向坐标轴，即反向显示维度的刻度，默认为false。boundaryGap：是否在坐标轴两端留白，用于美化展示效果，默认为true。axisLabel：坐标轴标签的样式配置，比如字体颜色、字号等。axisLine：坐标轴线的样式配置，比如线条颜色、线宽等。
parallelAxis配置示例，下面示例定义三个维度的配置：
parallelAxis: [
{ dim: 0, name: '维度1', type: 'value' },
{ dim: 1, name: '维度2', type: 'value' },
{ dim: 2, name: '维度3', type: 'category' }
]
series：定义数据系列的配置。type：数据系列的类型，默认为"parallel"，表示平行坐标系。data：数据系列的数据源，可以是一个二维数组，每行表示一个数据点的各个维度的值。
series配置示例，下面示例定义一个平行坐标系的数据系列：
series: [ { type: 'parallel', data: [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] } ]visualMap：定义数据映射到视觉元素的配置，用于根据数据值来设置线条颜色、宽度、透明度等。type：映射的类型，默认为"continuous"，表示连续型映射。min和max：数据值的最小值和最大值，用于确定映射范围。inRange：映射范围内的视觉元素配置，比如线条颜色、宽度等。calculable：是否支持手动拖动调整映射范围，默认为false。
visualMap配置示例，下面示例通过visualMap配置来设置线条颜色的映射：
visualMap: { type: 'continuous', min: 0, max: 10, inRange: { color: ['#ff0000', '#00ff00'] // 线条颜色从红色到绿色渐变 } }lineStyle：定义平行坐标系的线条样式。color：线条的颜色。width：线条的宽度。opacity：线条的透明度。
定义线条的样式示例：
lineStyle: { color: '#0000ff', width: 2, opacity: 0.8 }label：定义标签的样式。show：是否显示标签，默认为false。position：标签的位置，默认为"top"，可以是"top"、"bottom"、"left"、"right"和"inside"等。formatter：标签的格式化函数，用于自定义标签显示的内容。color：标签的颜色。
定义标签的样式示例：
label: { show: true, position: 'top', color: '#ffffff', formatter: function (params) { return params.value.toString(); } }
Vue3中创建平行坐标系
- 创建vue项目，安装ECharts库
npm install echarts --save
- 新建ParallelView.vue文件，使用
import语句引入ECharts库
import * as echarts from 'echarts';
- 创建图表容器：在ParallelView组件的
template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用
<template>
<div ref="chart" style="width:600px;height:400px; margin: 20px auto;"></div>
</template>
- 初始化图表对象：在ParallelView组件中定义chart
const chart = ref(null)
在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
const myChart = echarts.init(chart.value)
})
</script>
5.准备数据，实际项目开发中，这里的数据应该是从后台的API接口获取的，这里直接写在了前端。
const data = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
- 配置坐标轴和维度。使用parallelAxis配置坐标轴和维度
parallelAxis: [
{ dim: 0, name: '维度1' },
{ dim: 1, name: '维度2' },
{ dim: 2, name: '维度3' },
]
- 定义数据系列。使用series配置数据系列
series: [
{
type: 'parallel',
data: data
}
]
- 使用
chart.setOption方法配置图表的参数。
onMounted(() => {
const myChart = echarts.init(chart.value)
const option = {
parallelAxis: [
{ dim: 0, name: '维度1' },
{ dim: 1, name: '维度2' },
{ dim: 2, name: '维度3' },
],
series: [
{
type: 'parallel',
data: data
}
]
}
myChart.setOption(option)
})
运行程序，刷新浏览器，看下效果
美化平行坐标系
样式美化
- 轴线样式：可以通过配置
axisLine属性来设置坐标轴线的样式，包括线条颜色、粗细、透明度等。
parallelAxis: [
{
dim: 0,
name: '维度1',
axisLine: {
lineStyle: {
color: '#f0f',
width: 2,
opacity: 0.8
}
}
},
{
dim: 1,
name: '维度2',
axisLine: {
lineStyle: {
color: '#333',
width: 2,
opacity: 0.8
}
}
},
{
dim: 2,
name: '维度3',
axisLine: {
lineStyle: {
color: '#999',
width: 2,
opacity: 0.8
}
}
},
- 刻度样式：可以通过配置
axisTick属性来设置刻度线的样式，包括线条颜色、长度、粗细等。
parallelAxis: [
{
dim: 0,
name: '维度1',
axisLine: {
lineStyle: {
color: '#f0f',
width: 2,
opacity: 0.8
}
},
axisTick: {
show: true,
lineStyle: {
color: '#000',
width: 1,
type: 'solid'
}
}
},
//其它代码
],
- 标签样式：可以通过配置
axisLabel属性来设置坐标轴标签的样式，包括字体颜色、字号、旋转角度等。
parallelAxis: [
{
dim: 0,
name: '维度1',
axisLine: {
lineStyle: {
color: '#f0f',
width: 2,
opacity: 0.8
}
},
axisTick: {
show: true,
lineStyle: {
color: '#000',
width: 1,
type: 'solid'
}
},
axisLabel: {
show: true,
color: '#f00',
fontSize: 12,
rotate: 45
}
},
//其它代码
]
- 坐标轴间隔：可以通过配置
axisLine和axisTick的interval属性来控制坐标轴线和刻度线的间隔显示。
parallelAxis: [
{
//其它代码
axisLine: {
interval: 0 // 显示全部坐标轴线
},
axisTick: {
interval: 0 // 显示全部刻度线
}
},
//其它代码
]
- 高亮显示：可以通过配置
emphasis来设置高亮状态的样式，比如线条颜色、粗细等。
series: [
{
type: 'parallel',
data: data,
emphasis: {
lineStyle: {
color: '#ff0000',
width: 2
}
}
}
]
运行看效果
OK，关于Echarts 平行坐标系的相关内容就介绍到这里，有疑问的小伙伴评论区留言，喜欢的小伙伴点赞关注加收藏哦！你也可以通过微信公众号搜索“九仞山”关注我，获取更多内容！
