可视化例⼦（11）——EChartsline3D制作三维折线图
因⼯作需要，制作了三维折线图，可以看到三个变量的变化。其效果如下图所⽰：
其中遇到了⼀个很⼤的问题，line3D ⽆法出现标签（查看了所有配置项，均没有该配置，这应该是 ECharts 的⼀个 bug），即如图所⽰中数值⽆法出现。后来想到的解决办法是再画个散点图（scatter3D），因 3D 散点图可以出现标签。3D 折线图套上散点图，就如同折线图上⾯可以出现标签了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Line 3D - ECHARTS-GL</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
<link rel="stylesheet" href="./../common.css">
</head>
<body>
<div id="main"></div>
<script src="../../node_modules/echarts/dist/echarts.js"></script>
<script src="../../dist/echarts-gl.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../js/commonUI.js"></script>
<script>
//⼴州市----
//data ⾥⾯每⼀个⼦数组分别存放的是各个区每⽇的⼈数值
data = [
[0,0,0,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1],  //从化区
[0,1,3,3,4,7,7,8,8,8,8,8,8, 8,8,8,8,8,8,8,8,8],  //南沙区
[5,6,9,9,9,11,11,11,13,13,14,14, 14,16,16,16,16,16,18,18,18,18],  //黄浦区
[1,2,2,5,5,9,11,12,12,12,14,15, 15,15,15,15,16,16,17,19,19,19],  //花都区
[1,1,1,1,2,5,6,6,8,12,15,16,16, 17,17,17,17,17,17,17,17,17],    //荔湾区
[0,0,1,1,5,7,9,11,12,13,17,17, 17,17,17,17,17,17,17,17,17,17],    //增城区
[0,0,1,1,5,7,9,11,12,13,17,17, 17,17,17,17,17,17,17,17,17,17],    //增城区
[5,5,6,11,16,17,17,26,27,29, 33,34,34,34,35,35,35,35,35,35,35,35],  //越秀区
[5,5,7,11,14,16,18,20,25,25, 31,33,34,34,34,36,38,38,40,40,40,40],  //番禺区
[13,17,22,22,26,33,34,36,36, 37,39,40,40,42,42,42,43,43,44,44,44,44],  //天河区    [8,10,11,15,20,24,26,32,37, 44,47,54,57,60,61,63,63,64,64,65,66,66],  //海珠区    [13,16,17,27,35,45, 49,53,58,61,65,66,68, 69,71,73,73,73,74,74,74,74]  //⽩云区]
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'];
dataY = ['从化区','南沙区','黄浦区','花都区','荔湾区','增城区',
'越秀区','番禺区','天河区','海珠区','⽩云区'];
//vdata⾥⾯存放的是处理之后的数据
var vdata = [];
for(i=0;i<dataY.length;i++){
vdata[i] = [];  //vdata⾥⾯存放的是⼆维数组
}
//将处理完之后的数据存放到 vdata ⾥⾯
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.ElementById('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: 300,
top: 230,
icon: 'roundRect',
textStyle:{
textStyle:{
color: '#fff'
}
},
tooltip:{
show:true
},
grid3D: {
boxWidth: 300,
boxHeight:120,
boxDepth: 200,
axisLine: {
show: true,
interval: 0,
lineStyle: {
color: '#fff'
}
},
viewControl: {
distance: 400
}
},
series: [
{
type: 'scatter3D',
name: '从化区',
itemStyle:{
color: 'rgb(165,  0, 38)'
},
label: {  //当type为scatter3D时有label出现                show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'
}
},
data:vdata[0]    //每个区的数据⼀⼀对应        },
{
type: 'scatter3D',
name: '南沙区',
itemStyle:{
color: 'rgb(215, 48, 39)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'
}
},
data:vdata[1]
},
{
type: 'scatter3D',
name: '黄浦区',
name: '黄浦区',
itemStyle:{
color: 'rgb(244,109, 67)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[2]
},
{
type: 'scatter3D',
name: '花都区',
itemStyle:{
color: 'rgb(253,174, 97)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[3]
},
{
type: 'scatter3D',
name: '荔湾区',
itemStyle:{
color: 'rgb(254,224,144)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[4]
},
{
type: 'scatter3D',
name: '增城区',
itemStyle:{
color: 'rgb(255,255,191)'
},
label: {textstyle
show:true,
show:true,
position: 'top',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[5]
},
{
type: 'scatter3D',
name: '越秀区',
itemStyle:{
color: 'rgb(224,243,248)'
},
label: {
show:true,
position: 'bottom',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[6]
},
{
type: 'scatter3D',
name: '番禺区',
itemStyle:{
color: 'rgb(171,217,233)'
},
label: {
show:true,
position: 'top',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,
borderWidth: 0,
borderColor: '#c6c6c6',
backgroundColor: 'transparent'                }
},
data:vdata[7]
},
{
type: 'scatter3D',
name: '天河区',
itemStyle:{
color: 'rgb(116,173,209)'
},
label: {
show:true,
position: 'top',
distance : 0,
textStyle:{
color:'#ffffff',
fontSize: 12,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。