1一、心电图效果之单线条 2```html:run 3<!DOCTYPE html> 4<html lang="en"> 5<head> 6 <meta charset="UTF-8"> 7 <title>Echarts实现心电图效果</title> 8 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script> 9</head> 10<body> 11<div id="totalFlowRate" style="height:300px;"></div> 12</body> 13</html> 14<script type="text/javascript"> 15 var totalFlowRate = echarts.init(document.getElementById('totalFlowRate')); 16 var xAxisData=[]; 17 var yAxisData=[]; 18 for(var i=500 ;i>0;i--){ 19 xAxisData.push(i+"秒前"); 20 } 21 for(i=1;i<501;i++){ 22 yAxisData.push(Math.round(Math.random()*1000)); 23 } 24 var totalFlowRateOption = { 25 animation:false, 26 title: { 27 text: '总流量（kbps）'/*, 28 left:"110px"*/ 29 }, 30 tooltip: { 31 trigger: 'axis', 32 axisPointer: { 33 type: 'cross' 34 } 35 }, 36 grid: { 37 left: 50/*"50px"*/, 38 right: 15/*"15px"*/ 39 }, 40 legend: { 41 data:['当前流量'] 42 }, 43 xAxis: { 44 boundaryGap: false, 45 data: xAxisData 46 }, 47 yAxis: { 48 boundaryGap:false 49 }, 50 series: { 51 symbol:"none",/*去掉小圆点*/ 52 name: '当前流量', 53 type: 'line', 54 itemStyle : { 55 normal : { 56 lineStyle:{ 57 width:2,//折线宽度 58 color:"#FF0000"//折线颜色 59 } 60 } 61 }, 62 data: yAxisData/*, 63 smooth:true//0-1之间的数字或true或false，显示为平滑的曲线*/ 64 } 65 }; 66 totalFlowRate.setOption(totalFlowRateOption); 67 setInterval(function(){ 68 yAxisData.push(Math.round(Math.random()*1000)); 69 yAxisData.shift(); 70 totalFlowRate.setOption(totalFlowRateOption); 71 },100); 72 /*setInterval(function(){ 73 yAxisData.push(Math.round(Math.random()*1000)); 74 yAxisData.shift(); 75 var myselfOption = totalFlowRate.getOption(); 76 myselfOption.series[0].data=yAxisData; 77 totalFlowRate.setOption(myselfOption); 78 },100);*/ 79</script> 80``` 81二、心电图效果之单线条下有阴影 82```html:run 83<!DOCTYPE html> 84<html lang="en"> 85<head> 86 <meta charset="UTF-8"> 87 <title>Echarts实现心电图效果</title> 88 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script> 89</head> 90<body> 91<div id="totalFlowRate" style="height:300px;"></div> 92</body> 93</html> 94<script type="text/javascript"> 95 var totalFlowRate = echarts.init(document.getElementById('totalFlowRate')); 96 var xAxisData=[]; 97 var yAxisData=[]; 98 for(var i=100 ;i>0;i--){ 99 xAxisData.push(i+"秒前"); 100 } 101 for(i=1;i<101;i++){ 102 yAxisData.push(Math.round(Math.random()*1000)); 103 } 104 setInterval(function(){ 105 yAxisData.push(Math.round(Math.random()*1000)); 106 yAxisData.shift(); 107 var totalFlowRateOption = { 108 animation:false, 109 title: { 110 text: '总流量（kbps）'/*, 111 left:"110px"*/ 112 }, 113 tooltip: { 114 trigger: 'axis', 115 axisPointer: { 116 type: 'cross' 117 } 118 }, 119 grid: { 120 left: 50/*"50px"*/, 121 right: 15/*"15px"*/ 122 }, 123 legend: { 124 data:['当前流量'], 125 textStyle:{color:"#66b3ff"}/*图例(legend)说明文字的颜色*/ 126 }, 127 xAxis: { 128 boundaryGap: false, 129 data: xAxisData, 130 splitLine:{show: true}/*网格线*/ 131 }, 132 yAxis: { 133 boundaryGap:false, 134 splitLine:{show: true}/*网格线*/ 135 }, 136 series: { 137 /*itemStyle: {normal: {areaStyle: {type: 'default'}}},*/ 138 itemStyle : { 139 normal : { 140 lineStyle:{ 141 color:'#92c2ff'/*折线的颜色*/ 142 }, 143 color:"#66b3ff"/*图例(legend)的颜色,不是图例说明文字的颜色*/ 144 } 145 }, 146 areaStyle: {normal: { 147 color: new echarts.graphic.LinearGradient( 148 /* 声明渐变色，传入5个参数。 149 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位。 150 其中0 0 0 1则代表渐变色从正上方开始。 151 第5个参数则是一个数组, 用于配置颜色的渐变过程，包含起止位置和起止颜色 */ 152 0, 0, 0, 1, 153 [ 154 {offset: 0, color: '#66b3ff'}, 155 /* {offset: 0.5, color: '#c4e1ff'},*/ 156 {offset: 1, color: '#ecf5ff'} 157 ] 158 ) 159 }}, 160 symbol:"none",/*去掉小圆点*/ 161 name: '当前流量', 162 type: 'line', 163 data: yAxisData/*, 164 smooth:true//显示为平滑的曲线*/ 165 } 166 }; 167 totalFlowRate.setOption(totalFlowRateOption); 168 },100); 169</script> 170``` 171三、鼠标移入移出变背景色 172```html:run 173<!DOCTYPE html> 174<html lang="en"> 175<head> 176 <meta charset="UTF-8"> 177 <title>Echarts实现心电图效果</title> 178 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script> 179</head> 180<body> 181<div id="totalFlowRate" style="height:300px;"></div> 182</body> 183</html> 184<script type="text/javascript"> 185 var totalFlowRate = echarts.init(document.getElementById('totalFlowRate')); 186 var xAxisData=[]; 187 var yAxisData=[]; 188 for(var i=100 ;i>0;i--){ 189 xAxisData.push(i+"秒前"); 190 } 191 for(i=1;i<101;i++){ 192 yAxisData.push(Math.round(Math.random()*1000)); 193 } 194 195 yAxisData.push(Math.round(Math.random()*1000)); 196 yAxisData.shift(); 197 var totalFlowRateOption = { 198 backgroundColor: '#ffffff', 199 animation:false, 200 title: { 201 text: '总流量（kbps）'/*, 202 left:"110px"*/ 203 }, 204 tooltip: { 205 trigger: 'axis', 206 axisPointer: { 207 type: 'cross' 208 } 209 }, 210 grid: { 211 left: 50/*"50px"*/, 212 right: 15/*"15px"*/ 213 }, 214 legend: { 215 data:['当前流量'], 216 textStyle:{color:"#66b3ff"}/*图例(legend)说明文字的颜色*/ 217 }, 218 xAxis: { 219 boundaryGap: false, 220 data: xAxisData, 221 splitLine:{show: true}/*网格线*/ 222 }, 223 yAxis: { 224 boundaryGap:false, 225 splitLine:{show: true}/*网格线*/ 226 }, 227 series: { 228 /*itemStyle: {normal: {areaStyle: {type: 'default'}}},*/ 229 itemStyle : { 230 normal : { 231 lineStyle:{ 232 color:'#92c2ff'/*折线的颜色*/ 233 }, 234 color:"#66b3ff"/*图例(legend)的颜色,不是图例说明文字的颜色*/ 235 } 236 }, 237 areaStyle: {normal: { 238 color: new echarts.graphic.LinearGradient( 239 0, 0, 0, 1, 240 [ 241 {offset: 0, color: '#66b3ff'}, 242 /* {offset: 0.5, color: '#c4e1ff'},*/ 243 {offset: 1, color: '#ecf5ff'} 244 ] 245 ) 246 }}, 247 symbol:"none",/*去掉小圆点*/ 248 name: '当前流量', 249 type: 'line', 250 data: yAxisData/*, 251 smooth:true//显示为平滑的曲线*/ 252 } 253 }; 254 totalFlowRate.setOption(totalFlowRateOption); 255 totalFlowRate.getZr().on('mousemove', function (params) { 256 var pointInPixel = [params.offsetX, params.offsetY]; 257 if (totalFlowRate.containPixel('grid', pointInPixel)) { 258 totalFlowRateOption.backgroundColor = '#F6F8FC'; 259 totalFlowRate.setOption(totalFlowRateOption); 260 } 261 }); 262 totalFlowRate.getZr().on('mouseout', function (params) { 263 var pointInPixel = [params.offsetX, params.offsetY]; 264 if (!totalFlowRate.containPixel('grid', pointInPixel)) { 265 totalFlowRateOption.backgroundColor = '#ffffff'; 266 totalFlowRate.setOption(totalFlowRateOption); 267 } 268 }); 269 270</script> 271``` 272 273四、心电图效果之7500条数据同页显示 274```html:run 275<!DOCTYPE html> 276<html lang="en"> 277<head> 278 <meta charset="UTF-8"> 279 <title>Echarts实现心电图效果</title> 280 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script> 281</head> 282<body> 283<div id="totalFlowRate" style="height:300px;"></div> 284</body> 285</html> 286<script type="text/javascript"> 287 var totalFlowRate = echarts.init(document.getElementById('totalFlowRate')); 288 var xAxisData=[]; 289 var yAxisData=[]; 290 for(var i=7500 ;i>0;i--){ 291 xAxisData.push(i+"秒前"); 292 } 293 for(i=1;i<7501;i++){ 294 yAxisData.push(Math.round(Math.random()*1000)); 295 } 296 var totalFlowRateOption = { 297 animation:false, 298 title: { 299 text: '总流量（kbps）'/*, 300 left:"110px"*/ 301 }, 302 tooltip: { 303 trigger: 'axis', 304 axisPointer: { 305 type: 'cross' 306 } 307 }, 308 grid: { 309 left: 50/*"50px"*/, 310 right: 15/*"15px"*/ 311 }, 312 legend: { 313 data:['当前流量'] 314 }, 315 xAxis: { 316 boundaryGap: false, 317 data: xAxisData 318 }, 319 yAxis: { 320 boundaryGap:false 321 }, 322 series: { 323 symbol:"none",/*去掉小圆点*/ 324 name: '当前流量', 325 type: 'line', 326 data: yAxisData/*, 327 smooth:true//显示为平滑的曲线*/ 328 } 329 }; 330 totalFlowRate.setOption(totalFlowRateOption); 331 setInterval(function(){ 332 yAxisData.push(Math.round(Math.random()*1000)); 333 yAxisData.shift(); 334 totalFlowRate.setOption(totalFlowRateOption); 335 },100); 336 /*setInterval(function(){ 337 yAxisData.push(Math.round(Math.random()*1000)); 338 yAxisData.shift(); 339 var myselfOption = totalFlowRate.getOption(); 340 myselfOption.series[0].data=yAxisData; 341 totalFlowRate.setOption(myselfOption); 342 },100);*/ 343</script> 344```
43ECharts：心电图效果
Stella981
2021-10-11
1533 0 0
点赞
收藏
评论区
加载中...