一、 动态折线图
该部分是基于echarts开发的，主要有两部分组成，折线图和柱状图，其中末端的垂直细线和小圆球为柱状图部分，小球是柱状图的markPoint设置的，柱状图的data数据是与折线图data数据数组长度相同的数组，数组最后一项与折线图数组的最后一项等值，其余项均为0，具体配置如下：
动态设置的实现：在数组末端插入数据，同时去除数组的第一项，echarts更新，从而实现动态效果
二、 echarts关系图
该部分是基于echarts（tree型图）开发的，其data数据格式有限制（详情见文件：关系图数据格式.text），数据中的name字段包含label标签的所有数据信息，报警及非报警状态时label中字体及背景颜色，是echarts中的富文本结合正则实现的，具体配置如下：
动态echarts源码
1 1 <template> 2 2 <div> 3 3 <div ></div> 4 4 <div>{{show}}</div> 5 5 </div> 6 6 </template> 7 7 <script> 8 8 export default { 9 9 name: "echart1", 10 10 data() { 11 11 return { 12 12 aadata: [], 13 13 bbdata: [], 14 14 ccdata: [], 15 15 zydata: [], 16 16 show: [] 17 17 }; 18 18 }, 19 19 mounted() { 20 20 var that = this; 21 21 var aa = Math.random(); 22 22 var cc = []; 23 23 for (var i = 0; i < 100; i++) { 24 24 that.aadata.push(aa); 25 25 that.bbdata.push(i); 26 26 cc.push(0); 27 27 } 28 28 cc.splice(cc.length - 1, 1, that.aadata[that.aadata.length - 1]); 29 29 that.ccdata = cc; 30 30 that.api(); 31 31 setInterval(function() { 32 32 that.api(); 33 33 }, 100); 34 34 }, 35 35 /* watch: { 36 36 aadata() { 37 37 this.drawLine(); 38 38 } 39 39 }, */ 40 40 methods: { 41 41 api() { 42 42 var that = this; 43 43 var obj = { CodeID: ["1"] }; 44 44 that.$axios 45 45 .post( 46 46 url, 47 47 JSON.stringify(obj), 48 48 { headers: { "Content-Type": "application/json;" } } 49 49 ) 50 50 .then(res => { 51 51 var that = this; 52 52 that.show = res.data.Item; 53 53 var b = res.data.Item[0]; 54 54 that.aadata.shift(); 55 55 that.bbdata.shift(); 56 56 that.aadata.push(b); 57 57 that.bbdata.push(b); 58 58 that.ccdata.splice(that.zydata.length - 1, 1, b); 59 59 that.drawLine(); 60 60 }) 61 61 .catch(error => { 62 62 console.log(error); 63 63 }); 64 64 }, 65 65 drawLine() { 66 66 var that = this; 67 67 var myChart = this.$echarts.init(this.$refs.echart1); 68 68 myChart.setOption({ 69 69 backgroundColor:"rgba(0,5,21,0.9)", 70 70 grid:{ 71 71 height:"150", 72 72 top:"10", 73 73 bottom:"10", 74 74 right:"20", 75 75 left:"20" 76 76 }, 77 77 xAxis: { 78 78 type: "category", 79 79 boundaryGap: false, 80 80 data: that.bbdata, 81 81 axisTick:{ 82 82 show:false 83 83 }, 84 84 axisLabel:{ 85 85 show:false 86 86 }, 87 87 axisLine: { 88 88 lineStyle: { 89 89 color: '#3a3e4d', 90 90 width: 1 91 91 } 92 92 } 93 93 }, 94 94 yAxis: { 95 95 type: "value", 96 96 show:false 97 97 }, 98 98 series: [ 99 99 { 100 100 data: that.aadata, 101 101 type: "line", 102 102 animation: false, 103 103 smooth: true, 104 104 symbol: "none", 105 105 lineStyle: { 106 106 color: { 107 107 type: "linear", 108 108 colorStops: [ 109 109 { 110 110 offset: 0, 111 111 color: "#00e4fc" // 0% 处的颜色 112 112 }, 113 113 { 114 114 offset: 0.66, 115 115 color: "#00e4fc" // 66% 处的颜色 116 116 }, 117 117 { 118 118 offset: 1, 119 119 color: "#fff" // 100% 处的颜色 120 120 } 121 121 ], 122 122 opacity: 0.4, 123 123 globalCoord: false // 缺省为 false 124 124 } 125 125 } 126 126 }, 127 127 { 128 128 name: "最高气温", 129 129 barWidth: 2, 130 130 type: "bar", 131 131 data: that.ccdata, 132 132 animation: false, 133 133 itemStyle:{ 134 134 normal:{ 135 135 color:'#fff' 136 136 } 137 137 }, 138 138 markPoint: { 139 139 animation: false, 140 140 symbol: 'circle', 141 141 data: [{ type: "max" }], 142 142 symbolSize:10, 143 143 itemStyle: { 144 144 normal: { 145 145 color:"#020b1c", 146 146 borderColor:"#fff", 147 147 borderWidth:"2", 148 148 label: { 149 149 show: false, 150 150 } 151 151 } 152 152 } 153 153 } 154 154 } 155 155 ] 156 156 }); 157 157 } 158 158 } 159 159 }; 160 160 </script> 161 161 <style scoped> 162 162 #echart1 { 163 163 width: 700px; 164 164 height: 180px; 165 165 } 166 166 </style>