效果图：
vue要绘制三维折线图首先要引入 "echarts" 和 "echarts-gl" ：
npm install echarts@4.1.0 --save
npm install echarts-gl@1.1.0 --save
注：引入其他版本会因为版本不兼容问题，即使项目没有报错也无法绘制图表，建议安装上述版本避免出现该情况。
为了使图表观感更好 所以采用了散点（scatter3D） + 折线图（line3D）综合绘制三维折线图，以下为vue代码：
<template>
<div id="main" style="height:500px;width: 100%;" ref="main"></div>
</template>
<script>
import * as echarts from "echarts";
import 'echarts-gl'
export default {
name: 'HelloWorld',
mounted() {
this.drewLine()
},
methods: {
drewLine(){
const myChart = echarts.init(this.$refs.main);
let data = [
[[0.6674, 0.7634, 0.7147, 0.6312, 0.4996],
[0.7093, 0.7919, 0.7499, 0.6780, 0.5460],
[0.7326, 0.8077, 0.7696, 0.7040, 0.5738],
[0.7491, 0.8190, 0.7836, 0.7223, 0.5948],
[0.7619, 0.8278, 0.7946, 0.7365, 0.6119]],
[[0.6850, 0.7776, 0.7308, 0.6496, 0.5304],
[0.7279, 0.8082, 0.7671, 0.6970, 0.5646],
[0.7500, 0.8239, 0.7859, 0.7214, 0.5788],
[0.7652, 0.8347, 0.7989, 0.7380, 0.5890],
[0.7767, 0.8430, 0.8089, 0.7506, 0.5980]],
[[0.6996, 0.7894, 0.7442, 0.6651, 0.5615],
[0.7411, 0.8205, 0.7795, 0.7104, 0.5904],
[0.7610, 0.8353, 0.7965, 0.7318, 0.5944],
[0.7741, 0.8452, 0.8080, 0.7459, 0.5934],
[0.7840, 0.8526, 0.8166, 0.7566, 0.5919]],
[[0.7128, 0.7998, 0.7562, 0.6792, 0.5888],
[0.7518, 0.8303, 0.7895, 0.7213, 0.6174],
[0.7689, 0.8440, 0.8044, 0.7393, 0.6181],
[0.7798, 0.8528, 0.8140, 0.7507, 0.61227],
[0.7878, 0.8593, 0.8212, 0.7590, 0.6050]],
[[0.7249, 0.8091, 0.7674, 0.6923, 0.6121],
[0.7611, 0.8387, 0.7983, 0.7309, 0.6415],
[0.7756, 0.8511, 0.8109, 0.7458, 0.6420],
[0.7842, 0.8588, 0.8187, 0.7544, 0.6354],
[0.7903, 0.8644, 0.8243, 0.7605, 0.6263]]
]
let x_axis = [2, 3, 4, 5 ,6] // 参数
let y_axis = [2, 3 ,4 ,5 ,6] // Q
let xyzData = []
for(let i = 0; i < y_axis.length; i++){
xyzData[i] = []
for(let j = 0; j < x_axis.length; j++){
xyzData[i][j] = []
}
}
for(let i = 0; i < y_axis.length; i++){
let y = y_axis[i] - 2
for(let k = 0; k < data[0].length; k++){
for(let j = 0; j < x_axis.length; j++){
let x = x_axis[j] - 2
let z = data[i][j][k];
xyzData[i][k].push([x, y, z])
}
}
}
// console.log('xyzData', xyzData);
let series = []
for(let i = 0; i < y_axis.length; i++){
for(let j = 0; j < x_axis.length; j++){
series.push({
type: 'scatter3D',
symbolSize: 5, // 控制点的大小
name: 'Q' + y_axis[i],
data: xyzData[i][j]
},{
type: 'line3D',
lineStyle: { width: 3, }, // 控制线条宽度
name: 'Q' + y_axis[i],
data: xyzData[i][j]
})
}
}
let options = {
xAxis3D: {
type: 'category',
name: 'δ',
data: x_axis,
},
yAxis3D: {
type: 'category',
name: 'Q',
data: y_axis,
},
zAxis3D: {
type: 'value',
name: 'score',
min: 'dataMin', //默认取最大值显示
max: 'dataMax', //默认取最小值显示
},
legend: { // 数据标签
orient: 'vertical',
right: 100,
top: 200,
icon: 'roundRect',
},
tooltip:{
show:true
},
grid3D: {
boxWidth: 400, // 图表宽度
boxHeight:210, // 图表高度
boxDepth: 250, // 图表深度
viewControl: {
distance: 400
}
},
series: series
}
myChart.setOption(options)
}
}
}
</script>
