echarts 动态 折线图 |
您所在的位置：网站首页 › echarts折线图动态设置series › echarts 动态 折线图 |
echarts 动态 折线图
|
** 笔者经过花费半天的时间终于实现了它。即有了动态效果也有了无线循环的效果。 **下面与大家一起分享，有用，请留下你的小心心也可以收藏下 该难点所用到的技术有：echarts插件、push()、splice()、reverse()、for循环、if判断语句 假设下面是你所拥有的的案例数据： 这里笔者就用一个图型的案例来说明：数据为模拟数据 var list1 = ['2020/7/1 6:20','2020/7/1 12:20','2020/7/1 18:20','2020/7/2 6:20','2020/7/2 12:20','2020/7/2 18:20', ...... ,'2021/8/17','2021/8/17','2021/8/17'] var list2 = ['12.32','10.23','8.05','9.36','8.54','7.89', ...... ,'8.35','6.25','8.89']该案例用不到 reverse()，用将数组倒序排列。 data中需定义 data(){ return { s: 0, //看做下标取值 H_list:[], //该数组赋值给图标 H_list1:[], H_list2:[], H1_list1:[], H2_list2:[], H0_list:[], //该数组赋值给图标 } } getll(){ this.s = this.s + 1 }, getT(){ 、、list1做处理 //var H = list1.reverse() //该案例用不到这行代码 for(var v = 0; v //这里是将list1数组分为两个数组 H_list1 和 H_list2 ，H_list1第一次加载时就存在，H_list2是作为动态数组 //这里if除了分为两个数组外，另外一个目的是保持图标中有数（把把第一个数组先赋给图标，然后控制第二个数组来，加入到第一个数组中，进而达到动画的效果） this.H_list1.push(list1[v]) this.H_list.push(this.H_list1[v]) }else{ this.H_list2.push(sorH[v]) } } if(this.s this.s = 0 this.getT() } 、、list2做处理 for(var v = 0; v //这里是将list2数组分为两个数组 H1_list1 和 H2_list2 ，H_list1第一次加载时就存在，H_list2是作为动态数组 this.H1_list1.push(list1[v]) this.H0_list.push(this.H_list1[v]) }else{ this.H2_list2.push(sorH[v]) } } if(this.s this.s = 0 this.getT() } } 最后在mounted中写入一下代码： this.getT() this.getll() window.setInterval( () => { this.getT() this.getll() //控制s的变化 }, 1000 * 10) //10秒请求一次算了，还是把图型代码附上吧，如下： 这里echarts的导入和使用笔者这里就不讲解了，不会的可以去看官方资料 getstress(){ //应力 var myChart = echarts.init(document.getElementById("stress")); let label = this.H_list //这两个来自上面对数据的处理的结果，再赋值给它 let value = this.H0_list // let option = { backgroundColor:"", grid: { top:' 5%', right:'5%', left:'5%', bottom:'15%', // containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色 }, { offset: 0.5, color: 'rgba(255,255,255,1)' // 100% 处的颜色 }, { offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色 }], global: false // 缺省为 false } }, }, }, xAxis: [{ // name:'不不不', type: "category", boundaryGap: false, axisLabel: { show:true, color:'red', // interval:, formatter: '{value}', fontSize:12, margin:5, textStyle: { color: "#F076F0" } }, axisLine: { lineStyle: { color: "#243753" } }, splitLine: { show:true, lineStyle: { color: "#243753" } }, axisTick:{ show:true }, data: label }], yAxis: [ { name:"/Mpa", boundaryGap:false, type: "value", // min:'-80', axisLabel: { textStyle: { color: "#7ec7ff" } }, nameTextStyle: { color: "white", fontSize: 12, lineHeight: 40 }, splitLine: { lineStyle: { color: "#243753" } }, axisLine: { show: true, lineStyle:{ color:"#243753" } }, axisTick: { show: true } } ], series: [{ name: "", type: "line", smooth: true, showSymbol: true, symbolSize: 5, zlevel: 2, itemStyle:{ color:'#19a3df', borderColor:"#a3c8d8" }, lineStyle: { normal: { width:2, color: "#FF00FF", } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(88,255,255,0.1)" }, { offset: 0.8, color: "rgba(255,0,255,0.2)" } ], true ), } }, data: value }] }; myChart.setOption(option) },按照笔者这个处理完还有问题，评论区留言，笔者解答 |
【本文地址】
今日新闻 |
推荐新闻 |