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>
效果圖展示:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519171.html
標籤：其他