Echarts GL line3D鼠标悬停无法显示正确的坐标 坐标指示器指向第一个坐标
Echarts GL line3D鼠标悬停无法显示正确的坐标 坐标指示器指向第一个坐标
请问下有人知道这是怎么回事吗
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Line 3D - Sensor curve</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">
<style>
.btn{
width: 60px;
height: 30px;
background-color: blue;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
cursor: pointer;
z-index: 99999;
position: relative;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100px;">
<div id="BTNUpdate" class="btn" onclick="updateEchartData();">更新</div>
</div>
<div id="main"></div>
<script src="echarts.js"></script>
<script src="echarts-gl.js"></script>
<script src="lib/jquery.min.js"></script>
<!--script src="qwebchannel.js"></script-->
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption(
{
xAxis3D:
{
type: 'category',
name: '',
axisLabel:
{
show: true,
interval: 0
}
},
yAxis3D:
{
type: 'value',
name: '',
axisLabel:
{
show: true,
interval: 'auto'
}
},
zAxis3D:
{
type: 'value',
name: ''
},
//图例
legend:
{
icon: 'roundRect',
textStyle:
{
color: '#000000'
}
},
tooltip:
{
show: true,
formatter: function(param)
{
console.log(param);
let showText = '';
let br = '<br />';
let arrs = ['x','y','z'];
showText = showText + param.marker + br;
if(param.data && param.data.length > 0)
{
for (let i = 0; i < param.data.length; i++)
{
showText = showText + arrs[i] + ': ' + param.data[i] + br;
}
}
return showText;
}
},
grid3D:
{
top: 0,
boxWidth: 200,
boxHeight: 120,
boxDepth: 300,
axisLine:
{
show: true,
interval: 0,
lineStyle:
{
color: '#000000'
}
},
viewControl:
{
distance: 400,
alpha: 20,
beta: 30
}
},
series:[]
});
//console.log('option', chart.getOption())
// 模拟原始数据,返回 {x:[],y:[],z:[]}
function getRandomData()
{
let tempObj = {};
// x轴模拟数据
let tempXData = [];
let xIdx = Math.floor(Math.random() * 20) + 2;
for (let i = 1; i < xIdx; i++)
{
tempXData.push('sensor' + i);
}
tempObj.x = tempXData;
// y轴模拟数据
let yLen = Math.floor(Math.random() * 50) + 1;
let tempCount = 1;
let tempYData = [];
for (let i = 0; i < yLen; i++)
{
tempYData.push(tempCount);
tempCount= tempCount + Math.floor(Math.random() * 5) + 1;
}
tempObj.y = tempYData;
// z轴模拟数据(数量和y数组一致)
for (let i = 0; i < tempXData.length; i++)
{
let tempZarrs = [];
for (let j = 0; j < yLen; j++)
{
tempZarrs.push(Math.floor(Math.random() * 30));
}
tempObj['z' + i] = tempZarrs;
}
return tempObj;
}
// 更新数据
let colors = [
'rgb(165, 0, 38)',
'rgb(215, 48, 39)',
'rgb(244, 109, 67)',
'rgb(253, 174, 97)',
'rgb(254, 224, 144)',
'rgb(255, 255, 191)',
'rgb(224, 243, 248)',
'rgb(171, 217, 233)',
'rgb(116, 173, 209)',
'rgb( 69, 117, 180)'
];
function updateEchartData()
{
let newData = getRandomData();
let machinesSeries = [];
let len = newData.x.length;
for (let i = 0; i < len; i++)
{
let seriesName = newData.x[i];
let tempArrs = [];
// 构造符合echart的数据结构
for (let j = 0; j < newData.y.length; j++)
{
tempArrs.push([seriesName, newData.y[j], newData['z' + i][j]]);
}
machinesSeries.push(
{
type: 'line3D',
name: seriesName,
lineStyle:
{
color: colors[i % colors.length],
width: 2
},
data: tempArrs
});
}
//console.log('machinesSeries', machinesSeries);
let opt = chart.getOption();
opt.series = machinesSeries;
chart.clear();
chart.setOption(opt);
}
//new QWebChannel(qt.webChannelTransport,function(channel)
//{
// var webobj = channel.objects.webobj;
// //arg-QJsonObject类型
// webobj.dataChanged.connect(function(arg)
// {
// updateEchartData(arg);
// });
// });
window.addEventListener('resize',function()
{
chart.resize();
});
</script>
</body>
</html>
你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答
本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。
因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。