可视化例⼦（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 = ['从化区','南沙区','黄浦区','花都区','荔湾区','增城区',
'越秀区','番禺区','天河区','海珠区','⽩云区'];
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: {
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,
>永远的谭嗣同
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议