@leevan/jtui 2.0.7 → 2.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/examples/App.vue +20 -12
  2. package/examples/echarts/moreCharts.vue +159 -0
  3. package/examples/form/form.vue +61 -0
  4. package/examples/tableTest/table-tree.vue +22 -8
  5. package/examples/tableTest/tree-table.vue +9 -2
  6. package/lib/jtui.common.js +261 -101
  7. package/lib/jtui.css +1 -1
  8. package/lib/jtui.umd.js +261 -101
  9. package/lib/jtui.umd.min.js +4 -4
  10. package/package.json +1 -1
  11. package/packages/jt-echarts-pc/JtEchartsPc.vue +1454 -1135
  12. package/packages/jt-form-pc/JtFormPc.vue +2 -0
  13. package/packages/jt-table/components/tableColumn.vue +2 -0
  14. package/packages/jt-table/index.vue +9 -3
  15. package/packages/jt-table-pc/components/tableColumn.vue +2 -0
  16. package/packages/jt-table-pc/data2.js +29 -29
package/packages/jt-echarts-pc/JtEchartsPc.vue CHANGED
@@ -1,7 +1,15 @@
1
1
  <template>
2
2
  <div class="echarts-wapper" style="position: relative" :style="echartStyle">
3
- <div :ref="ID" :id="ID" style="width: 100%;height: 100% ;position: absolute;top: 0px;left: 0px;"></div>
4
- <span class="el-icon-s-tools eitid-icon" v-if="isopenTools&&showToolsBtn" @click="dialogVisible=true">
3
+ <div
4
+ :ref="ID"
5
+ :id="ID"
6
+ style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px"
7
+ ></div>
8
+ <span
9
+ class="el-icon-s-tools eitid-icon"
10
+ v-if="isopenTools && showToolsBtn"
11
+ @click="dialogVisible = true"
12
+ >
5
13
  </span>
6
14
  <el-dialog
7
15
  :modal="false"
@@ -10,43 +18,95 @@
10
18
  width="30%"
11
19
  >
12
20
  <div class="dialog-innercont-panel">
13
- <div v-for="(value,key,index) in echartsStyle" :key="key+index">
21
+ <div v-for="(value, key, index) in echartsStyle" :key="key + index">
14
22
  <el-form ref="form" size="mini">
15
23
  <!--网格线----starts-->
16
- <el-form-item :label="keyToChineseName(key)" v-if="key=='showXGridlines'">
24
+ <el-form-item
25
+ :label="keyToChineseName(key)"
26
+ v-if="key == 'showXGridlines'"
27
+ >
17
28
  <el-switch
18
29
  @change="itemChange"
19
30
  v-model="echartsStyle.showXGridlines"
20
31
  active-color="#13ce66"
21
- inactive-color="#ff4949">
32
+ inactive-color="#ff4949"
33
+ >
22
34
  </el-switch>
23
35
  </el-form-item>
24
- <el-form-item :label="keyToChineseName(key)" v-if="key=='showYGridlines'">
36
+ <el-form-item
37
+ :label="keyToChineseName(key)"
38
+ v-if="key == 'showYGridlines'"
39
+ >
25
40
  <el-switch
26
41
  @change="itemChange"
27
42
  v-model="echartsStyle.showYGridlines"
28
43
  active-color="#13ce66"
29
- inactive-color="#ff4949">
44
+ inactive-color="#ff4949"
45
+ >
30
46
  </el-switch>
31
47
  </el-form-item>
32
- <el-form-item v-if="key=='latticeNumber'&&(echartsStyle.showXGridlines||echartsStyle.showYGridlines)"
33
- :label="keyToChineseName(key)">
34
- <el-input-number @change="itemChange" v-model="echartsStyle.latticeNumber" :min="1"
35
- :max="10"></el-input-number>
48
+ <el-form-item
49
+ v-if="
50
+ key == 'latticeNumber' &&
51
+ (echartsStyle.showXGridlines || echartsStyle.showYGridlines)
52
+ "
53
+ :label="keyToChineseName(key)"
54
+ >
55
+ <el-input-number
56
+ @change="itemChange"
57
+ v-model="echartsStyle.latticeNumber"
58
+ :min="1"
59
+ :max="10"
60
+ ></el-input-number>
36
61
  </el-form-item>
37
- <el-form-item v-if="key=='latticeWidth'&&(echartsStyle.showXGridlines||echartsStyle.showYGridlines)"
38
- :label="keyToChineseName(key)">
39
- <el-input-number @change="itemChange" v-model="echartsStyle.latticeWidth" :min="0.1" :step="0.1"
40
- :max="5"></el-input-number>
62
+ <el-form-item
63
+ v-if="
64
+ key == 'latticeWidth' &&
65
+ (echartsStyle.showXGridlines || echartsStyle.showYGridlines)
66
+ "
67
+ :label="keyToChineseName(key)"
68
+ >
69
+ <el-input-number
70
+ @change="itemChange"
71
+ v-model="echartsStyle.latticeWidth"
72
+ :min="0.1"
73
+ :step="0.1"
74
+ :max="5"
75
+ ></el-input-number>
41
76
  </el-form-item>
42
- <el-form-item v-if="key=='latticetype'&&(echartsStyle.showXGridlines||echartsStyle.showYGridlines)"
43
- :label="keyToChineseName(key)">
44
- <el-radio @change="itemChange" v-model="echartsStyle.latticetype" label="solid">实线</el-radio>
45
- <el-radio @change="itemChange" v-model="echartsStyle.latticetype" label="dashed">虚线</el-radio>
46
- <el-radio @change="itemChange" v-model="echartsStyle.latticetype" label="dotted">点</el-radio>
77
+ <el-form-item
78
+ v-if="
79
+ key == 'latticetype' &&
80
+ (echartsStyle.showXGridlines || echartsStyle.showYGridlines)
81
+ "
82
+ :label="keyToChineseName(key)"
83
+ >
84
+ <el-radio
85
+ @change="itemChange"
86
+ v-model="echartsStyle.latticetype"
87
+ label="solid"
88
+ >实线</el-radio
89
+ >
90
+ <el-radio
91
+ @change="itemChange"
92
+ v-model="echartsStyle.latticetype"
93
+ label="dashed"
94
+ >虚线</el-radio
95
+ >
96
+ <el-radio
97
+ @change="itemChange"
98
+ v-model="echartsStyle.latticetype"
99
+ label="dotted"
100
+ >点</el-radio
101
+ >
47
102
  </el-form-item>
48
- <el-form-item v-if="key=='gridlinesColor'&&(echartsStyle.showXGridlines||echartsStyle.showYGridlines)"
49
- :label="keyToChineseName(key)">
103
+ <el-form-item
104
+ v-if="
105
+ key == 'gridlinesColor' &&
106
+ (echartsStyle.showXGridlines || echartsStyle.showYGridlines)
107
+ "
108
+ :label="keyToChineseName(key)"
109
+ >
50
110
  <el-color-picker
51
111
  @change="itemChange"
52
112
  v-model="echartsStyle.gridlinesColor"
@@ -55,35 +115,78 @@
55
115
  </el-color-picker>
56
116
  </el-form-item>
57
117
  <!--刻度线----starts-->
58
- <el-form-item v-if="key=='splitXLine'" :label="keyToChineseName(key)">
118
+ <el-form-item
119
+ v-if="key == 'splitXLine'"
120
+ :label="keyToChineseName(key)"
121
+ >
59
122
  <el-switch
60
123
  @change="itemChange"
61
124
  v-model="echartsStyle.splitXLine"
62
125
  active-color="#13ce66"
63
- inactive-color="#ff4949">
126
+ inactive-color="#ff4949"
127
+ >
64
128
  </el-switch>
65
129
  </el-form-item>
66
- <el-form-item v-if="key=='splitYLine'" :label="keyToChineseName(key)">
130
+ <el-form-item
131
+ v-if="key == 'splitYLine'"
132
+ :label="keyToChineseName(key)"
133
+ >
67
134
  <el-switch
68
135
  @change="itemChange"
69
136
  v-model="echartsStyle.splitYLine"
70
137
  active-color="#13ce66"
71
- inactive-color="#ff4949">
138
+ inactive-color="#ff4949"
139
+ >
72
140
  </el-switch>
73
141
  </el-form-item>
74
- <el-form-item v-if="key=='splitLinetype'&&(echartsStyle.splitXLine||echartsStyle.splitYLine)"
75
- :label="keyToChineseName(key)">
76
- <el-radio @change="itemChange" v-model="echartsStyle.splitLinetype" label="solid">实线</el-radio>
77
- <el-radio @change="itemChange" v-model="echartsStyle.splitLinetype" label="dashed">虚线</el-radio>
78
- <el-radio @change="itemChange" v-model="echartsStyle.splitLinetype" label="dotted">点</el-radio>
142
+ <el-form-item
143
+ v-if="
144
+ key == 'splitLinetype' &&
145
+ (echartsStyle.splitXLine || echartsStyle.splitYLine)
146
+ "
147
+ :label="keyToChineseName(key)"
148
+ >
149
+ <el-radio
150
+ @change="itemChange"
151
+ v-model="echartsStyle.splitLinetype"
152
+ label="solid"
153
+ >实线</el-radio
154
+ >
155
+ <el-radio
156
+ @change="itemChange"
157
+ v-model="echartsStyle.splitLinetype"
158
+ label="dashed"
159
+ >虚线</el-radio
160
+ >
161
+ <el-radio
162
+ @change="itemChange"
163
+ v-model="echartsStyle.splitLinetype"
164
+ label="dotted"
165
+ >点</el-radio
166
+ >
79
167
  </el-form-item>
80
- <el-form-item v-if="key=='splitLineWidth'&&(echartsStyle.splitXLine||echartsStyle.splitYLine)"
81
- :label="keyToChineseName(key)">
82
- <el-input-number @change="itemChange" v-model="echartsStyle.splitLineWidth" :min="0.1" :step="0.1"
83
- :max="5"></el-input-number>
168
+ <el-form-item
169
+ v-if="
170
+ key == 'splitLineWidth' &&
171
+ (echartsStyle.splitXLine || echartsStyle.splitYLine)
172
+ "
173
+ :label="keyToChineseName(key)"
174
+ >
175
+ <el-input-number
176
+ @change="itemChange"
177
+ v-model="echartsStyle.splitLineWidth"
178
+ :min="0.1"
179
+ :step="0.1"
180
+ :max="5"
181
+ ></el-input-number>
84
182
  </el-form-item>
85
- <el-form-item v-if="key=='splitLineCloor'&&(echartsStyle.splitXLine||echartsStyle.splitYLine)"
86
- :label="keyToChineseName(key)">
183
+ <el-form-item
184
+ v-if="
185
+ key == 'splitLineCloor' &&
186
+ (echartsStyle.splitXLine || echartsStyle.splitYLine)
187
+ "
188
+ :label="keyToChineseName(key)"
189
+ >
87
190
  <el-color-picker
88
191
  @change="itemChange"
89
192
  v-model="echartsStyle.splitLineCloor"
@@ -92,7 +195,10 @@
92
195
  </el-color-picker>
93
196
  </el-form-item>
94
197
  <!--坐标轴----starts-->
95
- <el-form-item v-if="key=='axiscolor'" :label="keyToChineseName(key)">
198
+ <el-form-item
199
+ v-if="key == 'axiscolor'"
200
+ :label="keyToChineseName(key)"
201
+ >
96
202
  <el-color-picker
97
203
  @change="itemChange"
98
204
  v-model="echartsStyle.axiscolor"
@@ -100,7 +206,10 @@
100
206
  >
101
207
  </el-color-picker>
102
208
  </el-form-item>
103
- <el-form-item v-if="key=='axisTextcolor'" :label="keyToChineseName(key)">
209
+ <el-form-item
210
+ v-if="key == 'axisTextcolor'"
211
+ :label="keyToChineseName(key)"
212
+ >
104
213
  <el-color-picker
105
214
  @change="itemChange"
106
215
  v-model="echartsStyle.axisTextcolor"
@@ -108,7 +217,10 @@
108
217
  >
109
218
  </el-color-picker>
110
219
  </el-form-item>
111
- <el-form-item v-if="key=='axisNamecolor'" :label="keyToChineseName(key)">
220
+ <el-form-item
221
+ v-if="key == 'axisNamecolor'"
222
+ :label="keyToChineseName(key)"
223
+ >
112
224
  <el-color-picker
113
225
  @change="itemChange"
114
226
  v-model="echartsStyle.axisNamecolor"
@@ -117,7 +229,10 @@
117
229
  </el-color-picker>
118
230
  </el-form-item>
119
231
  <!--图例文字颜色--->
120
- <el-form-item v-if="key=='legendTextColor'" :label="keyToChineseName(key)">
232
+ <el-form-item
233
+ v-if="key == 'legendTextColor'"
234
+ :label="keyToChineseName(key)"
235
+ >
121
236
  <el-color-picker
122
237
  @change="itemChange"
123
238
  v-model="echartsStyle.legendTextColor"
@@ -125,22 +240,39 @@
125
240
  >
126
241
  </el-color-picker>
127
242
  </el-form-item>
128
- <el-form-item v-if="key=='axisRotate'" :label="keyToChineseName(key)">
129
- <el-input-number @change="itemChange" v-model="echartsStyle.axisRotate" :min="-90" :step="1"
130
- :max="90"></el-input-number>
243
+ <el-form-item
244
+ v-if="key == 'axisRotate'"
245
+ :label="keyToChineseName(key)"
246
+ >
247
+ <el-input-number
248
+ @change="itemChange"
249
+ v-model="echartsStyle.axisRotate"
250
+ :min="-90"
251
+ :step="1"
252
+ :max="90"
253
+ ></el-input-number>
131
254
  </el-form-item>
132
255
  <!--色系设置-->
133
- <el-form-item v-if="key=='colors'" :label="keyToChineseName(key)">
256
+ <el-form-item v-if="key == 'colors'" :label="keyToChineseName(key)">
134
257
  <el-color-picker
135
258
  @change="itemChange"
136
- v-for="(item,index) in echartsStyle.colors" :key="index"
259
+ v-for="(item, index) in echartsStyle.colors"
260
+ :key="index"
137
261
  v-model="echartsStyle.colors[index]"
