极客观点
项目管理
HarmonyOS
预期的效果如下图
现在已写出的代码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div style="height: 60%" id="container"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">
var thisURL = document.URL;
var getval = thisURL.split('?')[1];
var showval = getval.split("=")[1];
alert(showval)
var dom = document.getElementById("container");
var myline2 = echarts.init(dom);
option = null;
var d=new Date();
var olddate = new Date(d.getTime() - 5000);
var base = +olddate;
//后台传递开始
var oneDay = 1000;
var date = [];
var num = 0;
var data1 = [Math.random()];
var data2 = [Math.random()];
var now = new Date(base);
function addData(shift) {
var strs=showval.split("-"); //字符分割
var tmp = [strs[0], strs[1], strs[2]].join('/') + "\n" + [ now.getHours(), now.getMinutes(), now.getSeconds()].join(':');
date.push(tmp);
data1.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
data2.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
if (shift) {
date.shift();
data1.shift();
data2.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i <= 25; i++) {
num = num + 1;
addData();
}
var xcd='a'
option ={
backgroundColor:['#FFFFFF'],
tooltip: {
trigger: 'axis'
},
legend: {
x: 'right',
data:[xcd,'a'],
textStyle:{
fontsize:20
}
},
xAxis: {
axisLabel:{
textStyle:{
},
interval:0,
},
axisLine: {
lineStyle: {
}
},
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
splitLine:{
show:false,
},
boundaryGap: [0, '50%'],
type: 'value'
},
grid: {
top:'3%',
left: '1%',
right: '5%',
bottom: '5%',
containLabel: true,
},
series: [
{
name:'a',
type:'line',
data:data2
},
]
};
setInterval(function () {
addData(true);
myline2.setOption({
xAxis: {
data: date
},
series: [
{
name: 'a',
data: data2,
},
]
});
}, 1000);
if (option && typeof option === "object") {
myline2.setOption(option, true);
}</script>
</body>
</html>
这个悬浮提示可以用
echarts的API showTip 来主动显示提示框。文档 http://echarts.baidu.com/api....
用法示例：