效果图：
<template>
<div id="main" style="width: 900px;height: 600px"></div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-gl'
export default {
name: "hello",
mounted() {
this.drewLine()
},
methods:{
drewLine(){
let data = [
[0,0,0,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1],
[0,0,1,1,5,7,9,11,12,13,17,17, 17,17,17,17,17,17,17,17,17,17],
[5,6,9,9,9,11,11,11,13,13,14,14, 14,16,16,16,16,16,18,18,18,18],
[13,17,22,22,26,33,34,36,36, 37,39,40,40,42,42,42,43,43,44,44,44,44],
[13,16,17,27,35,45, 49,53,58,61,65,66,68, 69,71,73,73,73,74,74,74,74]
]
let dataX = ['1/27', '1/28','1/29','1/30','1/31','2/1','2/2','2/3','2/4','2/5','2/6','2/7','2/8','2/9','2/10','2/11','2/12','2/13','2/14','2/15','2/16','2/17']
let dataY = ['生产','收购','运输','销售','消费']
var vdata = []
for (var i=0;i<dataY.length;i++){
vdata[i] = []
}
for(var t=0;t<dataY.length;t++){
var y = dataY[t];
for(var k=0;k<data[0].length;k++){
for(var p=0;p<dataX.length;p++){
var x = dataX[p];
var z = data[t][p];
vdata[t].push([x,y,z]);
}
break;
}
}
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
xAxis3D: {
type: 'category',
name: '',
data: dataX,
axisLabel:{
show: true,
interval: 0 //使x轴都显示
}
},
yAxis3D: {
type: 'category',
name: '',
data: dataY,
axisLabel:{
show: true,
interval: 0 //使y轴都显示
}
},
zAxis3D: {
type: 'value',
name: ''
},
//图例
legend: {
orient: 'vertical',
right: 50,
top: 200,
icon: 'roundRect',
textStyle:{
color: '#2c3e50'
}
},
tooltip:{
show:true
},
grid3D: {
boxWidth: 300,
boxHeight:120,
boxDepth: 200,
axisLine: {
show: true,
interval: 0,
lineStyle: {
color: '#2c3e50'
}
},
viewControl: {
distance: 400
}
},
series:[
{
type: 'scatter3D',
name: '生产',
itemStyle: {
color: 'rgb(165, 0, 38)'
},
label: { //当type为scatter3D时有label出现
show: true,
position: 'top', //标签的位置，也就是data中数据相对于线在哪个位置
distance: 0,
textStyle: {
color: '#2c3e50',
fontSize: 12,
borderWidth: 0,
borderColor: '#2c3e50',
backgroundColor: 'transparent'
}
},
data: vdata[0]
},
{
type: 'scatter3D',
name: '收购',
itemStyle:{
color: 'rgb(215, 48, 39)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle: {
color: '#2c3e50',
fontSize: 12,
borderWidth: 0,
borderColor: '#2c3e50',
backgroundColor: 'transparent'
}
},
data:vdata[1]
},
{
type: 'scatter3D',
name: '运输',
itemStyle:{
color: 'rgb(254,224,144)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#2c3e50',
fontSize: 12,
borderWidth: 0,
borderColor: '#2c3e50',
backgroundColor: 'transparent'
}
},
data:vdata[2]
},
{
type: 'scatter3D',
name: '销售',
itemStyle:{
color: 'rgb(255,255,191)'
},
label: {
show:true,
position: 'top',
distance : 0,
textStyle:{
color:'#2c3e50',
fontSize: 12,
borderWidth: 0,
borderColor: '#2c3e50',
backgroundColor: 'transparent'
}
},
data:vdata[3]
},
{
type: 'scatter3D',
name: '消费',
itemStyle: {
color: 'rgb(224,243,248)'
},
label: {
show: true,
position: 'bottom',
distance: 0,
textStyle: {
color: '#2c3e50',
fontSize: 12,
borderWidth: 0,
borderColor: '#2c3e50',
backgroundColor: 'transparent'
}
},
data: vdata[4]
},
{
type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
name: '生产',
lineStyle: {
width: 8, //线的宽度
color: 'rgb(165, 0, 38)' //线的颜色
},
data:vdata[0] //线数据和点数据所需要的格式一样
},
{
type: 'line3D',
name: '收购',
lineStyle: {
color: 'rgb(215, 48, 39)', //线的颜色
width: 8 //线的宽度
},
data:vdata[1]
},
{
type: 'line3D',
name: '运输',
lineStyle: {
color: 'rgb(254,224,144)',
width: 8
},
data:vdata[2]
},
{
type: 'line3D',
name: '销售',
lineStyle: {
color: 'rgb(255,255,191)',
width: 8
},
data:vdata[3]
},
{
type: 'line3D',
name: '消费',
lineStyle: {
color: 'rgb(224,243,248)',
width: 8
},
data:vdata[4]
},
]
})
window.addEventListener('resize', function () {
chart.resize();
});
}
}
}
</script>
<style scoped>
.div{
background-color: #2c3e50;
}
</style>```