138
262
  show-alpha
139
263
  >
140
264
  </el-color-picker>
141
- <span class="el-icon-circle-plus-outline cz-btn" @click="colorsHandl('add')" style="color:#349129"
142
- title="添加色系"></span>
143
- <span class="el-icon-remove-outline cz-btn" @click="colorsHandl('del')" title="添加色系"></span>
265
+ <span
266
+ class="el-icon-circle-plus-outline cz-btn"
267
+ @click="colorsHandl('add')"
268
+ style="color: #349129"
269
+ title="添加色系"
270
+ ></span>
271
+ <span
272
+ class="el-icon-remove-outline cz-btn"
273
+ @click="colorsHandl('del')"
274
+ title="添加色系"
275
+ ></span>
144
276
  </el-form-item>
145
277
  </el-form>
146
278
  </div>
@@ -150,1137 +282,1324 @@
150
282
  </template>
151
283
 
152
284
  <script>
153
- import {getTimeJson} from "./getTime.js";
154
- import {getJson} from './echartsConf.js';
155
-
156
- export default {
157
- name: "JtEchartsPc",
158
- data() {
159
- return {
160
- isopenTools: true,
161
- dialogVisible: false,
162
- echartStyle: "",
163
- timeInterval: 1000, //时间刻度 默认一秒
164
- interval: 1, //时间间距
165
- xAxisData: [],
166
- echartsInfo: {}, //数据缓存
167
- idArray: [], //记录修改线id
168
- dataIndex: [], //记录dataIndex
169
- editAry: [], //记录修改线数据,
170
- echartsData: [],
171
- echartsStyle: {
172
- showXGridlines: true,
173
- showYGridlines: true,
174
- latticeNumber: 1, //网格线分割间隔
175
- latticeWidth: 1,
176
- latticetype: 'solid', //网格线类型
177
- gridlinesColor: "#999", //网格线颜色
178
- splitXLine: true, //轴刻度线
179
- splitYLine: true, //轴刻度线
180
- splitLineWidth: 1, //刻度线宽度
181
- splitLineCloor: '', //刻度线颜色
182
- splitLinetype: 'solid', //刻度线类型
183
- axiscolor: "#000", //坐标轴颜色
184
- axisTextcolor: "", //坐标轴文字颜色
185
- axisRotate: 0, //文字旋转角度
186
- axisNamecolor: '#000', //坐标轴name颜色
187
- legendTextColor: '#000',//图例文字颜色
188
- colors: ['rgba(215, 49, 45, 1)'] //色系
189
- }
190
- }
191
- },
192
- computed: {},
193
- props: {
194
- formattingTime: { //是否处理x轴的时间显示规则
195
- type: Boolean,
196
- default: false
197
- },
198
- echartsOption: { //echarts官方配置单
199
- type: Object,
200
- default: () => {
201
- }
202
- },
203
- seriesData: { //组件需要的展示数据 只有formattingTime 开启时有效
204
- type: Array,
205
- default: () => []
206
- },
207
- ID: {
208
- type: String,
209
- default: "myecharts"
210
- },
211
- echartWidth: { //图标组件的宽度
212
- default: '100%'
213
- },
214
- echartHeight: { //图表组件的高度
215
- default: '100%'
216
- },
217
- dateInterval: { //显示的时间单位 如果不指定会默认根据时间最大值和最小值进行给定
218
- type: String,
219
- default: "" //时间间隔单位：年/月/日/时/分:year/month/day/hour/minute/second
220
- },
221
- startTime: { //开始时间
222
- type: String,
223
- default: ""
224
- },
225
- endTime: { //结束时间
226
- type: String,
227
- default: ""
228
- },
229
- maxAndMinLevel: { //自动计算最大最小值时取值比例 算法为max =（max+min）*maxAndMinLevel ,min = (max-min)*maxAndMinLevel
230
- type: Number,
231
- default: 0.05
232
- },
233
- moduleName: { //模块名称用来标识当前图表的唯一性
234
- type: String,
235
- default: "myecharts"
236
- },
237
- valueDatumLine: { //第几根线为基准值
238
- type: Number,
239
- default: -1
240
- },
241
- yMaxAndMinkeepDecimal: { // 自动计算y轴最大最小值时保留小数位数
242
- type: Number,
243
- default: 0
244
- },
245
- echartsStyleObj: { //echarts的一些基础样式设置
246
- type: Object,
247
- default: () => null
248
- },
249
- showToolsBtn: { //基础样式自定义按钮显示开关
250
- type: Boolean,
251
- default: true
252
- },
253
- lineSmooth: { //曲线类型
254
- type: Boolean,
255
- default: true
256
- },
257
- autoCompMaxAndMin: { //自动计算最大最小值
258
- type: Boolean,
259
- default: true
260
- }
261
- },
262
- created() {
263
- let temp = localStorage.getItem(`echarts_com_${this.moduleName}`);
264
- if (temp && temp.length > 0) {
265
- this.echartsStyle = JSON.parse(temp);
266
- } else {
267
- if (this.echartsStyleObj != null) {
268
- Object.keys(this.echartsStyleObj).forEach((key) => {
269
- this.echartsStyle[key] = this.echartsStyleObj[key];
270
- });
271
- }
272
- }
273
- this.setBoxSize();//设置容器的大小
274
- if (this.formattingTime) {
275
- if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
276
- this.isopenTools = false;
277
- return;
278
- }
279
- this.toDealSeriesData(); //处理时间
280
- this.setAutomation(this.echartsData.option.series, this.echartsData.CreateChart, this.echartsData.setAutomation);
281
- }
282
-
283
- },
284
- mounted() {
285
- if (this.formattingTime) {
286
- if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
287
- return;
288
- }
289
- }
290
- this.echarts = require('echarts');
291
- this.myChart = this.echarts.init(document.getElementById(this.ID));
292
- this.setEchartsOption();
293
- let _this = this;
294
- this.myChart.on('click', function (params) {
295
- // console.log(params);
296
- if (_this.formattingTime) {
297
- let tm = _this.getTimeByValue(params.value[0]);
298
- params.tm = tm;
299
-
300
- }
301
- _this.$emit("echartClick", params)
302
- //_this.echartsData.setCustomEvents.onClick.func(params);
303
- });
304
- // setTimeout(()=>{
305
- // let options = this.myChart.getOption();
306
- // let ysplitNumber = options.yAxis.splitNumber;
307
- // let step = Math.floor((this.echartsStyle.ymax.value-this.echartsStyle.ymin.value)/ysplitNumber*100)/100;
308
- // this.echartsStyle.ymax.step = step;
309
- // this.echartsStyle.ymin.step = step;
285
+ import { getTimeJson } from "./getTime.js";
286
+ import { getJson } from "./echartsConf.js";
310
287
 
