1 <!-- ! 废话不多说,直接看代码吧 ! -->  2 <template>  3   <div class="">  4     <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div>  5   </div>  6 </template>  7 <script lang="js">  8 export default {  9   data() { 10     return { 11       syca_myChart: null,  // 图表 12       interval: null, //定时器 13       x_tm: null,       //获取时间x轴的显示时间 14       inTime: '',     //当前的时间 15       A_data: [3, 5, 2, 3, 4,], // 电流数据 16       V_data: [200, 201, 204, 202, 201, 334], // 电压 17     }; 18   }, 19   computed: {}, 20   components: {}, 21   mounted() { 22     this.x_time(); //先获取x轴的一组时间 23     this.initChart();  //初始化dom元素 24     this.updateChart(); //设置配置进行渲染为图表 25     this.getNewTime(); //更新时间 26   }, 27   methods: { 28     // 获取 x轴 一组时间值   29     x_time() { 30       let now = new Date(); 31       let res = []; 32       for (let i = 0; i < 7; i++) { 33         res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); 34         now = new Date(+now - 3000);  // 时间间隔 35       } 36       this.x_tm = res; 37     }, 38  39     //初始化对象 40     initChart() { 41       this.syca_myChart = this.$echarts.init(this.$refs.ref_chart, "macarons"); 42     }, 43     //请求数据 44     get_data() { 45       // 在此处进行通过websoket进行数据交互代码 略... 46     }, 47  48     //更新数据 49     updateChart() { 50       let option = { 51         title: { 52           show: true, 53           text: "电流/电压", //标题 54           top: 2, 55           left: 2, 56           textStyle: { 57           }, 58           // subtext: '  - 折线图',   //二级标题 59           subtextStyle: { 60             // lineHeghit: 6 61           }, 62         }, 63         legend: { 64           data: ['电流', "电压"], 65           top: 4, 66         }, 67         toolbox: { 68           show: true,  // 是否显示工具 69           itemSize: 11, 70           itemGap: 6,  //间隔大小 71           // right: 25, 72           feature: { 73             saveAsImage: {  //保存为图片 74               type: "jpg", 75               backgroundColor: "#00274b" 76             }, 77             dataView: { 78               // 数据视图 79               show: true, 80               readOnly: true, // 是否可以读写 81               // backgroundColor: "#00274b" 82             }, 83             restore: { 84               // 还原 85             }, 86           } 87         }, 88         xAxis: { 89           type: 'category', 90           data: this.x_tm, 91           // name: "时间",         92           // nameLocation: "end" 93           // boundaryGap: false  // 紧挨边缘 94           axisLabel: { 95             fontSize: 11, 96             formatter: '{value}', 97             // y轴的显示数据单位 98             rotate: -20,//刻度偏移 99           },100         },101         yAxis: [102           {103             type: 'value',104             scale: true,  //是否是脱离 0 值比例105             // name: " 单位V",106             axisLabel: {107               fontSize: 11,108               formatter: '{value} V',109               // y轴的显示数据单位110               rotate: 20,//刻度偏移111             },112             minInterval: 1113           },114         ],115         grid: {116           top: '20%',117           right: '8%',118           left: '12%',119           bottom: '14%',120 121         },122         tooltip: {             //图标划过显示123           show: true,124           trigger: 'axis',125           axisPointer: {126             // type: 'cross',  //十字提示指示线127             // type: 'line', //128             lineStyle: {129               type: 'dashed', //线的类型 虚线130               // snap: true,    // 划过吸附指示线131             }132           },133           //悬浮窗的内容134           // a: 系列名,b: (x轴)类目值, c: 数据值135           // formatter: `{b}<br>{a}: {c} PM `,136           // background: "red",//悬浮窗的背景色137           // borderColor: '',//边框色138           borderWidth: 3,//边框宽139           // padding: '', //内边距140           alwaysShowContent: false, //悬浮窗是否一直显示141           hideDelay: 1000, //划入时悬浮多少秒142           enterable: true, //划入正常显示143           textStyle: {    //悬浮框的样式144             color: '#fff',145             fontSize: 14,146 147           }148         },149         series: [150           {151             name: '电流',152             data: this.A_data,153             type: 'line',154             smooth: true,  // 折线图的线条是否平滑155             areaStyle: {}, // 背景填充156             // stack: "all",   // 多组数据堆叠157             label: {158               show: true,    //数据标签显示159               position: 'top', //数据显示位置160               distance: 8, // 距离161               offset: [-2, -2], //文字偏移162               formatter: "{c}", //标签内容163 164             },165           },166           {167             name: '电压',168             data: this.V_data,169             type: 'line', // line 折线  bar 柱状170             smooth: true,  // 折线图的线条是否平滑171             areaStyle: {}, // 背景填充172             // stack: "all",   // 多组数据堆叠173             label: {174               show: true,    //数据标签显示175               position: 'top'176             },177           }178         ]179       }180       //进行渲染图表181       this.syca_myChart.setOption(option);182     },183     // 更新时间184     getNewTime() {185       clearInterval(this.interval); // 开启定时器之前先清上次的186       this.interval = setInterval(() => {187         this.inTime = new Date().toLocaleTimeString();188         this.x_tm.push(this.inTime);189         if (this.x_tm.length > 5) {190           this.x_tm.shift();191         }192         this.updateChart();193       }, 3000)194     },195   },196   watch: {},197   destroyed() {198     clearInterval(this.interval);199   },200 };201 </script>202 <style scoped lang='less'>203 204 </style>

效果图展示: