最近的工作中准备做一个折线图去显示设备的当前温度变化,最开始准备使用echarts进行了相关的定制以及进行了压缩但是发现最小的大小还是300多K字节,由于我们的网页程序存储在flash上,flash的空间大小为2m其中还要留一半给固件程序升级使用,所以空间大小让我只能望洋兴叹,还要兼容老的一些浏览器不敢完全去使用canvas,所以只能使用svg,由于本人也是初次的使用svg还想实现echarts的一些功能和特效,最起码需要在鼠标悬浮在节点上时显示当前节点的信息,也浏览了很多人的做法,感觉没太明白,自己鼓捣了一下算是实现了这个功能希望能和大家一起分享,如果有更好的方式请大家不吝指教。话不多说上程序。
<!DOCTYPE html>
<html>
<head>
<title>温度监控</title>
<meta charset="utf-8">
<style>
svg circle:hover{
fill: whitesmoke;
r:6;
}
div::after{
content: "";
}
</style>
</head>
<body style="width: 1920px;height: 1080px;">
<svg id="svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="200" y="80" fill="blue" font-size="24">温度监测</text>
<line x1="100" y1="500" x2="100" y2="100"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<line x1="100" y1="500" x2="500" y2="500"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<text x="60" y="500" >0</text>
<text x="60" y="460" >10</text>
<text x="60" y="420" >20</text>
<text x="60" y="380" >30<