311
-
312
- // },5000);
313
- window.addEventListener("resize", () => { //屏幕大小变化从新调整echart大小
314
- this.myChart.resize();
315
- });
316
-
317
- },
318
- methods: {
319
- chartObj() {
320
- return this.myChart;
321
- },
322
- disposeChart () {
323
- this.myChart.dispose();
324
- this.myChart = this.echarts.init(document.getElementById(this.ID));
288
+ export default {
289
+ name: "JtEchartsPc",
290
+ data() {
291
+ return {
292
+ isopenTools: true,
293
+ dialogVisible: false,
294
+ echartStyle: "",
295
+ timeInterval: 1000, //时间刻度 默认一秒
296
+ interval: 1, //时间间距
297
+ xAxisData: [],
298
+ echartsInfo: {}, //数据缓存
299
+ idArray: [], //记录修改线id
300
+ dataIndex: [], //记录dataIndex
301
+ editAry: [], //记录修改线数据,
302
+ echartsData: [],
303
+ echartsStyle: {
304
+ showXGridlines: true,
305
+ showYGridlines: true,
306
+ latticeNumber: 1, //网格线分割间隔
307
+ latticeWidth: 1,
308
+ latticetype: "solid", //网格线类型
309
+ gridlinesColor: "#999", //网格线颜色
310
+ splitXLine: true, //轴刻度线
311
+ splitYLine: true, //轴刻度线
312
+ splitLineWidth: 1, //刻度线宽度
313
+ splitLineCloor: "", //刻度线颜色
314
+ splitLinetype: "solid", //刻度线类型
315
+ axiscolor: "#000", //坐标轴颜色
316
+ axisTextcolor: "", //坐标轴文字颜色
317
+ axisRotate: 0, //文字旋转角度
318
+ axisNamecolor: "#000", //坐标轴name颜色
319
+ legendTextColor: "#000", //图例文字颜色
320
+ colors: ["rgba(215, 49, 45, 1)"], //色系
325
321
  },
326
- setEchartsOption() {
327
-
328
- console.log(this.echartsData.option, "this.echartsData.option");
329
- if (this.formattingTime) {
330
- this.echartsData.option = this.setEchartsStyle(this.echartsData.option); //重置样式
331
- this.$nextTick(() => {
332
- this.setTimeInterval(this.echartsData.CreateChart.timeInterval);
333
- this.serFormat(this.echartsData.setFormat, this.echartsData.CreateChart);
334
- console.log(this.echartsData.option, "this.echartsData.option=============");
335
- this.myChart.setOption(this.echartsData.option);
336
- });
337
- } else {
338
- if (this.echartsOption != undefined) {
339
- this.echartsOption.option = this.setEchartsStyle(this.echartsOption.option); //重置样式
340
- this.myChart.setOption(this.echartsOption.option);
341
- }
342
- }
322
+ };
323
+ },
324
+ computed: {},
325
+ props: {
326
+ formattingTime: {
327
+ //是否处理x轴的时间显示规则
328
+ type: Boolean,
329
+ default: false,
330
+ },
331
+ echartsOption: {
332
+ //echarts官方配置单
333
+ type: Object,
334
+ default: () => {},
335
+ },
336
+ seriesData: {
337
+ //组件需要的展示数据 只有formattingTime 开启时有效
338
+ type: Array,
339
+ default: () => [],
340
+ },
341
+ ID: {
342
+ type: String,
343
+ default: "myecharts",
344
+ },
345
+ echartWidth: {
346
+ //图标组件的宽度
347
+ default: "100%",
348
+ },
349
+ echartHeight: {
350
+ //图表组件的高度
351
+ default: "100%",
352
+ },
353
+ dateInterval: {
354
+ //显示的时间单位 如果不指定会默认根据时间最大值和最小值进行给定
355
+ type: String,
356
+ default: "", //时间间隔单位：年/月/日/时/分:year/month/day/hour/minute/second
357
+ },
358
+ startTime: {
359
+ //开始时间
360
+ type: String,
361
+ default: "",
362
+ },
363
+ endTime: {
364
+ //结束时间
365
+ type: String,
366
+ default: "",
367
+ },
368
+ maxAndMinLevel: {
369
+ //自动计算最大最小值时取值比例 算法为max =（max+min）*maxAndMinLevel ,min = (max-min)*maxAndMinLevel
370
+ type: Number,
371
+ default: 0.05,
372
+ },
373
+ moduleName: {
374
+ //模块名称用来标识当前图表的唯一性
375
+ type: String,
376
+ default: "myecharts",
377
+ },
378
+ valueDatumLine: {
379
+ //第几根线为基准值
380
+ type: Number,
381
+ default: -1,
382
+ },
383
+ yMaxAndMinkeepDecimal: {
384
+ // 自动计算y轴最大最小值时保留小数位数
385
+ type: Number,
386
+ default: 0,
387
+ },
388
+ echartsStyleObj: {
389
+ //echarts的一些基础样式设置
390
+ type: Object,
391
+ default: () => null,
392
+ },
393
+ showToolsBtn: {
394
+ //基础样式自定义按钮显示开关
395
+ type: Boolean,
396
+ default: true,
397
+ },
398
+ lineSmooth: {
399
+ //曲线类型
400
+ type: Boolean,
401
+ default: true,
402
+ },
403
+ autoCompMaxAndMin: {
404
+ //自动计算最大最小值
405
+ type: Boolean,
406
+ default: true,
407
+ },
408
+ },
409
+ created() {
410
+ let temp = localStorage.getItem(`echarts_com_${this.moduleName}`);
411
+ if (temp && temp.length > 0) {
412
+ this.echartsStyle = JSON.parse(temp);
413
+ } else {
414
+ if (this.echartsStyleObj != null) {
415
+ Object.keys(this.echartsStyleObj).forEach((key) => {
416
+ this.echartsStyle[key] = this.echartsStyleObj[key];
417
+ });
418
+ }
419
+ }
420
+ this.setBoxSize(); //设置容器的大小
421
+ if (this.formattingTime) {
422
+ if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
423
+ this.isopenTools = false;
424
+ return;
425
+ }
426
+ this.toDealSeriesData(); //处理时间
427
+ this.setAutomation(
428
+ this.echartsData.option.series,
429
+ this.echartsData.CreateChart,
430
+ this.echartsData.setAutomation
431
+ );
432
+ }
433
+ },
434
+ mounted() {
435
+ console.log(this.echartsData.option, this.ID);
436
+ if (this.formattingTime) {
437
+ if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
438
+ return;
439
+ }
440
+ }
441
+ this.echarts = require("echarts");
442
+ this.myChart = this.echarts.init(document.getElementById(this.ID));
343
443
 
344
- },
345
- itemChange() {
346
- this.setEchartsOption();
347
- localStorage.setItem(`echarts_com_${this.moduleName}`, JSON.stringify(this.echartsStyle));
444
+ this.setEchartsOption();
445
+ let _this = this;
446
+ this.myChart.on("click", function (params) {
447
+ // console.log(params);
448
+ if (_this.formattingTime) {
449
+ let tm = _this.getTimeByValue(params.value[0]);
450
+ params.tm = tm;
451
+ }
452
+ _this.$emit("echartClick", params);
453
+ //_this.echartsData.setCustomEvents.onClick.func(params);
454
+ });
455
+ // setTimeout(()=>{
456
+ // let options = this.myChart.getOption();
457
+ // let ysplitNumber = options.yAxis.splitNumber;
458
+ // let step = Math.floor((this.echartsStyle.ymax.value-this.echartsStyle.ymin.value)/ysplitNumber*100)/100;
459
+ // this.echartsStyle.ymax.step = step;
460
+ // this.echartsStyle.ymin.step = step;
348
461
 
349
- },
350
- reduceExpenditure(fun, tm = 500) {
351
- clearTimeout(this.timer);
352
- this.timer = setTimeout(() => {
353
- fun();
354
- }, tm);
355
- },
356
- colorsHandl(val) {
357
- if (val == 'add') {
358
- this.echartsStyle.colors.push("");
359
- } else {
360
- this.echartsStyle.colors.splice(this.echartsStyle.colors.length - 1, 1);
361
- }
362
- },
363
- setEchartsStyle(option) {
462
+ // },5000);
463
+ window.addEventListener("resize", () => {
464
+ //屏幕大小变化从新调整echart大小
465
+ this.myChart.resize();
466
+ });
467
+ },
468
+ methods: {
469
+ chartObj() {
470
+ return this.myChart;
471
+ },
472
+ disposeChart() {
473
+ this.myChart.dispose();
474
+ this.myChart = this.echarts.init(document.getElementById(this.ID));
475
+ },
476
+ setEchartsOption() {
477
+ if (this.formattingTime) {
478
+ this.echartsData.option = this.setEchartsStyle(this.echartsData.option); //重置样式
479
+ this.$nextTick(() => {
480
+ this.setTimeInterval(this.echartsData.CreateChart.timeInterval);
481
+ this.serFormat(
482
+ this.echartsData.setFormat,
483
+ this.echartsData.CreateChart
484
+ );
485
+ this.myChart.setOption(this.echartsData.option);
486
+ });
487
+ } else {
488
+ if (this.echartsOption != undefined) {
489
+ this.echartsOption.option = this.setEchartsStyle(
490
+ this.echartsOption.option
491
+ ); //重置样式
492
+ this.myChart.setOption(this.echartsOption.option);
493
+ }
494
+ }
495
+ },
496
+ itemChange() {
497
+ this.setEchartsOption();
498
+ localStorage.setItem(
499
+ `echarts_com_${this.moduleName}`,
500
+ JSON.stringify(this.echartsStyle)
501
+ );
502
+ },
503
+ reduceExpenditure(fun, tm = 500) {
504
+ clearTimeout(this.timer);
505
+ this.timer = setTimeout(() => {
506
+ fun();
507
+ }, tm);
508
+ },
509
+ colorsHandl(val) {
510
+ if (val == "add") {
511
+ this.echartsStyle.colors.push("");
512
+ } else {
513
+ this.echartsStyle.colors.splice(this.echartsStyle.colors.length - 1, 1);
514
+ }
515
+ },
516
+ setEchartsStyle(option) {
517
+ // option.yAxis.max = this.echartsStyle.ymax.value;
518
+ // option.yAxis.min = this.echartsStyle.ymin.value;
519
+ option.color = this.echartsStyle.colors;
520
+ //网格线设置----starts
521
+ if (!option.xAxis.minorTick) {
522
+ option.xAxis.minorTick = {};
523
+ }
524
+ if (!option.yAxis.minorTick) {
525
+ option.yAxis.minorTick = {};
526
+ }
527
+ option.xAxis.minorTick.show = this.echartsStyle.showXGridlines;
528
+ option.yAxis.minorTick.show = this.echartsStyle.showYGridlines;
529
+ if (!option.xAxis.minorSplitLine) {
530
+ option.xAxis.minorSplitLine = {};
531
+ }
532
+ if (!option.yAxis.minorSplitLine) {
533
+ option.yAxis.minorSplitLine = {};
534
+ }
535
+ option.xAxis.minorSplitLine.show = this.echartsStyle.showXGridlines;
536
+ option.yAxis.minorSplitLine.show = this.echartsStyle.showYGridlines;
537
+ option.xAxis.minorTick.splitNumber = this.echartsStyle.latticeNumber;
538
+ option.yAxis.minorTick.splitNumber = this.echartsStyle.latticeNumber;
539
+ //颜色设置
540
+ if (!option.xAxis.minorTick.lineStyle) {
541
+ option.xAxis.minorTick.lineStyle = {};
542
+ }
543
+ if (!option.yAxis.minorTick.lineStyle) {
544
+ option.yAxis.minorTick.lineStyle = {};
545
+ }
546
+ if (!option.xAxis.minorSplitLine.lineStyle) {
547
+ option.xAxis.minorSplitLine.lineStyle = {};
548
+ }
549
+ if (!option.yAxis.minorSplitLine.lineStyle) {
550
+ option.yAxis.minorSplitLine.lineStyle = {};
551
+ }
552
+ option.xAxis.minorTick.lineStyle.color = this.echartsStyle.gridlinesColor;
553
+ option.xAxis.minorTick.lineStyle.color = this.echartsStyle.gridlinesColor;
554
+ option.xAxis.minorSplitLine.lineStyle.color =
555
+ this.echartsStyle.gridlinesColor;
556
+ option.yAxis.minorSplitLine.lineStyle.color =
557
+ this.echartsStyle.gridlinesColor;
558
+ //线宽
559
+ option.xAxis.minorTick.lineStyle.width = this.echartsStyle.latticeWidth;
560
+ option.xAxis.minorTick.lineStyle.width = this.echartsStyle.latticeWidth;
561
+ option.xAxis.minorSplitLine.lineStyle.width =
562
+ this.echartsStyle.latticeWidth;
563
+ option.yAxis.minorSplitLine.lineStyle.width =
564
+ this.echartsStyle.latticeWidth;
565
+ //类型
566
+ option.xAxis.minorTick.lineStyle.type = this.echartsStyle.latticetype;
567
+ option.xAxis.minorTick.lineStyle.type = this.echartsStyle.latticetype;
568
+ option.xAxis.minorSplitLine.lineStyle.type =
569
+ this.echartsStyle.latticetype;
570
+ option.yAxis.minorSplitLine.lineStyle.type =
571
+ this.echartsStyle.latticetype;
364
572
 
365
- // option.yAxis.max = this.echartsStyle.ymax.value;
366
- // option.yAxis.min = this.echartsStyle.ymin.value;
367
- option.color = this.echartsStyle.colors;
368
- //网格线设置----starts
369
- if (!option.xAxis.minorTick) {
370
- option.xAxis.minorTick = {}
371
- }
372
- if (!option.yAxis.minorTick) {
373
- option.yAxis.minorTick = {}
374
- }
375
- option.xAxis.minorTick.show = this.echartsStyle.showXGridlines;
376
- option.yAxis.minorTick.show = this.echartsStyle.showYGridlines;
377
- if (!option.xAxis.minorSplitLine) {
378
- option.xAxis.minorSplitLine = {}
379
- }
380
- if (!option.yAxis.minorSplitLine) {
381
- option.yAxis.minorSplitLine = {}
382
- }
383
- option.xAxis.minorSplitLine.show = this.echartsStyle.showXGridlines;
384
- option.yAxis.minorSplitLine.show = this.echartsStyle.showYGridlines;
385
- option.xAxis.minorTick.splitNumber = this.echartsStyle.latticeNumber;
386
- option.yAxis.minorTick.splitNumber = this.echartsStyle.latticeNumber;
387
- //颜色设置
388
- if (!option.xAxis.minorTick.lineStyle) {
389
- option.xAxis.minorTick.lineStyle = {}
390
- }
391
- if (!option.yAxis.minorTick.lineStyle) {
392
- option.yAxis.minorTick.lineStyle = {}
393
- }
394
- if (!option.xAxis.minorSplitLine.lineStyle) {
395
- option.xAxis.minorSplitLine.lineStyle = {}
396
- }
397
- if (!option.yAxis.minorSplitLine.lineStyle) {
398
- option.yAxis.minorSplitLine.lineStyle = {}
399
- }
400
- option.xAxis.minorTick.lineStyle.color = this.echartsStyle.gridlinesColor;
401
- option.xAxis.minorTick.lineStyle.color = this.echartsStyle.gridlinesColor;
402
- option.xAxis.minorSplitLine.lineStyle.color = this.echartsStyle.gridlinesColor;
403
- option.yAxis.minorSplitLine.lineStyle.color = this.echartsStyle.gridlinesColor;
404
- //线宽
405
- option.xAxis.minorTick.lineStyle.width = this.echartsStyle.latticeWidth;
406
- option.xAxis.minorTick.lineStyle.width = this.echartsStyle.latticeWidth;
407
- option.xAxis.minorSplitLine.lineStyle.width = this.echartsStyle.latticeWidth;
408
- option.yAxis.minorSplitLine.lineStyle.width = this.echartsStyle.latticeWidth;
409
- //类型
410
- option.xAxis.minorTick.lineStyle.type = this.echartsStyle.latticetype;
411
- option.xAxis.minorTick.lineStyle.type = this.echartsStyle.latticetype;
412
- option.xAxis.minorSplitLine.lineStyle.type = this.echartsStyle.latticetype;
413
- option.yAxis.minorSplitLine.lineStyle.type = this.echartsStyle.latticetype;
573
+ //网格线设置----end
414
574
 
415
- //网格线设置----end
416
-
417
- //刻度线设置 ----start
418
- if (!option.xAxis.splitLine) {
419
- option.xAxis.splitLine = {};
420
- }
421
- option.xAxis.splitLine.show = this.echartsStyle.splitXLine;
422
- if (Array.isArray(option.yAxis)) {
423
- option.yAxis.forEach((item, index) => {
424
- if (!item.splitLine) {
425
- item.splitLine = {};
426
- }
427
- if (index == 0) {
428
- item.splitLine.show = this.echartsStyle.splitYLine;
429
- if (!item.splitLine.lineStyle) {
430
- item.splitLine.lineStyle = {};
431
- }
432
- item.splitLine.lineStyle.color = this.echartsStyle.splitLineCloor;
433
- item.splitLine.lineStyle.width = this.echartsStyle.splitLineWidth;
434
- item.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
435
- } else {
436
- item.splitLine.show = false
575
+ //刻度线设置 ----start
576
+ if (!option.xAxis.splitLine) {
577
+ option.xAxis.splitLine = {};
578
+ }
579
+ option.xAxis.splitLine.show = this.echartsStyle.splitXLine;
580
+ if (Array.isArray(option.yAxis)) {
581
+ option.yAxis.forEach((item, index) => {
582
+ if (!item.splitLine) {
583
+ item.splitLine = {};
584
+ }
585
+ if (index == 0) {
586
+ item.splitLine.show = this.echartsStyle.splitYLine;
587
+ if (!item.splitLine.lineStyle) {
588
+ item.splitLine.lineStyle = {};
437
589
  }
438
- })
439
- } else {
440
- if (!option.yAxis.splitLine) {
441
- option.yAxis.splitLine = {};
442
- }
443
-
444
- option.yAxis.splitLine.show = this.echartsStyle.splitYLine;
445
-
446
- if (!option.yAxis.splitLine.lineStyle) {
447
- option.yAxis.splitLine.lineStyle = {};
448
- }
449
- option.yAxis.splitLine.lineStyle.color = this.echartsStyle.splitLineCloor;
450
- option.yAxis.splitLine.lineStyle.width = this.echartsStyle.splitLineWidth;
451
- option.yAxis.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
452
- }
453
-
454
-
455
- if (!option.xAxis.splitLine.lineStyle) {
456
- option.xAxis.splitLine.lineStyle = {};
457
- }
458
-
459
- //颜色
460
- option.xAxis.splitLine.lineStyle.color = this.echartsStyle.splitLineCloor;
461
- //线宽
462
- option.xAxis.splitLine.lineStyle.width = this.echartsStyle.splitLineWidth;
463
- //类型
464
- option.xAxis.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
465
- //刻度线设置 ----end
466
- //name
467
- if (!option.xAxis.nameTextStyle) {
468
- option.xAxis.nameTextStyle = {}
469
- }
470
- if (!option.yAxis.nameTextStyle) {
471
- option.yAxis.nameTextStyle = {}
472
- }
473
- option.xAxis.nameTextStyle.color = this.echartsStyle.axisNamecolor;
474
- option.yAxis.nameTextStyle.color = this.echartsStyle.axisNamecolor;
475
-
476
- //坐标轴--starts
477
- if (!option.xAxis.axisLine) {
478
- option.xAxis.axisLine = {};
479
- }
480
- if (!option.yAxis.axisLine) {
481
- option.yAxis.axisLine = {};
482
- }
483
- if (!option.xAxis.axisLine.lineStyle) {
484
- option.xAxis.axisLine.lineStyle = {};
485
- }
486
- if (!option.yAxis.axisLine.lineStyle) {
487
- option.yAxis.axisLine.lineStyle = {};
488
- }
489
- //颜色
490
- option.xAxis.axisLine.lineStyle.color = this.echartsStyle.axiscolor;
491
- option.yAxis.axisLine.lineStyle.color = this.echartsStyle.axiscolor;
492
- if (!option.xAxis.axisLabel) {
493
- option.xAxis.axisLabel = {}
494
- }
495
- if (!option.yAxis.axisLabel) {
496
- option.yAxis.axisLabel = {}
497
- }
498
- if (!option.xAxis.axisLabel.textStyle) {
499
- option.xAxis.axisLabel.textStyle = {}
500
- }
501
- if (!option.yAxis.axisLabel.textStyle) {
502
- option.yAxis.axisLabel.textStyle = {}
503
- }
504
- option.xAxis.axisLabel.textStyle.color = this.echartsStyle.axisTextcolor;
505
- option.yAxis.axisLabel.textStyle.color = this.echartsStyle.axisTextcolor;
506
- option.xAxis.axisLabel.rotate = this.echartsStyle.axisRotate;
507
- //图例颜色设置
508
- if (!option.legend) {
509
- option.legend = {}
510
- }
511
- if (!option.legend.textStyle) {
512
- option.legend.textStyle = {}
513
- }
514
- option.legend.textStyle.color = this.echartsStyle.legendTextColor;
515
-
516
- //坐标轴--end
517
- return option;
518
- },
519
-
520
- keyToChineseName(val) {
521
- let name = "";
522
- switch (val) {
523
- case 'showXGridlines':
524
- name = "显示X轴网格线"
525
- break;
526
- case 'showYGridlines':
527
- name = "显示Y轴网格线"
528
- break;
529
- case 'latticeNumber':
530
- name = "网格线间隔"
531
- break;
532
- case 'latticetype':
533
- name = "网格线类型"
534
- break;
535
- case 'latticeWidth':
536
- name = "网格线宽度"
537
- break;
538
- case 'splitLineWidth':
539
- name = "刻度线宽度"
540
- break;
541
- case 'splitLinetype':
542
- name = "刻度线类型"
543
- break;
544
- case 'gridlinesColor':
545
- name = "网格线颜色"
546
- break;
547
- case 'splitYLine':
548
- name = "Y轴刻度线"
549
- break;
550
- case 'splitXLine':
551
- name = "X轴刻度线"
552
- break;
553
- case 'splitLineCloor':
554
- name = "刻度线颜色"
555
- break;
556
- case 'axiscolor':
557
- name = "坐标轴颜色"
558
- break;
559
- case 'axisTextcolor':
560
- name = "坐标轴文字颜色"
561
- break;
562
- case 'axisNamecolor':
563
- name = "坐标轴name颜色"
564
- break;
565
- case 'axisRotate':
566
- name = "x轴文字旋转"
567
- break;
568
- case 'title':
569
- name = "标题"
570
- break;
571
- case 'grid':
572
- name = "图表边距"
573
- break;
574
- case 'legend':
575
- name = "图例"
576
- break;
577
- case 'ymax':
578
- name = "y轴最大值"
579
- break;
580
- case 'ymin':
581
- name = "y轴最小值"
582
- break;
583
- case 'colors':
584
- name = "色系"
585
- break;
586
- case 'legendTextColor':
587
- name = "图例文字"
588
- break;
589
- }
590
- return name;
591
- },
592
- getBtmAndEtm() {
593
- let startDate = "";
594
- let endDate = "";
595
- if (this.startTime == "" || this.endTime == "") {
596
- startDate = this.seriesData[0].data[0][0];
597
- endDate = this.seriesData[0].data[this.seriesData[0].data.length - 1][0];
598
- } else {
599
- startDate = this.startTime;
600
- endDate = this.endTime;
601
- }
602
- return {
603
- startDate,
604
- endDate
605
- }
606
- },
607
- getTempInterval(startDate, endDate) {
608
- let tempInterval = "";
609
- if (this.dateInterval == "") {
610
- let timeDiff = new Date(endDate).getTime() - new Date(startDate).getTime();
611
- if (timeDiff > 3600 * 1000 * 24 * 365 * 5) {
612
- tempInterval = "year"
613
- } else if (timeDiff > 3600 * 1000 * 24 * 30 * 5) {
614
- tempInterval = "month"
615
- } else if (timeDiff > 3600 * 1000 * 24 * 5) {
616
- tempInterval = "day"
617
- } else if (timeDiff > 3600 * 1000) {
618
- tempInterval = "hour"
619
- } else if (timeDiff > 60 * 1000) {
620
- tempInterval = "minute"
621
- } else if (timeDiff > 60 * 1000) {
622
- tempInterval = "second"
623
- }
624
- } else {
625
- tempInterval = this.dateInterval;
626
- }
627
- return tempInterval;
628
- },
629
- toDealSeriesData() {
630
- if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
631
- return;
632
- }
633
- this.echartsData = getJson();
590
+ item.splitLine.lineStyle.color = this.echartsStyle.splitLineCloor;
591
+ item.splitLine.lineStyle.width = this.echartsStyle.splitLineWidth;
592
+ item.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
593
+ } else {
594
+ item.splitLine.show = false;
595
+ }
596
+ });
597
+ } else {
598
+ if (!option.yAxis.splitLine) {
599
+ option.yAxis.splitLine = {};
600
+ }
634
601
 
635
- if (this.echartsOption != undefined) {
636
- Object.keys(this.echartsOption.option).forEach((key) => {
637
- if (key == 'xAxis') {
638
- this.echartsData.option[key].type = 'value'
639
- }
640
- this.echartsData.option[key] = this.echartsOption.option[key];
641
- });
642
- }
602
+ option.yAxis.splitLine.show = this.echartsStyle.splitYLine;
643
603
 
644
- let myseries = [];
645
- let {startDate, endDate} = this.getBtmAndEtm();
646
- this.echartsData.CreateChart.startTime = startDate;
647
- this.echartsData.CreateChart.endTime = endDate;
648
- for (let i = 0; i < this.seriesData.length; i++) {
649
- let serArrItem = [];
650
- let tempInterval = this.getTempInterval(startDate, endDate);
651
- this.echartsData.CreateChart.timeInterval = tempInterval;
652
- let indata = this.seriesData[i].data;
604
+ if (!option.yAxis.splitLine.lineStyle) {
605
+ option.yAxis.splitLine.lineStyle = {};
606
+ }
607
+ option.yAxis.splitLine.lineStyle.color =
608
+ this.echartsStyle.splitLineCloor;
609
+ option.yAxis.splitLine.lineStyle.width =
610
+ this.echartsStyle.splitLineWidth;
611
+ option.yAxis.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
612
+ }
653
613
 
614
+ if (!option.xAxis.splitLine.lineStyle) {
615
+ option.xAxis.splitLine.lineStyle = {};
616
+ }
654
617
 
655
- for (let j = 0; j < indata.length; j++) {
656
- console.log(this.startTime, " this.startTime");
657
- let y1 = new Date(startDate).getTime();
658
- let y2 = new Date(indata[j][0]).getTime();
618
+ //颜色
619
+ option.xAxis.splitLine.lineStyle.color = this.echartsStyle.splitLineCloor;
620
+ //线宽
621
+ option.xAxis.splitLine.lineStyle.width = this.echartsStyle.splitLineWidth;
622
+ //类型
623
+ option.xAxis.splitLine.lineStyle.type = this.echartsStyle.splitLinetype;
624
+ //刻度线设置 ----end
625
+ //name
626
+ if (!option.xAxis.nameTextStyle) {
627
+ option.xAxis.nameTextStyle = {};
628
+ }
629
+ if (!option.yAxis.nameTextStyle) {
630
+ option.yAxis.nameTextStyle = {};
631
+ }
632
+ option.xAxis.nameTextStyle.color = this.echartsStyle.axisNamecolor;
633
+ option.yAxis.nameTextStyle.color = this.echartsStyle.axisNamecolor;
659
634
 
660
- if (tempInterval == "year") {
661
- serArrItem.push([Math.floor((y2 - y1) / (3600 * 1000 * 24 * 365)), indata[j][1]]);
662
- } else if (tempInterval == "month") {
663
- serArrItem.push([Math.floor((y2 - y1) / (3600 * 1000 * 24 * 30)), indata[j][1]]);
664
- } else if (tempInterval == "day") {
665
- serArrItem.push([Math.floor((y2 - y1) / (3600 * 1000 * 24)), indata[j][1]]);
666
- } else if (tempInterval == "hour") {
667
- serArrItem.push([Math.floor((y2 - y1) / (3600 * 1000)), indata[j][1]]);
668
- } else if (tempInterval == "minute") {
669
- serArrItem.push([Math.floor((y2 - y1) / (60 * 1000)), indata[j][1]]);
670
- } else if (tempInterval == "second") {
671
- serArrItem.push([Math.floor((y2 - y1) / (1000)), indata[j][1]]);
672
- }
673
- }
635
+ //坐标轴--starts
636
+ if (!option.xAxis.axisLine) {
637
+ option.xAxis.axisLine = {};
638
+ }
639
+ if (!option.yAxis.axisLine) {
640
+ option.yAxis.axisLine = {};
641
+ }
642
+ if (!option.xAxis.axisLine.lineStyle) {
643
+ option.xAxis.axisLine.lineStyle = {};
644
+ }
645
+ if (!option.yAxis.axisLine.lineStyle) {
646
+ option.yAxis.axisLine.lineStyle = {};
647
+ }
648
+ //颜色
649
+ option.xAxis.axisLine.lineStyle.color = this.echartsStyle.axiscolor;
650
+ option.yAxis.axisLine.lineStyle.color = this.echartsStyle.axiscolor;
651
+ if (!option.xAxis.axisLabel) {
652
+ option.xAxis.axisLabel = {};
653
+ }
654
+ if (!option.yAxis.axisLabel) {
655
+ option.yAxis.axisLabel = {};
656
+ }
657
+ if (!option.xAxis.axisLabel.textStyle) {
658
+ option.xAxis.axisLabel.textStyle = {};
659
+ }
660
+ if (!option.yAxis.axisLabel.textStyle) {
661
+ option.yAxis.axisLabel.textStyle = {};
662
+ }
663
+ option.xAxis.axisLabel.textStyle.color = this.echartsStyle.axisTextcolor;
664
+ option.yAxis.axisLabel.textStyle.color = this.echartsStyle.axisTextcolor;
665
+ option.xAxis.axisLabel.rotate = this.echartsStyle.axisRotate;
666
+ //图例颜色设置
667
+ if (!option.legend) {
668
+ option.legend = {};
669
+ }
670
+ if (!option.legend.textStyle) {
671
+ option.legend.textStyle = {};
672
+ }
673
+ option.legend.textStyle.color = this.echartsStyle.legendTextColor;
674
674
 
675
- myseries.push({
676
- data: serArrItem,
677
- name: this.seriesData[i].name, //曲线名
678
- smooth: this.lineSmooth,
679
- // symbolSize: 5, //标记大小
680
- type: "line",
681
- });
675
+ //坐标轴--end
676
+ return option;
677
+ },
682
678
 
683
- }
679
+ keyToChineseName(val) {
680
+ let name = "";
681
+ switch (val) {
682
+ case "showXGridlines":
683
+ name = "显示X轴网格线";
684
+ break;
685
+ case "showYGridlines":
686
+ name = "显示Y轴网格线";
687
+ break;
688
+ case "latticeNumber":
689
+ name = "网格线间隔";
690
+ break;
691
+ case "latticetype":
692
+ name = "网格线类型";
693
+ break;
694
+ case "latticeWidth":
695
+ name = "网格线宽度";
696
+ break;
697
+ case "splitLineWidth":
698
+ name = "刻度线宽度";
699
+ break;
700
+ case "splitLinetype":
701
+ name = "刻度线类型";
702
+ break;
703
+ case "gridlinesColor":
704
+ name = "网格线颜色";
705
+ break;
706
+ case "splitYLine":
707
+ name = "Y轴刻度线";
708
+ break;
709
+ case "splitXLine":
710
+ name = "X轴刻度线";
711
+ break;
712
+ case "splitLineCloor":
713
+ name = "刻度线颜色";
714
+ break;
715
+ case "axiscolor":
716
+ name = "坐标轴颜色";
717
+ break;
718
+ case "axisTextcolor":
719
+ name = "坐标轴文字颜色";
720
+ break;
721
+ case "axisNamecolor":
722
+ name = "坐标轴name颜色";
723
+ break;
724
+ case "axisRotate":
725
+ name = "x轴文字旋转";
726
+ break;
727
+ case "title":
728
+ name = "标题";
729
+ break;
730
+ case "grid":
731
+ name = "图表边距";
732
+ break;
733
+ case "legend":
734
+ name = "图例";
735
+ break;
736
+ case "ymax":
737
+ name = "y轴最大值";
738
+ break;
739
+ case "ymin":
740
+ name = "y轴最小值";
741
+ break;
742
+ case "colors":
743
+ name = "色系";
744
+ break;
745
+ case "legendTextColor":
746
+ name = "图例文字";
747
+ break;
748
+ }
749
+ return name;
750
+ },
751
+ getBtmAndEtm() {
752
+ let startDate = "";
753
+ let endDate = "";
754
+ if (this.startTime == "" || this.endTime == "") {
755
+ startDate = this.seriesData[0].data[0][0];
756
+ endDate =
757
+ this.seriesData[0].data[this.seriesData[0].data.length - 1][0];
758
+ } else {
759
+ startDate = this.startTime;
760
+ endDate = this.endTime;
761
+ }
762
+ return {
763
+ startDate,
764
+ endDate,
765
+ };
766
+ },
767
+ getTempInterval(startDate, endDate) {
768
+ let tempInterval = "";
769
+ if (this.dateInterval == "") {
770
+ let timeDiff =
771
+ new Date(endDate).getTime() - new Date(startDate).getTime();
772
+ if (timeDiff > 3600 * 1000 * 24 * 365 * 5) {
773
+ tempInterval = "year";
774
+ } else if (timeDiff > 3600 * 1000 * 24 * 30 * 5) {
775
+ tempInterval = "month";
776
+ } else if (timeDiff > 3600 * 1000 * 24 * 5) {
777
+ tempInterval = "day";
778
+ } else if (timeDiff > 3600 * 1000) {
779
+ tempInterval = "hour";
780
+ } else if (timeDiff > 60 * 1000) {
781
+ tempInterval = "minute";
782
+ } else if (timeDiff > 60 * 1000) {
783
+ tempInterval = "second";
784
+ }
785
+ } else {
786
+ tempInterval = this.dateInterval;
787
+ }
788
+ return tempInterval;
789
+ },
790
+ toDealSeriesData() {
791
+ if (this.seriesData.length == 0 || this.seriesData[0].data.length == 0) {
792
+ return;
793
+ }
794
+ this.echartsData = getJson();
684
795
 
685
- //最大值最小值处理
686
- if (this.autoCompMaxAndMin) {
687
- delete this.echartsData.option.yAxis.min;
688
- delete this.echartsData.option.yAxis.max;
689
- let datumLine = this.valueDatumLine;
690
- datumLine = datumLine == -1 || this.seriesData[datumLine] == undefined || this.seriesData[datumLine].data.length == 0 ? 0 : datumLine;
691
- if (this.seriesData[datumLine].data.length > 0) {
692
- let yminValue = this.seriesData[datumLine].data[0][1];
693
- let ymaxValue = this.seriesData[datumLine].data[0][1];
694
- for (let i = 0; i < this.seriesData[datumLine].data.length; i++) {
695
- if (yminValue > this.seriesData[datumLine].data[i][1]) {
696
- yminValue = this.seriesData[datumLine].data[i][1];
697
- }
698
- if (ymaxValue < this.seriesData[datumLine].data[i][1]) {
699
- ymaxValue = this.seriesData[datumLine].data[i][1];
700
- }
701
- }
702
- let sub = ymaxValue - yminValue;
703
- ymaxValue = ymaxValue - 0;
704
- yminValue = yminValue - 0;
796
+ if (this.echartsOption != undefined) {
797
+ Object.keys(this.echartsOption.option).forEach((key) => {
798
+ if (key == "xAxis") {
799
+ this.echartsData.option[key].type = "value";
800
+ }
801
+ this.echartsData.option[key] = this.echartsOption.option[key];
802
+ });
803
+ }
705
804
 
706
- ymaxValue = Math.ceil((ymaxValue + sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
707
- yminValue = Math.floor((yminValue - sub * this.maxAndMinLevel) * Math.pow(10, this.yMaxAndMinkeepDecimal)) / Math.pow(10, this.yMaxAndMinkeepDecimal);
805
+ let myseries = [];
806
+ let { startDate, endDate } = this.getBtmAndEtm();
807
+ this.echartsData.CreateChart.startTime = startDate;
808
+ this.echartsData.CreateChart.endTime = endDate;
809
+ for (let i = 0; i < this.seriesData.length; i++) {
810
+ let serArrItem = [];
811
+ let tempInterval = this.getTempInterval(startDate, endDate);
812
+ this.echartsData.CreateChart.timeInterval = tempInterval;
813
+ let indata = this.seriesData[i].data;
708
814
 
709
- this.echartsData.option.yAxis.min = yminValue;//(yminValue-sub)*this.maxAndMinLevel;
710
- this.echartsData.option.yAxis.max = ymaxValue;//(ymaxValue+sub)*this.maxAndMinLevel;
711
- }
712
- }
815
+ for (let j = 0; j < indata.length; j++) {
816
+ let y1 = new Date(startDate).getTime();
817
+ let y2 = new Date(indata[j][0]).getTime();
713
818
 
714
- //将处理好的数据设置到配置项当中
715
- this.echartsData.option.xAxis.type = "value";
819
+ if (tempInterval == "year") {
820
+ serArrItem.push([
821
+ Math.floor((y2 - y1) / (3600 * 1000 * 24 * 365)),
822
+ indata[j][1],
823
+ ]);
824
+ } else if (tempInterval == "month") {
825
+ serArrItem.push([
826
+ Math.floor((y2 - y1) / (3600 * 1000 * 24 * 30)),
827
+ indata[j][1],
828
+ ]);
829
+ } else if (tempInterval == "day") {
830
+ serArrItem.push([
831
+ Math.floor((y2 - y1) / (3600 * 1000 * 24)),
832
+ indata[j][1],
833
+ ]);
834
+ } else if (tempInterval == "hour") {
835
+ serArrItem.push([
836
+ Math.floor((y2 - y1) / (3600 * 1000)),
837
+ indata[j][1],
838
+ ]);
839
+ } else if (tempInterval == "minute") {
840
+ serArrItem.push([
841
+ Math.floor((y2 - y1) / (60 * 1000)),
842
+ indata[j][1],
843
+ ]);
844
+ } else if (tempInterval == "second") {
845
+ serArrItem.push([Math.floor((y2 - y1) / 1000), indata[j][1]]);
846
+ }
847
+ }
716
848
 
717
- for (let i = 0; i < myseries.length; i++) {
718
- if (this.echartsData.option.series[i] && this.echartsData.option.series[i].data) {
719
- this.echartsData.option.series[i].data = myseries[i].data;
720
- } else {
721
- this.echartsData.option.series[i] = {
722
- data: myseries[i].data,
723
- name: myseries[i].name,
724
- type: 'line',
725
- smooth: myseries[i].smooth
726
- }
727
- this.echartsData.option.legend.data[i] = myseries[i].name;
728
- }
729
- }
730
- // this.echartsData.option.xAxis.type="value";
731
- // for(let i=0;i<this.echartsData.option.series.length;i++){
732
- // if(myseries.length-1>=i){
849
+ myseries.push({
850
+ data: serArrItem,
851
+ name: this.seriesData[i].name, //曲线名
852
+ smooth: this.lineSmooth,
853
+ // symbolSize: 5, //标记大小
854
+ type: "line",
855
+ });
856
+ }
733
857
 
734
- // this.echartsData.option.series[i].data= myseries[i].data;
735
- // }
736
- // }
737
-
738
- },
739
- getTimeByValue(val) { //根据转换的value 逆推出时间
740
- let {startDate, endDate} = this.getBtmAndEtm();
741
- let tempInterval = this.getTempInterval(startDate, endDate);
742
- console.log(startDate, "开始时间");
743
- let y1 = new Date(startDate).getTime();
744
- if (tempInterval == "year") {
745
- val = y1 + val * 3600 * 1000 * 24 * 365;
746
- } else if (tempInterval == "month") {
747
- val = y1 + val * 3600 * 1000 * 24 * 30;
748
- } else if (tempInterval == "day") {
749
- val = y1 + val * 3600 * 1000 * 24;
750
- } else if (tempInterval == "hour") {
751
- val = y1 + val * 3600 * 1000;
752
- } else if (tempInterval == "minute") {
753
- val = y1 + val * 60 * 1000;
754
- } else if (tempInterval == "second") {
755
- val = y1 + val * 1000;
756
-
757
- }
758
- return this.$moment(val).format('YYYY-MM-DD HH:mm:ss');
759
- },
760
-
761
- setBoxSize() {
762
- if (typeof (this.echartWidth) == 'string' && this.echartWidth.indexOf("%") != -1 && typeof (this.echartHeight) == 'string' && this.echartHeight.indexOf("%") != -1) {
763
- this.echartStyle = `height:${this.echartHeight};width: ${this.echartWidth}`;
764
- } else if (typeof (this.echartHeight) == 'string' && this.echartHeight.indexOf("%") != -1) {
765
- this.echartStyle = `height:${this.echartHeight};width: ${this.echartWidth}px`;
766
- } else if (typeof (this.echartWidth) == 'string' && this.echartWidth.indexOf("%") != -1) {
767
- this.echartStyle = `height:${this.echartHeight}px;width: ${this.echartWidth}`;
768
- } else {
769
- this.echartStyle = `height:${this.echartHeight}px;width: ${this.echartWidth}px`;
770
- }
771
- },
772
- //设置拖拽事件
773
- setOnDrag(msg) {
858
+ //最大值最小值处理
859
+ if (this.autoCompMaxAndMin) {
860
+ delete this.echartsData.option.yAxis.min;
861
+ delete this.echartsData.option.yAxis.max;
862
+ let datumLine = this.valueDatumLine;
863
+ datumLine =
864
+ datumLine == -1 ||
865
+ this.seriesData[datumLine] == undefined ||
866
+ this.seriesData[datumLine].data.length == 0
867
+ ? 0
868
+ : datumLine;
869
+ if (this.seriesData[datumLine].data.length > 0) {
870
+ let yminValue = this.seriesData[datumLine].data[0][1];
871
+ let ymaxValue = this.seriesData[datumLine].data[0][1];
872
+ for (let i = 0; i < this.seriesData[datumLine].data.length; i++) {
873
+ if (yminValue > this.seriesData[datumLine].data[i][1]) {
874
+ yminValue = this.seriesData[datumLine].data[i][1];
875
+ }
876
+ if (ymaxValue < this.seriesData[datumLine].data[i][1]) {
877
+ ymaxValue = this.seriesData[datumLine].data[i][1];
878
+ }
879
+ }
880
+ let sub = ymaxValue - yminValue;
881
+ ymaxValue = ymaxValue - 0;
882
+ yminValue = yminValue - 0;
774
883
 
775
- var echarts = require('echarts');
776
- var myChart = echarts.init(document.getElementById(this.ID));
777
- let echartsDatas = this.echartsData.option.series;
778
- var data = [],
779
- lengthData = [];
780
- for (let i = 0; i < echartsDatas.length; i++) {
781
- // console.log(echartsDatas.length, i)
782
- for (let j of msg) {
783
- if (i === j) {
784
- // console.log(i,j)
785
- lengthData.push(echartsDatas[i].data.length)
786
- for (const k of echartsDatas[i].data) {
787
- data.push(k);
788
- }
789
- }
884
+ ymaxValue =
885
+ Math.ceil(
886
+ (ymaxValue + sub * this.maxAndMinLevel) *
887
+ Math.pow(10, this.yMaxAndMinkeepDecimal)
888
+ ) / Math.pow(10, this.yMaxAndMinkeepDecimal);
889
+ yminValue =
890
+ Math.floor(
891
+ (yminValue - sub * this.maxAndMinLevel) *
892
+ Math.pow(10, this.yMaxAndMinkeepDecimal)
893
+ ) / Math.pow(10, this.yMaxAndMinkeepDecimal);
790
894
 
791
- }
895
+ this.echartsData.option.yAxis.min = yminValue; //(yminValue-sub)*this.maxAndMinLevel;
896
+ this.echartsData.option.yAxis.max = ymaxValue; //(ymaxValue+sub)*this.maxAndMinLevel;
897
+ }
898
+ }
792
899
 
793
- }
794
- // console.log(data)
795
- // Add shadow circles (which is not visible) to enable drag.
900
+ //将处理好的数据设置到配置项当中
901
+ this.echartsData.option.xAxis.type = "value";
796
902
 
797
- myChart.setOption({
798
- graphic: echarts.util.map(data, function (item, dataIndex) {
799
- // console.log(item)
800
- return {
801
- type: 'circle',
802
- position: myChart.convertToPixel('grid', item),
803
- shape: {
804
- cx: 0,
805
- cy: 0,
806
- r: 40 / 2
807
- },
808
- invisible: true,
809
- draggable: true,
810
- ondrag: echarts.util.curry(onPointDragging, dataIndex, echartsDatas, data, item[0]),
811
- onmousemove: echarts.util.curry(showTooltip, dataIndex),
812
- onmouseout: echarts.util.curry(hideTooltip, dataIndex),
813
- z: 100
814
- };
815
- })
816
- });
817
- window.addEventListener('resize', updatePosition(data));
818
- myChart.on('dataZoom', updatePosition(data));
903
+ for (let i = 0; i < myseries.length; i++) {
904
+ if (
905
+ this.echartsData.option.series[i] &&
906
+ this.echartsData.option.series[i].data
907
+ ) {
908
+ this.echartsData.option.series[i].data = myseries[i].data;
909
+ } else {
910
+ this.echartsData.option.series[i] = {
911
+ data: myseries[i].data,
912
+ name: myseries[i].name,
913
+ type: "line",
914
+ smooth: myseries[i].smooth,
915
+ };
916
+ this.echartsData.option.legend.data[i] = myseries[i].name;
917
+ }
918
+ }
919
+ // this.echartsData.option.xAxis.type="value";
920
+ // for(let i=0;i<this.echartsData.option.series.length;i++){
921
+ // if(myseries.length-1>=i){
819
922
 
820
- function updatePosition(data) {
821
- myChart.setOption({
822
- graphic: echarts.util.map(data, function (item, dataIndex) {
823
- return {
824
- position: myChart.convertToPixel('grid', item)
825
- };
826
- })
827
- });
828
- }
923
+ // this.echartsData.option.series[i].data= myseries[i].data;
924
+ // }
925
+ // }
926
+ },
927
+ getTimeByValue(val) {
928
+ //根据转换的value 逆推出时间
929
+ let { startDate, endDate } = this.getBtmAndEtm();
930
+ let tempInterval = this.getTempInterval(startDate, endDate);
931
+ console.log(startDate, "开始时间");
932
+ let y1 = new Date(startDate).getTime();
933
+ if (tempInterval == "year") {
934
+ val = y1 + val * 3600 * 1000 * 24 * 365;
935
+ } else if (tempInterval == "month") {
936
+ val = y1 + val * 3600 * 1000 * 24 * 30;
937
+ } else if (tempInterval == "day") {
938
+ val = y1 + val * 3600 * 1000 * 24;
939
+ } else if (tempInterval == "hour") {
940
+ val = y1 + val * 3600 * 1000;
941
+ } else if (tempInterval == "minute") {
942
+ val = y1 + val * 60 * 1000;
943
+ } else if (tempInterval == "second") {
944
+ val = y1 + val * 1000;
945
+ }
946
+ return this.$moment(val).format("YYYY-MM-DD HH:mm:ss");
947
+ },
829
948
 
830
- function showTooltip(dataIndex) {
831
- myChart.dispatchAction({
832
- type: 'showTip',
833
- seriesIndex: 0,
834
- dataIndex: dataIndex
835
- });
836
- }
949
+ setBoxSize() {
950
+ if (
951
+ typeof this.echartWidth == "string" &&
952
+ this.echartWidth.indexOf("%") != -1 &&
953
+ typeof this.echartHeight == "string" &&
954
+ this.echartHeight.indexOf("%") != -1
955
+ ) {
956
+ this.echartStyle = `height:${this.echartHeight};width: ${this.echartWidth}`;
957
+ } else if (
958
+ typeof this.echartHeight == "string" &&
959
+ this.echartHeight.indexOf("%") != -1
960
+ ) {
961
+ this.echartStyle = `height:${this.echartHeight};width: ${this.echartWidth}px`;
962
+ } else if (
963
+ typeof this.echartWidth == "string" &&
964
+ this.echartWidth.indexOf("%") != -1
965
+ ) {
966
+ this.echartStyle = `height:${this.echartHeight}px;width: ${this.echartWidth}`;
967
+ } else {
968
+ this.echartStyle = `height:${this.echartHeight}px;width: ${this.echartWidth}px`;
969
+ }
970
+ },
971
+ //设置拖拽事件
972
+ setOnDrag(msg) {
973
+ var echarts = require("echarts");
974
+ var myChart = echarts.init(document.getElementById(this.ID));
975
+ let echartsDatas = this.echartsData.option.series;
976
+ var data = [],
977
+ lengthData = [];
978
+ for (let i = 0; i < echartsDatas.length; i++) {
979
+ // console.log(echartsDatas.length, i)
980
+ for (let j of msg) {
981
+ if (i === j) {
982
+ // console.log(i,j)
983
+ lengthData.push(echartsDatas[i].data.length);
984
+ for (const k of echartsDatas[i].data) {
985
+ data.push(k);
986
+ }
987
+ }
988
+ }
989
+ }
990
+ // console.log(data)
991
+ // Add shadow circles (which is not visible) to enable drag.
837
992
 
838
- function hideTooltip(dataIndex) {
839
- myChart.dispatchAction({
840
- type: 'hideTip'
841
- });
842
- }
993
+ myChart.setOption({
994
+ graphic: echarts.util.map(data, function (item, dataIndex) {
995
+ // console.log(item)
996
+ return {
997
+ type: "circle",
998
+ position: myChart.convertToPixel("grid", item),
999
+ shape: {
1000
+ cx: 0,
1001
+ cy: 0,
1002
+ r: 40 / 2,
1003
+ },
1004
+ invisible: true,
1005
+ draggable: true,
1006
+ ondrag: echarts.util.curry(
1007
+ onPointDragging,
1008
+ dataIndex,
1009
+ echartsDatas,
1010
+ data,
1011
+ item[0]
1012
+ ),
1013
+ onmousemove: echarts.util.curry(showTooltip, dataIndex),
1014
+ onmouseout: echarts.util.curry(hideTooltip, dataIndex),
1015
+ z: 100,
1016
+ };
1017
+ }),
1018
+ });
1019
+ window.addEventListener("resize", updatePosition(data));
1020
+ myChart.on("dataZoom", updatePosition(data));
843
1021
 
844
- var _this = this;
1022
+ function updatePosition(data) {
1023
+ myChart.setOption({
1024
+ graphic: echarts.util.map(data, function (item, dataIndex) {
1025
+ return {
1026
+ position: myChart.convertToPixel("grid", item),
1027
+ };
1028
+ }),
1029
+ });
1030
+ }
845
1031
 
846
- // console.log(i.id)
847
- function onPointDragging(dataIndex, echartsDatas, data, item) {
848
- data[dataIndex] = myChart.convertFromPixel('grid', this.position);
849
- data[dataIndex] = [item, data[dataIndex][1]];
850
- let temp = 0,
851
- index = 0,
852
- tempData = [],
853
- isTemp = true,
854
- isAddDataIndex = true,
855
- isIndex = true;
856
- //记录dataIndex
857
- for (const i of _this.dataIndex) {
858
- if (i === dataIndex) {
859
- isAddDataIndex = false;
860
- break;
861
- }
862
- }
863
- for (let i = 0; i < lengthData.length; i++) {
864
- temp += lengthData[i];
865
- if (dataIndex < temp) {
866
- for (let j of _this.editAry) {
867
- if (echartsDatas[msg[i]].id === j.id) {
868
- isIndex = false;
869
- let isPush = true;
870
- for (const k of j.num) {
871
- if (k === dataIndex - (temp - lengthData[i])) {
872
- isPush = false;
873
- break;
874
- }
875
- }
876
- if (isPush)
877
- j.num.push(dataIndex - (temp - lengthData[i]));
878
- break;
879
- }
880
- }
881
- if (isIndex) {
882
- _this.editAry.push({
883
- id: echartsDatas[msg[i]].id,
884
- num: []
885
- })
886
- }
1032
+ function showTooltip(dataIndex) {
1033
+ myChart.dispatchAction({
1034
+ type: "showTip",
1035
+ seriesIndex: 0,
1036
+ dataIndex: dataIndex,
1037
+ });
1038
+ }
887
1039
 
888
- // console.log(_this.editAry, "ssssssss")
889
- break;
890
- }
891
- }
1040
+ function hideTooltip(dataIndex) {
1041
+ myChart.dispatchAction({
1042
+ type: "hideTip",
1043
+ });
1044
+ }
892
1045
 
893
- temp = 0;
894
- for (let i = 0; i < lengthData.length; i++) {
895
- temp += lengthData[i];
896
- if (dataIndex < temp) {
897
- // console.log(dataIndex,temp,i)
898
- tempData = data.slice(temp - lengthData[i], temp)
899
- index = msg[i];
900
- // console.log(index)
901
- break;
902
- }
903
- }
904
- for (const i of _this.idArray) {
905
- if (i === echartsDatas[index].id) {
906
- isTemp = false;
907
- break;
908
- }
909
- }
910
- if (isAddDataIndex)
911
- _this.dataIndex.push(dataIndex);
912
- if (isTemp)
913
- _this.idArray.push(echartsDatas[index]["id"])
914
- echartsDatas[index]["data"] = tempData;
915
- // console.log(echartsDatas, _this.idArray);
916
- let emitData = [];
917
- for (const i of _this.idArray) {
918
- for (const j of echartsDatas) {
919
- if (i === j.id) {
920
- emitData.push(j);
921
- }
922
- }
923
- }
924
- _this.$emit('getEditData', {
925
- msg: _this.editAry,
926
- data: emitData
927
- }); //传递曲线修改信息
928
- updatePosition(data); //重绘拖拽点
929
- myChart.setOption({ //重绘图形
930
- series: echartsDatas
931
- });
932
- }
1046
+ var _this = this;
933
1047
 
934
- },
935
- //设置时间刻度
936
- setTimeInterval(type) {
937
- let width = this.$refs[this.ID].offsetWidth;
938
- let echartsWidth = width;
939
- let result = getTimeJson(this.echartsData.CreateChart, echartsWidth);
940
- this.echartsData.option.xAxis.interval = result.interval;
941
- this.interval = result.interval;
942
- this.timeInterval = result.intervalTime;
943
- this.countTableDateTime(this.tableData);
944
- // console.log("参数", result, result.intervalTime, result.interval)
945
- },
946
- //设置自动初始化
947
- setAutomation(series, CreateChart, setAutomation) {
948
- //默认设置X轴最大最小值
949
- this.echartsData.option.xAxis.min = 0;
950
- this.echartsData.option.xAxis.max = Math.floor(this.setXaxisMax(CreateChart.startTime, CreateChart.endTime, CreateChart.timeInterval));
951
- if (setAutomation.legendData) {
952
- //初始化option.legend.data
953
- this.echartsData.option.legend.data = [];
954
- for (const i of series) {
955
- this.echartsData.option.legend.data.push(i.name);
956
- }
957
- }
958
- if (setAutomation.xAxisName) {
959
- //初始化option.xAxis.name
960
- if (CreateChart.timeInterval === "year")
961
- this.echartsData.option.xAxis.name = "年";
962
- else if (CreateChart.timeInterval === "month")
963
- this.echartsData.option.xAxis.name = "月";
964
- else if (CreateChart.timeInterval === "day")
965
- this.echartsData.option.xAxis.name = "日";
966
- else if (CreateChart.timeInterval === "hour")
967
- this.echartsData.option.xAxis.name = "小时";
968
- else if (CreateChart.timeInterval === "minute")
969
- this.echartsData.option.xAxis.name = "分钟";
970
- else if (CreateChart.timeInterval === "second")
971
- this.echartsData.option.xAxis.name = "秒";
972
- }
973
- if (setAutomation.isOpenTable) {
974
- let dataLength = this.getTableLength(this.echartsData.CreateChart)
975
- this.tableDataHeader = [{label: "时间", prop: "time"}];
976
- let data = [];
977
- for (let i = 0; i < dataLength; i++) {
978
- data.push({})
979
- }
980
- // console.log(data);
981
- for (const i of series) {
982
- // console.log(i,"ll",i.data.length,dataLength)
983
- this.tableDataHeader.push({
984
- label: i.name,
985
- prop: i.id
986
- })
987
- let item = i.data;
988
- for (let j = 0; j < item.length; j++)
989
- // console.log(j)
990
- if (item[j][0] < dataLength) {
991
- data[item[j][0]][i.id] = item[j][1];
992
- data[item[j][0]]["time"] = item[j][0];
993
- // console.log(data[item[j][0]]["time"])
994
- }
995
- }
996
- for (let i = 0; i < data.length; i++) {
997
- // console.log(i,data.length)
998
- if (JSON.stringify(data[i]) == "{}") {
999
- data.splice(i, 1);
1000
- i--;
1001
- }
1002
- // if (!data[i].length) data.splice(i, 1)
1003
- // console.log(data[i],data[i].length);
1004
- }
1005
- //console.log(this.tableDataHeader,data)
1006
- this.tableData = data;
1007
- }
1008
- },
1048
+ // console.log(i.id)
1049
+ function onPointDragging(dataIndex, echartsDatas, data, item) {
1050
+ data[dataIndex] = myChart.convertFromPixel("grid", this.position);
1051
+ data[dataIndex] = [item, data[dataIndex][1]];
1052
+ let temp = 0,
1053
+ index = 0,
1054
+ tempData = [],
1055
+ isTemp = true,
1056
+ isAddDataIndex = true,
1057
+ isIndex = true;
1058
+ //记录dataIndex
1059
+ for (const i of _this.dataIndex) {
1060
+ if (i === dataIndex) {
1061
+ isAddDataIndex = false;
1062
+ break;
1063
+ }
1064
+ }
1065
+ for (let i = 0; i < lengthData.length; i++) {
1066
+ temp += lengthData[i];
1067
+ if (dataIndex < temp) {
1068
+ for (let j of _this.editAry) {
1069
+ if (echartsDatas[msg[i]].id === j.id) {
1070
+ isIndex = false;
1071
+ let isPush = true;
1072
+ for (const k of j.num) {
1073
+ if (k === dataIndex - (temp - lengthData[i])) {
1074
+ isPush = false;
1075
+ break;
1076
+ }
1077
+ }
1078
+ if (isPush) j.num.push(dataIndex - (temp - lengthData[i]));
1079
+ break;
1080
+ }
1081
+ }
1082
+ if (isIndex) {
1083
+ _this.editAry.push({
1084
+ id: echartsDatas[msg[i]].id,
1085
+ num: [],
1086
+ });
1087
+ }
1009
1088
 
1010
- //计算表格数据
1011
- countTableDateTime(data) {
1012
- let time = this.changeTime(this.echartsData.CreateChart.startTime);
1013
- for (let i = 0; i < data.length; i++) {
1014
- // console.log(data[i],data[i]["time"])
1015
- data[i]["time"] = this.getTooltipStr(this.echartsData.CreateChart.timeInterval, time, data[i]["time"], data[i]["time"])
1016
- // console.log(data[i]["time"])
1017
- for (const j of this.tableDataHeader)
1018
- if (data[i][j.prop] === undefined) data[i][j.prop] = ""
1019
- }
1020
- this.tableData = data;
1021
- },
1022
- //计算表格数据条数
1023
- getTableLength(data) {
1024
- let start = this.changeTime(data.startTime);
1025
- let end = this.changeTime(data.endTime);
1026
- let startTime = new Date(start);
1027
- let endTime = new Date(end);
1028
- let returnNum = 1;
1029
- if (data.timeInterval === "year") {
1030
- returnNum += endTime.getFullYear() - startTime.getFullYear();
1031
- } else if (data.timeInterval === "month") {
1032
- returnNum += (endTime.getFullYear() - startTime.getFullYear()) * 12 + (endTime.getMonth() - startTime.getMonth());
1033
- } else if (data.timeInterval === "day") {
1034
- returnNum += Math.floor((end - start) / 24 / 60 / 60 / 1000);
1035
- } else if (data.timeInterval === "hour") {
1036
- returnNum += Math.floor((end - start) / 60 / 60 / 1000);
1037
- } else if (data.timeInterval === "minute") {
1038
- returnNum += Math.floor((end - start) / 60 / 1000);
1039
- } else if (data.timeInterval === "second") {
1040
- returnNum += Math.floor((end - start) / 1000);
1041
- }
1042
- return returnNum
1043
- },
1089
+ // console.log(_this.editAry, "ssssssss")
1090
+ break;
1091
+ }
1092
+ }
1044
1093
 
1045
- //设置初始化事件
1046
- serFormat(setFormat, CreateChart) {
1047
- //组件初始化xAxis.axisLabel.formatter
1048
- if (setFormat.xAxis.type === "1") {
1049
- this.setxAxisFormat(CreateChart.timeInterval, CreateChart.startTime);
1050
- }
1051
- if (setFormat.tooltip.type === "1") {
1052
- this.setTooltipFormat(CreateChart.timeInterval, CreateChart.startTime);
1053
- }
1054
- },
1055
- //组件初始化xAxis.axisLabel.formatter
1056
- setxAxisFormat(timeInterval, startTime) {
1057
- let time = this.changeTime(startTime);
1058
- this.echartsData.option.xAxis.axisLabel.formatter = function (value, index) {
1059
- // console.log(value, index)
1060
- return this.getTimeStr(timeInterval, time, value, index)
1061
- }.bind(this)
1062
- },
1063
- //组件初始化tooltip.formatter
1064
- setTooltipFormat(timeInterval, startTime) {
1065
- let time = this.changeTime(startTime);
1066
- this.echartsData.option.tooltip.formatter = function (value, index) {
1067
- let str = this.getTooltipStr(timeInterval, time, value[0].data[0], value[0].data[0]);
1068
- for (const i of value) {
1069
- str += `<br/>${i.seriesName}:${i.data[1]}`;
1070
- }
1071
- return str
1072
- }.bind(this)
1073
- },
1074
- //设置X轴最大值
1075
- setXaxisMax(startTime, endTime, type) {
1076
- let min = this.changeTime(startTime);
1077
- let max = this.changeTime(endTime);
1078
- // console.log(min,max)
1079
- if (type === "hour") {
1080
- return (max - min) / (1000 * 60 * 60)
1081
- } else if (type === "day") {
1082
- return (max - min) / (1000 * 60 * 60 * 24)
1083
- } else if (type === "month") {
1084
- return (max - min) / (1000 * 60 * 60 * 24 * 30)
1085
- } else if (type === "year") {
1086
- return (max - min) / (1000 * 60 * 60 * 24 * 365)
1087
- } else if (type === "minute") {
1088
- return (max - min) / (1000 * 60)
1089
- } else if (type === "second") {
1090
- return (max - min) / (1000)
1091
- }
1092
- return ""
1093
- },
1094
- //获取tooltip串
1095
- getTooltipStr(type, time, value, index) {
1096
- let data = new Date(time + value * this.timeInterval * 1000);
1097
- if (type === "month" || type === "year")
1098
- data = new Date(this.changeMonthTime(this.echartsData.CreateChart.startTime, this.interval * index, type ===
1099
- "month" ? 1 : 0));
1100
- let str = "";
1101
- if (type === "second")
1102
- str =
1103
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1104
- else if (type === "minute")
1105
- str =
1106
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1107
- else if (type === "hour")
1108
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}时`;
1109
- else if (type === "day")
1110
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`;
1111
- else if (type === "month")
1112
- str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1113
- else if (type === "year")
1114
- str = `${data.getFullYear()}`;
1115
- return str
1116
- },
1117
- //获取时间串
1118
- getTimeStr(type, time, value, index) {
1119
- // console.log(index)
1120
- let data = new Date(time + value * this.timeInterval * 1000);
1121
- if (type === "month" || type === "year")
1122
- data = new Date(this.changeMonthTime(this.echartsData.CreateChart.startTime, this.interval * index, type ===
1123
- "month" ? 1 : 0));
1124
- let str = "";
1125
- if (index === 0) {
1126
- this.xAxisData = [];
1127
- this.xAxisData.push(data.getTime());
1128
- // console.log(index, data.toLocaleString())
1129
- if (type === "second")
1130
- str =
1131
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1132
- else if (type === "minute")
1133
- str =
1134
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1135
- else if (type === "hour")
1136
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}时`;
1137
- else if (type === "day")
1138
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`;
1139
- else if (type === "month")
1140
- str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1141
- else if (type === "year")
1142
- str = `${data.getFullYear()}`;
1143
- } else {
1144
- let timeDate = new Date(this.xAxisData[index - 1]);
1145
- this.xAxisData.push(data.getTime());
1146
- // console.log(index, this.xAxisData[index - 1], data.toLocaleString())
1147
- if (type === "year") {
1148
- if (!(data.getFullYear() === timeDate.getFullYear()))
1149
- str = `${data.getFullYear()}`;
1150
- } else if (type === "month") {
1151
- if (!(data.getFullYear() === timeDate.getFullYear()))
1152
- str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1153
- else if (!(data.getMonth() === timeDate.getMonth()))
1154
- str = `${data.getMonth() + 1}`;
1155
- } else if (type === "day") {
1156
- if (!(data.getFullYear() === timeDate.getFullYear()))
1157
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`;
1158
- else if (!(data.getMonth() === timeDate.getMonth()))
1159
- str = `${data.getMonth() + 1}-${data.getDate()}`;
1160
- else str = `${data.getDate()}`;
1161
- } else if (type === "hour") {
1162
- if (!(data.getFullYear() === timeDate.getFullYear()))
1163
- str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}时`;
1164
- else if (!(data.getMonth() === timeDate.getMonth()))
1165
- str = `${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}时`;
1166
- else if (!(data.getDate() === timeDate.getDate()))
1167
- str = `${data.getDate()}日${data.getHours()}时`;
1168
- else str = `${data.getHours()}时`;
1169
- } else if (type === "minute") {
1170
- if (!(data.getFullYear() === timeDate.getFullYear()))
1171
- str =
1172
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1173
- else if (!(data.getMonth() === timeDate.getMonth()))
1174
- str =
1175
- `${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1176
- else if (!(data.getDate() === timeDate.getDate()))
1177
- str =
1178
- `${data.getDate()}日${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1179
- else if (!(data.getHours() === timeDate.getHours()))
1180
- str = `${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1181
- else str = `${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}`;
1182
- } else if (type === "second") {
1183
- if (!(data.getFullYear() === timeDate.getFullYear()))
1184
- str =
1185
- `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1186
- else if (!(data.getMonth() === timeDate.getMonth()))
1187
- str =
1188
- `${data.getMonth() + 1}-${data.getDate()} ${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1189
- else if (!(data.getDate() === timeDate.getDate()))
1190
- str =
1191
- `${data.getDate()}日${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1192
- else if (!(data.getHours() === timeDate.getHours()))
1193
- str =
1194
- `${data.getHours()}:${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1195
- else if (!(data.getMinutes() === timeDate.getMinutes()))
1196
- str =
1197
- `${data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()}:${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1198
- else str = `${data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()}`;
1199
- }
1200
- }
1201
- return str
1202
- },
1203
- //时间转化
1204
- changeTime(time) {
1205
- let timeArr = time.split(" ");
1206
- let time1 = timeArr[0].split("-");
1207
- let time2 = timeArr[1].split(":");
1208
- let timeAry = time1.concat(time2);
1209
- timeAry[1] = Number(timeAry[1]) - 1;
1210
- let msgTime = new Date(...timeAry).getTime();
1211
- // console.log(timeArr,timeAry,msgTime,new Date(2018, 12, 8, 12, 0, 0).getTime())
1212
- return msgTime
1213
- },
1214
- //时间转化
1215
- changeMonthTime(time, value, index) {
1216
- let timeArr = time.split(" ");
1217
- let time1 = timeArr[0].split("-");
1218
- let time2 = timeArr[1].split(":");
1219
- let timeAry = time1.concat(time2);
1220
- timeAry[1] = Number(timeAry[1]) - 1;
1221
- timeAry[index] = Number(timeAry[index]) + value;
1222
- let msgTime = new Date(...timeAry).getTime();
1223
- // console.log(timeArr,timeAry,msgTime,new Date(2018, 12, 8, 12, 0, 0).getTime())
1224
- return msgTime
1225
- },
1226
- }
1094
+ temp = 0;
1095
+ for (let i = 0; i < lengthData.length; i++) {
1096
+ temp += lengthData[i];
1097
+ if (dataIndex < temp) {
1098
+ // console.log(dataIndex,temp,i)
1099
+ tempData = data.slice(temp - lengthData[i], temp);
1100
+ index = msg[i];
1101
+ // console.log(index)
1102
+ break;
1103
+ }
1104
+ }
1105
+ for (const i of _this.idArray) {
1106
+ if (i === echartsDatas[index].id) {
1107
+ isTemp = false;
1108
+ break;
1109
+ }
1110
+ }
1111
+ if (isAddDataIndex) _this.dataIndex.push(dataIndex);
1112
+ if (isTemp) _this.idArray.push(echartsDatas[index]["id"]);
1113
+ echartsDatas[index]["data"] = tempData;
1114
+ // console.log(echartsDatas, _this.idArray);
1115
+ let emitData = [];
1116
+ for (const i of _this.idArray) {
1117
+ for (const j of echartsDatas) {
1118
+ if (i === j.id) {
1119
+ emitData.push(j);
1120
+ }
1121
+ }
1122
+ }
1123
+ _this.$emit("getEditData", {
1124
+ msg: _this.editAry,
1125
+ data: emitData,
1126
+ }); //传递曲线修改信息
1127
+ updatePosition(data); //重绘拖拽点
1128
+ myChart.setOption({
1129
+ //重绘图形
1130
+ series: echartsDatas,
1131
+ });
1132
+ }
1133
+ },
1134
+ //设置时间刻度
1135
+ setTimeInterval(type) {
1136
+ let width = this.$refs[this.ID].offsetWidth;
1137
+ let echartsWidth = width;
1138
+ let result = getTimeJson(this.echartsData.CreateChart, echartsWidth);
1139
+ this.echartsData.option.xAxis.interval = result.interval;
1140
+ this.interval = result.interval;
1141
+ this.timeInterval = result.intervalTime;
1142
+ this.countTableDateTime(this.tableData);
1143
+ // console.log("参数", result, result.intervalTime, result.interval)
1144
+ },
1145
+ //设置自动初始化
1146
+ setAutomation(series, CreateChart, setAutomation) {
1147
+ //默认设置X轴最大最小值
1148
+ this.echartsData.option.xAxis.min = 0;
1149
+ this.echartsData.option.xAxis.max = Math.floor(
1150
+ this.setXaxisMax(
1151
+ CreateChart.startTime,
1152
+ CreateChart.endTime,
1153
+ CreateChart.timeInterval
1154
+ )
1155
+ );
1156
+ if (setAutomation.legendData) {
1157
+ //初始化option.legend.data
1158
+ this.echartsData.option.legend.data = [];
1159
+ for (const i of series) {
1160
+ this.echartsData.option.legend.data.push(i.name);
1161
+ }
1162
+ }
1163
+ if (setAutomation.xAxisName) {
1164
+ //初始化option.xAxis.name
1165
+ if (CreateChart.timeInterval === "year")
1166
+ this.echartsData.option.xAxis.name = "年";
1167
+ else if (CreateChart.timeInterval === "month")
1168
+ this.echartsData.option.xAxis.name = "月";
1169
+ else if (CreateChart.timeInterval === "day")
1170
+ this.echartsData.option.xAxis.name = "日";
1171
+ else if (CreateChart.timeInterval === "hour")
1172
+ this.echartsData.option.xAxis.name = "小时";
1173
+ else if (CreateChart.timeInterval === "minute")
1174
+ this.echartsData.option.xAxis.name = "分钟";
1175
+ else if (CreateChart.timeInterval === "second")
1176
+ this.echartsData.option.xAxis.name = "秒";
1177
+ }
1178
+ if (setAutomation.isOpenTable) {
1179
+ let dataLength = this.getTableLength(this.echartsData.CreateChart);
1180
+ this.tableDataHeader = [{ label: "时间", prop: "time" }];
1181
+ let data = [];
1182
+ for (let i = 0; i < dataLength; i++) {
1183
+ data.push({});
1184
+ }
1185
+ // console.log(data);
1186
+ for (const i of series) {
1187
+ // console.log(i,"ll",i.data.length,dataLength)
1188
+ this.tableDataHeader.push({
1189
+ label: i.name,
1190
+ prop: i.id,
1191
+ });
1192
+ let item = i.data;
1193
+ for (let j = 0; j < item.length; j++)
1194
+ // console.log(j)
1195
+ if (item[j][0] < dataLength) {
1196
+ data[item[j][0]][i.id] = item[j][1];
1197
+ data[item[j][0]]["time"] = item[j][0];
1198
+ // console.log(data[item[j][0]]["time"])
1199
+ }
1200
+ }
1201
+ for (let i = 0; i < data.length; i++) {
1202
+ // console.log(i,data.length)
1203
+ if (JSON.stringify(data[i]) == "{}") {
1204
+ data.splice(i, 1);
1205
+ i--;
1206
+ }
1207
+ // if (!data[i].length) data.splice(i, 1)
1208
+ // console.log(data[i],data[i].length);
1209
+ }
1210
+ //console.log(this.tableDataHeader,data)
1211
+ this.tableData = data;
1212
+ }
1213
+ },
1227
1214
 
1228
- }
1215
+ //计算表格数据
1216
+ countTableDateTime(data) {
1217
+ let time = this.changeTime(this.echartsData.CreateChart.startTime);
1218
+ for (let i = 0; i < data.length; i++) {
1219
+ // console.log(data[i],data[i]["time"])
1220
+ data[i]["time"] = this.getTooltipStr(
1221
+ this.echartsData.CreateChart.timeInterval,
1222
+ time,
1223
+ data[i]["time"],
1224
+ data[i]["time"]
1225
+ );
1226
+ // console.log(data[i]["time"])
1227
+ for (const j of this.tableDataHeader)
1228
+ if (data[i][j.prop] === undefined) data[i][j.prop] = "";
1229
+ }
1230
+ this.tableData = data;
1231
+ },
1232
+ //计算表格数据条数
1233
+ getTableLength(data) {
1234
+ let start = this.changeTime(data.startTime);
1235
+ let end = this.changeTime(data.endTime);
1236
+ let startTime = new Date(start);
1237
+ let endTime = new Date(end);
1238
+ let returnNum = 1;
1239
+ if (data.timeInterval === "year") {
1240
+ returnNum += endTime.getFullYear() - startTime.getFullYear();
1241
+ } else if (data.timeInterval === "month") {
1242
+ returnNum +=
1243
+ (endTime.getFullYear() - startTime.getFullYear()) * 12 +
1244
+ (endTime.getMonth() - startTime.getMonth());
1245
+ } else if (data.timeInterval === "day") {
1246
+ returnNum += Math.floor((end - start) / 24 / 60 / 60 / 1000);
1247
+ } else if (data.timeInterval === "hour") {
1248
+ returnNum += Math.floor((end - start) / 60 / 60 / 1000);
1249
+ } else if (data.timeInterval === "minute") {
1250
+ returnNum += Math.floor((end - start) / 60 / 1000);
1251
+ } else if (data.timeInterval === "second") {
1252
+ returnNum += Math.floor((end - start) / 1000);
1253
+ }
1254
+ return returnNum;
1255
+ },
1229
1256
 
1257
+ //设置初始化事件
1258
+ serFormat(setFormat, CreateChart) {
1259
+ //组件初始化xAxis.axisLabel.formatter
1260
+ if (setFormat.xAxis.type === "1") {
1261
+ this.setxAxisFormat(CreateChart.timeInterval, CreateChart.startTime);
1262
+ }
1263
+ if (setFormat.tooltip.type === "1") {
1264
+ this.setTooltipFormat(CreateChart.timeInterval, CreateChart.startTime);
1265
+ }
1266
+ },
1267
+ //组件初始化xAxis.axisLabel.formatter
1268
+ setxAxisFormat(timeInterval, startTime) {
1269
+ let time = this.changeTime(startTime);
1270
+ this.echartsData.option.xAxis.axisLabel.formatter = function (
1271
+ value,
1272
+ index
1273
+ ) {
1274
+ // console.log(value, index)
1275
+ return this.getTimeStr(timeInterval, time, value, index);
1276
+ }.bind(this);
1277
+ },
1278
+ //组件初始化tooltip.formatter
1279
+ setTooltipFormat(timeInterval, startTime) {
1280
+ let time = this.changeTime(startTime);
1281
+ this.echartsData.option.tooltip.formatter = function (value, index) {
1282
+ let str = this.getTooltipStr(
1283
+ timeInterval,
1284
+ time,
1285
+ value[0].data[0],
1286
+ value[0].data[0]
1287
+ );
1288
+ for (const i of value) {
1289
+ str += `<br/>${i.seriesName}:${i.data[1]}`;
1290
+ }
1291
+ return str;
1292
+ }.bind(this);
1293
+ },
1294
+ //设置X轴最大值
1295
+ setXaxisMax(startTime, endTime, type) {
1296
+ let min = this.changeTime(startTime);
1297
+ let max = this.changeTime(endTime);
1298
+ // console.log(min,max)
1299
+ if (type === "hour") {
1300
+ return (max - min) / (1000 * 60 * 60);
1301
+ } else if (type === "day") {
1302
+ return (max - min) / (1000 * 60 * 60 * 24);
1303
+ } else if (type === "month") {
1304
+ return (max - min) / (1000 * 60 * 60 * 24 * 30);
1305
+ } else if (type === "year") {
1306
+ return (max - min) / (1000 * 60 * 60 * 24 * 365);
1307
+ } else if (type === "minute") {
1308
+ return (max - min) / (1000 * 60);
1309
+ } else if (type === "second") {
1310
+ return (max - min) / 1000;
1311
+ }
1312
+ return "";
1313
+ },
1314
+ //获取tooltip串
1315
+ getTooltipStr(type, time, value, index) {
1316
+ let data = new Date(time + value * this.timeInterval * 1000);
1317
+ if (type === "month" || type === "year")
1318
+ data = new Date(
1319
+ this.changeMonthTime(
1320
+ this.echartsData.CreateChart.startTime,
1321
+ this.interval * index,
1322
+ type === "month" ? 1 : 0
1323
+ )
1324
+ );
1325
+ let str = "";
1326
+ if (type === "second")
1327
+ str = `${data.getFullYear()}-${
1328
+ data.getMonth() + 1
1329
+ }-${data.getDate()} ${data.getHours()}:${
1330
+ data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()
1331
+ }:${
1332
+ data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()
1333
+ }`;
1334
+ else if (type === "minute")
1335
+ str = `${data.getFullYear()}-${
1336
+ data.getMonth() + 1
1337
+ }-${data.getDate()} ${data.getHours()}:${
1338
+ data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()
1339
+ }`;
1340
+ else if (type === "hour")
1341
+ str = `${data.getFullYear()}-${
1342
+ data.getMonth() + 1
1343
+ }-${data.getDate()} ${data.getHours()}时`;
1344
+ else if (type === "day")
1345
+ str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`;
1346
+ else if (type === "month")
1347
+ str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1348
+ else if (type === "year") str = `${data.getFullYear()}`;
1349
+ return str;
1350
+ },
1351
+ //获取时间串
1352
+ getTimeStr(type, time, value, index) {
1353
+ // console.log(index)
1354
+ let data = new Date(time + value * this.timeInterval * 1000);
1355
+ if (type === "month" || type === "year")
1356
+ data = new Date(
1357
+ this.changeMonthTime(
1358
+ this.echartsData.CreateChart.startTime,
1359
+ this.interval * index,
1360
+ type === "month" ? 1 : 0
1361
+ )
1362
+ );
1363
+ let str = "";
1364
+ if (index === 0) {
1365
+ this.xAxisData = [];
1366
+ this.xAxisData.push(data.getTime());
1367
+ // console.log(index, data.toLocaleString())
1368
+ if (type === "second")
1369
+ str = `${data.getFullYear()}-${
1370
+ data.getMonth() + 1
1371
+ }-${data.getDate()} ${data.getHours()}:${
1372
+ data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()
1373
+ }:${
1374
+ data.getSeconds() > 9 ? data.getSeconds() : "0" + data.getSeconds()
1375
+ }`;
1376
+ else if (type === "minute")
1377
+ str = `${data.getFullYear()}-${
1378
+ data.getMonth() + 1
1379
+ }-${data.getDate()} ${data.getHours()}:${
1380
+ data.getMinutes() > 9 ? data.getMinutes() : "0" + data.getMinutes()
1381
+ }`;
1382
+ else if (type === "hour")
1383
+ str = `${data.getFullYear()}-${
1384
+ data.getMonth() + 1
1385
+ }-${data.getDate()} ${data.getHours()}时`;
1386
+ else if (type === "day")
1387
+ str = `${data.getFullYear()}-${
1388
+ data.getMonth() + 1
1389
+ }-${data.getDate()}`;
1390
+ else if (type === "month")
1391
+ str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1392
+ else if (type === "year") str = `${data.getFullYear()}`;
1393
+ } else {
1394
+ let timeDate = new Date(this.xAxisData[index - 1]);
1395
+ this.xAxisData.push(data.getTime());
1396
+ // console.log(index, this.xAxisData[index - 1], data.toLocaleString())
1397
+ if (type === "year") {
1398
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1399
+ str = `${data.getFullYear()}`;
1400
+ } else if (type === "month") {
1401
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1402
+ str = `${data.getFullYear()}-${data.getMonth() + 1}`;
1403
+ else if (!(data.getMonth() === timeDate.getMonth()))
1404
+ str = `${data.getMonth() + 1}`;
1405
+ } else if (type === "day") {
1406
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1407
+ str = `${data.getFullYear()}-${
1408
+ data.getMonth() + 1
1409
+ }-${data.getDate()}`;
1410
+ else if (!(data.getMonth() === timeDate.getMonth()))
1411
+ str = `${data.getMonth() + 1}-${data.getDate()}`;
1412
+ else str = `${data.getDate()}`;
1413
+ } else if (type === "hour") {
1414
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1415
+ str = `${data.getFullYear()}-${
1416
+ data.getMonth() + 1
1417
+ }-${data.getDate()} ${data.getHours()}时`;
1418
+ else if (!(data.getMonth() === timeDate.getMonth()))
1419
+ str = `${
1420
+ data.getMonth() + 1
1421
+ }-${data.getDate()} ${data.getHours()}时`;
1422
+ else if (!(data.getDate() === timeDate.getDate()))
1423
+ str = `${data.getDate()}日${data.getHours()}时`;
1424
+ else str = `${data.getHours()}时`;
1425
+ } else if (type === "minute") {
1426
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1427
+ str = `${data.getFullYear()}-${
1428
+ data.getMonth() + 1
1429
+ }-${data.getDate()} ${data.getHours()}:${
1430
+ data.getMinutes() > 9
1431
+ ? data.getMinutes()
1432
+ : "0" + data.getMinutes()
1433
+ }`;
1434
+ else if (!(data.getMonth() === timeDate.getMonth()))
1435
+ str = `${
1436
+ data.getMonth() + 1
1437
+ }-${data.getDate()} ${data.getHours()}:${
1438
+ data.getMinutes() > 9
1439
+ ? data.getMinutes()
1440
+ : "0" + data.getMinutes()
1441
+ }`;
1442
+ else if (!(data.getDate() === timeDate.getDate()))
1443
+ str = `${data.getDate()}日${data.getHours()}:${
1444
+ data.getMinutes() > 9
1445
+ ? data.getMinutes()
1446
+ : "0" + data.getMinutes()
1447
+ }`;
1448
+ else if (!(data.getHours() === timeDate.getHours()))
1449
+ str = `${data.getHours()}:${
1450
+ data.getMinutes() > 9
1451
+ ? data.getMinutes()
1452
+ : "0" + data.getMinutes()
1453
+ }`;
1454
+ else
1455
+ str = `${
1456
+ data.getMinutes() > 9
1457
+ ? data.getMinutes()
1458
+ : "0" + data.getMinutes()
1459
+ }`;
1460
+ } else if (type === "second") {
1461
+ if (!(data.getFullYear() === timeDate.getFullYear()))
1462
+ str = `${data.getFullYear()}-${
1463
+ data.getMonth() + 1
1464
+ }-${data.getDate()} ${data.getHours()}:${
1465
+ data.getMinutes() > 9
1466
+ ? data.getMinutes()
1467
+ : "0" + data.getMinutes()
1468
+ }:${
1469
+ data.getSeconds() > 9
1470
+ ? data.getSeconds()
1471
+ : "0" + data.getSeconds()
1472
+ }`;
1473
+ else if (!(data.getMonth() === timeDate.getMonth()))
1474
+ str = `${
1475
+ data.getMonth() + 1
1476
+ }-${data.getDate()} ${data.getHours()}:${
1477
+ data.getMinutes() > 9
1478
+ ? data.getMinutes()
1479
+ : "0" + data.getMinutes()
1480
+ }:${
1481
+ data.getSeconds() > 9
1482
+ ? data.getSeconds()
1483
+ : "0" + data.getSeconds()
1484
+ }`;
1485
+ else if (!(data.getDate() === timeDate.getDate()))
1486
+ str = `${data.getDate()}日${data.getHours()}:${
1487
+ data.getMinutes() > 9
1488
+ ? data.getMinutes()
1489
+ : "0" + data.getMinutes()
1490
+ }:${
1491
+ data.getSeconds() > 9
1492
+ ? data.getSeconds()
1493
+ : "0" + data.getSeconds()
1494
+ }`;
1495
+ else if (!(data.getHours() === timeDate.getHours()))
1496
+ str = `${data.getHours()}:${
1497
+ data.getMinutes() > 9
1498
+ ? data.getMinutes()
1499
+ : "0" + data.getMinutes()
1500
+ }:${
1501
+ data.getSeconds() > 9
1502
+ ? data.getSeconds()
1503
+ : "0" + data.getSeconds()
1504
+ }`;
1505
+ else if (!(data.getMinutes() === timeDate.getMinutes()))
1506
+ str = `${
1507
+ data.getMinutes() > 9
1508
+ ? data.getMinutes()
1509
+ : "0" + data.getMinutes()
1510
+ }:${
1511
+ data.getSeconds() > 9
1512
+ ? data.getSeconds()
1513
+ : "0" + data.getSeconds()
1514
+ }`;
1515
+ else
1516
+ str = `${
1517
+ data.getSeconds() > 9
1518
+ ? data.getSeconds()
1519
+ : "0" + data.getSeconds()
1520
+ }`;
1521
+ }
1522
+ }
1523
+ return str;
1524
+ },
1525
+ //时间转化
1526
+ changeTime(time) {
1527
+ let timeArr = time.split(" ");
1528
+ let time1 = timeArr[0].split("-");
1529
+ let time2 = timeArr[1].split(":");
1530
+ let timeAry = time1.concat(time2);
1531
+ timeAry[1] = Number(timeAry[1]) - 1;
1532
+ let msgTime = new Date(...timeAry).getTime();
1533
+ // console.log(timeArr,timeAry,msgTime,new Date(2018, 12, 8, 12, 0, 0).getTime())
1534
+ return msgTime;
1535
+ },
1536
+ //时间转化
1537
+ changeMonthTime(time, value, index) {
1538
+ let timeArr = time.split(" ");
1539
+ let time1 = timeArr[0].split("-");
1540
+ let time2 = timeArr[1].split(":");
1541
+ let timeAry = time1.concat(time2);
1542
+ timeAry[1] = Number(timeAry[1]) - 1;
1543
+ timeAry[index] = Number(timeAry[index]) + value;
1544
+ let msgTime = new Date(...timeAry).getTime();
1545
+ // console.log(timeArr,timeAry,msgTime,new Date(2018, 12, 8, 12, 0, 0).getTime())
1546
+ return msgTime;
1547
+ },
1548
+ },
1549
+ };
1230
1550
  </script>
1231
1551
 
1232
1552
  <style scoped>
1233
- div {
1234
- box-sizing: border-box;
1235
- }
1236
-
1237
- .eitid-icon {
1238
- right: 4px;
1239
- position: absolute;
1240
- top: 29px;
1241
- color: #514c4c;
1242
- font-size: 21px;
1243
- cursor: pointer;
1553
+ div {
1554
+ box-sizing: border-box;
1555
+ }
1244
1556
 
1245
- }
1557
+ .eitid-icon {
1558
+ right: 4px;
1559
+ position: absolute;
1560
+ top: 29px;
1561
+ color: #514c4c;
1562
+ font-size: 21px;
1563
+ cursor: pointer;
1564
+ }
1246
1565
 
1247
- .echarts-wapper .echarts-style-panle {
1248
- width: 100px;
1249
- height: 200px;
1250
- position: absolute;
1251
- left: 0px;
1252
- top: 0px;
1253
- border: 1px solid #ccc;
1254
- background: #fff;
1255
- }
1566
+ .echarts-wapper .echarts-style-panle {
1567
+ width: 100px;
1568
+ height: 200px;
1569
+ position: absolute;
1570
+ left: 0px;
1571
+ top: 0px;
1572
+ border: 1px solid #ccc;
1573
+ background: #fff;
1574
+ }
1256
1575
 
1257
- .echarts-wapper .dialog-innercont-panel {
1258
- height: 300px;
1259
- overflow-y: scroll;
1260
- }
1576
+ .echarts-wapper .dialog-innercont-panel {
1577
+ height: 300px;
1578
+ overflow-y: scroll;
1579
+ }
1261
1580
 
1262
- .echarts-wapper .echarts-title-form-item {
1263
- width: 100%;
1264
- padding-left: 45px;
1265
- }
1581
+ .echarts-wapper .echarts-title-form-item {
1582
+ width: 100%;
1583
+ padding-left: 45px;
1584
+ }
1266
1585
 
1267
- .echarts-wapper .echarts-grid-form-item {
1268
- width: 100%;
1269
- padding-left: 75px;
1270
- }
1586
+ .echarts-wapper .echarts-grid-form-item {
1587
+ width: 100%;
1588
+ padding-left: 75px;
1589
+ }
1271
1590
 
1272
- .echarts-wapper .cz-btn {
1273
- font-size: 22px;
1274
- vertical-align: 6px;
1275
- color: #e93838;
1276
- cursor: pointer;
1277
- }
1591
+ .echarts-wapper .cz-btn {
1592
+ font-size: 22px;
1593
+ vertical-align: 6px;
1594
+ color: #e93838;
1595
+ cursor: pointer;
1596
+ }
1278
1597
 
1279
- >>> .el-dialog__body {
1280
- padding: 30px 43px;
1281
- }
1598
+ >>> .el-dialog__body {
1599
+ padding: 30px 43px;
1600
+ }
1282
1601
 
1283
- .dialog-innercont-panel::-webkit-scrollbar {
1284
- display: none;
1285
- }
1602
+ .dialog-innercont-panel::-webkit-scrollbar {
1603
+ display: none;
1604
+ }
1286
1605
  </style>