vue中实现当前时间echarts图表时间轴动态的数据

  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: 1
113           },
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>