因工作需要,制作了三维折线图,可以看到三个变量的变化。其效果如下图所示:
其中遇到了一个很大的问题,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