可视化例子(11)——ECharts line3D制作三维折线图

因工作需要，制作了三维折线图，可以看到三个变量的变化。其效果如下图所示：

其中遇到了一个很大的问题，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],    //增城区[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.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: 300,top: 230,icon: 'roundRect',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: '黄浦区',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,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,borderWidth: 0,borderColor: '#c6c6c6',backgroundColor: 'transparent'}},data:vdata[8]},{type: 'scatter3D',name: '海珠区',itemStyle:{color: 'rgb( 69,117,180)'},label: {show:true,position: 'top',distance : 0,textStyle:{color:'#ffffff',fontSize: 12,borderWidth: 0,borderColor: '#c6c6c6',backgroundColor: 'transparent'}},data:vdata[9]},{type: 'scatter3D',name: '白云区',itemStyle:{color: 'rgb( 49, 54,149)'  //点的颜色},label: {show:true,position: 'top',distance : 0,textStyle:{color:'#ffffff',fontSize: 12,borderWidth: 0,borderColor: '#c6c6c6',backgroundColor: 'transparent'}},data:vdata[10]},{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(244,109, 67)',width: 10},data:vdata[2]},{type: 'line3D',name: '花都区',lineStyle: {color: 'rgb(253,174, 97)',width: 8},data:vdata[3]},{type: 'line3D',name: '荔湾区',lineStyle: {color: 'rgb(254,224,144)',width: 8},data:vdata[4]},{type: 'line3D',name: '增城区',lineStyle: {color: 'rgb(255,255,191)',width: 8},data:vdata[5]},{type: 'line3D',name: '越秀区',lineStyle: {color: 'rgb(224,243,248)',width: 8},data:vdata[6]},{type: 'line3D',name: '番禺区',lineStyle: {color: 'rgb(171,217,233)',width: 8},data:vdata[7]},{type: 'line3D',name: '天河区',lineStyle: {color: 'rgb(116,173,209)',width: 8},data:vdata[8]},{type: 'line3D',name: '海珠区',lineStyle: {color: 'rgb( 69,117,180)',width: 8},data:vdata[9]},{type: 'line3D',name: '白云区',lineStyle: {color: 'rgb( 49, 54,149)',width: 8},data:vdata[10]}]
});window.addEventListener('resize', function () {chart.resize();
});</script>
</body>
</html>

其中最终传入的数值 vdata 是二维数组，为如下所示：

其中配色也是用 ColorBrewer.js

可视化例子(11)——ECharts line3D制作三维折线图相关推荐

python_pyecharts画三维折线图
1.摘要本文主要讲解:使用python中的pyecharts画三维折线图主要思路: 将数据处理成[[x-],[y-],[z-]]的形式使用Line3D函数渲染 2.数据介绍数据为简单的三维数据 ...
Matlab三维折线图绘制–surf 函数的使用
Matlab三维折线图绘制–surf 函数的使用最近在写毕业论文,整理数据需要绘制一个简单的三维图,简单做个分享! 先上结果图: 最后附上代码: clc,clear,close all; % f ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
echarts：多组折线-图
Echarts是一个基于JavaScript的开源可视化库,它可以用来绘制各种类型的图表,包括折线图.柱状图.饼图等等.在本文中,我们将使用Echarts绘制一个多组折线-图的完整示例. echart ...
python使用matplotlib可视化折线图、在可视化图像中同时绘制多条折线图
python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图目录 python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
origin Pro 9.0画多条三维折线图（此处以两条为例）
origin Pro 9.0画多条三维折线图(此处以两条为例) 首先,建立两个New workbook,将需要的绘制的图分别放在book1 book2-如下图选中book1 中的三维数据,操作如下图 ...
html立体魔方图片制作,ppt怎么制作三维视图的魔方图 ppt制作三维魔方图详细教程...
很多用户在制作PPT展示图的时候,有时候需要制作三维立体的魔方图,制作步骤简单,不过还有很多的用户不清楚如何制作,那么下面小编就为大家分享PPT制作三维魔方图的详细步骤教程,不会制作的朋友可以参照下面 ...
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
说一个小bug,解决echarts的叠堆折线图数据出现坐标和值对不上的问题. 在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上. 这个 ...

可视化例子(11)——ECharts line3D制作三维折线图

可视化例子(11)——ECharts line3D制作三维折线图相关推荐

最新文章

热门文章