Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
669c6384 by xiaomiao
Options

统计监控模块样式调整

1 parent 6ffaf546
Inline Side-by-side
Showing 5 changed files with 623 additions and 468 deletions
1 <template> 1 <template>
2 <!-- 折线图 --> 2 <!-- 折线图 -->
3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart> 3 <Echart
4 :options="options"
5 id="bottomLeftChart"
6 height="100%"
7 width="100%"
8 ></Echart>
4 </template> 9 </template>
5 10
6 <script> 11 <script>
7 import Echart from "@/common/echart"; 12 import Echart from "@/common/echart";
8 export default { 13 export default {
9 data () { 14 data() {
10 return { 15 return {
11 xAxisData: {}, 16 xAxisData: {},
12 yAxisData1: {}, 17 yAxisData1: {},
13 yAxisData2: {}, 18 yAxisData2: {},
14 yAxisData3: {}, 19 yAxisData3: {},
15 options: {}, 20 options: {},
16 }; 21 };
17 }, 22 },
18 components: { 23 components: {
19 Echart, 24 Echart,
20 }, 25 },
21 props: { 26 props: {
22 cdata: { 27 cdata: {
23 type: Object, 28 type: Object,
24 default: () => ({}), 29 default: () => ({}),
25 }
26 }, 30 },
27 methods: { 31 },
28 hexToRgba (hex, opacity) { 32 methods: {
29 let rgbaColor = ""; 33 hexToRgba(hex, opacity) {
30 let reg = /^#[\da-f]{6}$/i; 34 let rgbaColor = "";
31 if (reg.test(hex)) { 35 let reg = /^#[\da-f]{6}$/i;
32 rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( 36 if (reg.test(hex)) {
33 "0x" + hex.slice(3, 5) 37 rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
34 )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; 38 "0x" + hex.slice(3, 5)
35 } 39 )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
36 return rgbaColor; 40 }
37 } 41 return rgbaColor;
38 }, 42 },
39 watch: { 43 },
40 cdata: { 44 watch: {
41 handler (newData) { 45 cdata: {
42 this.xAxisData = newData.echartData.map(v => v.name); 46 handler(newData) {
43 this.yAxisData1 = newData.echartData.map(v => v.value1); 47 this.xAxisData = newData.echartData.map((v) => v.name);
44 this.yAxisData2 = newData.echartData.map(v => v.value2); 48 this.yAxisData1 = newData.echartData.map((v) => v.value1);
45 this.yAxisData3 = newData.echartData.map(v => v.value3); 49 this.yAxisData2 = newData.echartData.map((v) => v.value2);
46 this.options = { 50 this.yAxisData3 = newData.echartData.map((v) => v.value3);
47 color: newData.color, 51 this.options = {
48 legend: { 52 color: newData.color,
49 center: true, 53 legend: {
50 top: '20%', 54 center: true,
51 data: newData.legendItem, 55 top: "20%",
52 textStyle: { 56 data: newData.legendItem,
53 color: '#00DEFF' 57 textStyle: {
54 } 58 color: "#00DEFF",
55 }, 59 },
56 // calculable: true, 60 },
57 tooltip: { 61 // calculable: true,
58 trigger: "axis", 62 tooltip: {
59 formatter: function (params) { 63 trigger: "axis",
60 let html = ''; 64 formatter: function (params) {
61 params.forEach(v => { 65 let html = "";
62 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> 66 params.forEach((v) => {
63 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span> 67 html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
68 <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
69 newData.color[v.componentIndex]
70 };"></span>
64 ${v.seriesName}.${v.name} 71 ${v.seriesName}.${v.name}
65 <span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span> 72 <span style="color:${
73 newData.color[v.componentIndex]
74 };font-weight:700;font-size: 18px">${v.value}</span>
66 个`; 75 个`;
67 }) 76 });
68 return html 77 return html;
69 }, 78 },
70 extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;', 79 extraCssText:
71 80 "background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
72 }, 81 },
73 // grid: { 82 // grid: {
74 // top: 70, 83 // top: 70,
75 // containLabel: true 84 // containLabel: true
76 // }, 85 // },
77 grid: { 86 grid: {
78 top: "30%", 87 top: "30%",
79 left: "3%", 88 left: "3%",
80 right: "6%", 89 right: "6%",
81 bottom: "8%", 90 bottom: "8%",
82 containLabel: true, 91 containLabel: true,
83 }, 92 },
84 xAxis: [{ 93 xAxis: [
85 type: 'category', 94 {
86 axisLine: { 95 type: "category",
87 show: true, 96 axisLine: {
88 lineStyle: { 97 show: true,
89 color: "#458ACF" 98 lineStyle: {
90 } 99 color: "#458ACF",
91 }, 100 },
92 axisLabel: { 101 },
93 inside: false, 102 axisLabel: {
94 textStyle: { 103 inside: false,
95 color: 'rgba(255, 255, 255,0.7)', // x轴颜色 104 textStyle: {
96 fontWeight: 'normal', 105 color: "rgba(255, 255, 255,0.7)", // x轴颜色
97 fontSize: '12', 106 fontWeight: "normal",
98 lineHeight: 22 107 fontSize: "12",
99 } 108 lineHeight: 22,
100 }, 109 },
101 data: this.xAxisData 110 },
102 }], 111 data: this.xAxisData,
103 yAxis: [{
104 type: "value",
105 axisLabel: {
106 textStyle: {
107 color: "rgba(255, 255, 255,0.7)"
108 }
109 },
110 splitLine: {
111 show: true,
112 lineStyle: {
113 color: "#458ACF"
114 }
115 },
116 axisLine: {
117 show: true,
118 lineStyle: {
119 color: "#458ACF"
120 }
121 },
122 axisTick: {
123 show: false
124 }
125 }],
126 series: [{
127 name: newData.legendItem[0],
128 type: "line",
129 smooth: true, //是否平滑
130 showSymbol: false,
131 symbol: 'circle',
132 symbolSize: 6,
133 zlevel: 3,
134 lineStyle: {
135 normal: {
136 color: newData.color[0],
137 shadowBlur: 3,
138 shadowColor: this.hexToRgba(newData.color[0], 0.5),
139 shadowOffsetY: 0
140 }
141 },
142 data: this.yAxisData1
143 }, {
144 name: newData.legendItem[1],
145 type: "line",
146 smooth: true,
147 showSymbol: false,
148 symbol: 'circle',
149 symbolSize: 8,
150 zlevel: 3,
151 lineStyle: {
152 normal: {
153 color: newData.color[1],
154 shadowBlur: 0,
155 shadowColor: this.hexToRgba(newData.color[1], 0.5),
156 shadowOffsetY: 0
157 }
158 },
159 data: this.yAxisData2
160 },
161 {
162 name: newData.legendItem[2],
163 type: "line",
164 smooth: true,
165 showSymbol: false,
166 symbol: 'circle',
167 symbolSize: 8,
168 zlevel: 3,
169 lineStyle: {
170 normal: {
171 color: newData.color[2],
172 shadowBlur: 3,
173 shadowColor: this.hexToRgba(newData.color[2], 0.5),
174 shadowOffsetY: 0
175 }
176 },
177 data: this.yAxisData3
178 }
179 ]
180 };
181 }, 112 },
182 immediate: true, 113 ],
183 deep: true, 114 yAxis: [
184 }, 115 {
116 type: "value",
117 axisLabel: {
118 textStyle: {
119 color: "rgba(255, 255, 255,0.7)",
120 },
121 },
122 splitLine: {
123 show: true,
124 lineStyle: {
125 color: "#458ACF",
126 },
127 },
128 axisLine: {
129 show: true,
130 lineStyle: {
131 color: "#458ACF",
132 },
133 },
134 axisTick: {
135 show: false,
136 },
137 },
138 ],
139 series: [
140 {
141 name: newData.legendItem[0],
142 type: "line",
143 smooth: true, //是否平滑
144 showSymbol: false,
145 symbol: "circle",
146 symbolSize: 6,
147 zlevel: 3,
148 lineStyle: {
149 normal: {
150 color: newData.color[0],
151 shadowBlur: 3,
152 shadowColor: this.hexToRgba(newData.color[0], 0.5),
153 shadowOffsetY: 0,
154 },
155 },
156 data: this.yAxisData1,
157 },
158 {
159 name: newData.legendItem[1],
160 type: "line",
161 smooth: true,
162 showSymbol: false,
163 symbol: "circle",
164 symbolSize: 8,
165 zlevel: 3,
166 lineStyle: {
167 normal: {
168 color: newData.color[1],
169 shadowBlur: 0,
170 shadowColor: this.hexToRgba(newData.color[1], 0.5),
171 shadowOffsetY: 0,
172 },
173 },
174 data: this.yAxisData2,
175 },
176 {
177 name: newData.legendItem[2],
178 type: "line",
179 smooth: true,
180 showSymbol: false,
181 symbol: "circle",
182 symbolSize: 8,
183 zlevel: 3,
184 lineStyle: {
185 normal: {
186 color: newData.color[2],
187 shadowBlur: 3,
188 shadowColor: this.hexToRgba(newData.color[2], 0.5),
189 shadowOffsetY: 0,
190 },
191 },
192 data: this.yAxisData3,
193 },
194 ],
195 };
196 },
197 immediate: true,
198 deep: true,
185 }, 199 },
200 },
186 }; 201 };
187 </script> 202 </script>
......
...@@ -264,7 +264,10 @@ table td { ...@@ -264,7 +264,10 @@ table td {
264 display: none; 264 display: none;
265 } 265 }
266 // 时间选择框样式 266 // 时间选择框样式
267 .el-date-picker { 267 .el-date-picker{
268 .el-date-table td.disabled div{
269 background-color:#074487;
270 }
268 background-color: #031a46; 271 background-color: #031a46;
269 .el-date-picker__header-label{ 272 .el-date-picker__header-label{
270 color:#A6CFD6; 273 color:#A6CFD6;
...@@ -273,9 +276,7 @@ table td { ...@@ -273,9 +276,7 @@ table td {
273 background-color:#074487; 276 background-color:#074487;
274 .disabled{ 277 .disabled{
275 background-color:#074487; 278 background-color:#074487;
276 .el-date-table td.disabled div{ 279
277 background-color:#074487;
278 }
279 } 280 }
280 } 281 }
281 282
...@@ -301,6 +302,83 @@ table td { ...@@ -301,6 +302,83 @@ table td {
301 302
302 } 303 }
303 304
305 // 时间选择框2
306
307
308 .el-date-range-picker{
309 .el-date-range-picker__time-header > .el-icon-arrow-right{
310 color:#E3F1FF;;
311 }
312 background-color: #074487;
313 color: #fff;
314 .el-input__inner{
315 background: color #074487;
316 }
317
318 .el-input__inner{
319 background-color: #074487;
320 }
321 .el-input.is-disabled .el-input__inner{
322 background-color: #074487;
323 }
324 .el-date-range-picker__time-header{
325 background-color: #031a46;
326 }
327 .el-picker-panel__footer{
328 background-color: #031a46;
329 }
330 .el-time-panel{
331 background-color: #074487!important;
332 color: #E3F1FF;
333 }
334 .el-picker-panel__icon-btn{
335 color:#E3F1FF;
336 }
337 .el-date-table th{
338 color:#E3F1FF;
339 }
340 .el-time-spinner__item{
341 color: #E3F1FF;
342 }
343 .el-time-spinner__item.active:not(.disabled){
344 color: #fff;
345 }
346 .el-time-panel__btn{
347 color:#0F93F6;
348 }
349 .el-time-panel__btn.confirm{
350 width: 50px;
351 height: 25px;
352 line-height: 25px;
353 border-radius: 3px;
354 background-color: #fff;
355 }
356 .el-time-panel__footer{
357 background-color: #031a46;
358 }
359 .el-date-table td.in-range div{
360 background-color: #031a46;
361 }
362 .el-date-table td.start-date span, .el-date-table td.end-date span{
363 background-color: #074487;
364 // border:1px solid saddlebrown;
365 box-shadow: inset 0 0 7px #02D9FD;
366 border: 1px solid #02D9FD;
367 }
368 }
369 .el-date-editor{
370
371 .el-range-separator{
372 color: #E3F1FF;
373 }
374 .el-range-input{
375 background:none !important;
376 color: #fff;
377 }
378
379
380 }
381
304 382
305 383
306 384
......
...@@ -196,4 +196,4 @@ ...@@ -196,4 +196,4 @@
196 .btnColRight { 196 .btnColRight {
197 box-sizing: border-box; 197 box-sizing: border-box;
198 text-align: right; 198 text-align: right;
199 }
...\ No newline at end of file ...\ No newline at end of file
199 }
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px"> 5 <el-form
6 <el-row> 6 ref="form"
7 <el-col :span="8"> 7 :model="form"
8 <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至" 8 :inline="true"
9 start-placeholder="开始日期" end-placeholder="结束日期"> 9 class="from-clues-header"
10 </el-date-picker> 10 label-width="100px"
11 </el-col> 11 >
12 <!-- 按钮操作 --> 12 <el-row class="rows">
13 <el-col :span="12" class="btnColRight"> 13 <el-col :span="8">
14 <el-button type="default" @click="resetForm"> 重置 </el-button> 14 <el-date-picker
15 <el-button type="primary"> 查询 </el-button> 15 v-model="valueTime"
16 </el-col> 16 type="datetimerange"
17 </el-row> 17 range-separator="至"
18 </el-form> 18 start-placeholder="开始日期"
19 <!-- 表格 --> 19 end-placeholder="结束日期"
20 <div class="form-clues-content echarts-box"> 20 >
21 <div id="myChart" class="chart"></div> 21 </el-date-picker>
22 </div> 22 </el-col>
23 <!-- 按钮操作 -->
24 <el-col :span="12" class="btnColRight">
25 <el-button type="default" @click="resetForm"> 重置 </el-button>
26 <el-button type="primary"> 查询 </el-button>
27 </el-col>
28 </el-row>
29 </el-form>
30 <!-- 表格 -->
31 <div class="form-clues-content echarts-box">
32 <div id="myChart" class="chart"></div>
23 </div> 33 </div>
34 </div>
24 </template> 35 </template>
25 36
26 <script> 37 <script>
27 export default { 38 export default {
28 name: "jktj", 39 name: "jktj",
29 data () { 40 data() {
30 return { 41 return {
31 // 开始结束日期限制 42 // 开始结束日期限制
32 pickerOptionsStart: { 43 pickerOptionsStart: {
33 disabledDate: (time) => { 44 disabledDate: (time) => {
34 if (this.form.endTime) { 45 if (this.form.endTime) {
35 return ( 46 return time.getTime() >= new Date(this.form.endTime).getTime();
36 time.getTime() >= new Date(this.form.endTime).getTime() 47 }
37 ); 48 },
38 } 49 },
39 } 50 // 结束日期限制
40 }, 51 pickerOptionsEnd: {
41 // 结束日期限制 52 disabledDate: (time) => {
42 pickerOptionsEnd: { 53 if (this.form.startTime) {
43 disabledDate: (time) => { 54 return time.getTime() <= new Date(this.form.startTime).getTime();
44 if (this.form.startTime) { 55 }
45 return ( 56 },
46 time.getTime() <= new Date(this.form.startTime).getTime() 57 },
47 ); 58 // 搜索表单
48 } 59 valueTime: "",
49 } 60 form: {
50 }, 61 startTime: "",
51 // 搜索表单 62 endTime: "",
52 valueTime: '', 63 },
53 form: { 64 };
54 startTime: "", 65 },
55 endTime: "" 66 mounted() {
56 } 67 // 初始化图表
57 } 68 this.echartInit();
69 },
70 methods: {
71 // 重置
72 resetForm() {
73 this.form = {
74 startTime: "",
75 endTime: "",
76 };
58 }, 77 },
59 mounted () { 78 echartInit() {
60 // 初始化图表 79 // 基于准备好的dom，初始化echarts实例
61 this.echartInit(); 80 let myChart = this.$echarts.init(document.getElementById("myChart"));
81 // 绘制图表
82 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
84 title: {
85 show: true,
86 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
87 left: "center",
88 textStyle: {
89 fontSize: 30,
90 lineHeight: 30,
91 height: 60,
92 color: "#fff",
93 },
94 },
95 legend: {
96 data: [
97 "接入成功数量",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 24,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 },
110 tooltip: {
111 show: true,
112 trigger: "axis",
113 textStyle: {
114 fontSize: 22 // 字体大小
62 }, 115 },
63 methods: { 116 extraCssText: 'width:260px;height:200px;' // 背景色
64 // 重置
65 resetForm () {
66 this.form = {
67 startTime: "",
68 endTime: ""
69 }
70 }, 117 },
71 echartInit () { 118 grid: {
72 // 基于准备好的dom，初始化echarts实例 119 top: 120,
73 let myChart = this.$echarts.init(
74 document.getElementById("myChart")
75 );
76 // 绘制图表
77 myChart.setOption({
78 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
79 title: {
80 show: true,
81 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
82 left: "center",
83 textStyle: {
84 fontSize: 18,
85 lineHeight: 30,
86 height: 60,
87 color: "#777",
88 },
89 },
90 legend: {
91 data: [
92 "接入成功数量",
93 "接入失败数量",
94 "上报成功数量",
95 "上报失败数量",
96 ],
97 top: 80,
98 },
99 tooltip: {
100 show: true,
101 trigger: "axis",
102 },
103 grid: {
104 top: 120,
105 },
106 xAxis: [
107 {
108 type: "category",
109 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
110 },
111 ],
112 yAxis: [
113 {
114 type: "value",
115 },
116 ],
117 series: [
118 {
119 name: "接入成功数量",
120 type: "bar",
121 data: [1000, 1500, 2000, 500, 4000],
122 },
123 {
124 name: "接入失败数量",
125 type: "bar",
126 data: [900, 500, 3200, 800, 4500],
127 },
128 {
129 name: "上报成功数量",
130 type: "bar",
131 data: [1000, 1500, 2000, 500, 4000],
132 },
133 {
134 name: "上报失败数量",
135 type: "bar",
136 data: [900, 500, 3200, 800, 4500],
137 },
138 ],
139 });
140 }, 120 },
121 xAxis: [
122 {
123 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
125 axisLabel: {
126 textStyle: {
127 show: true,
128 color: "#fff",
129 fontSize: "24",
130 },
131 },
132 },
133 ],
134 yAxis: [
135 {
136 type: "value",
137 axisLabel: {
138 textStyle: {
139 show: true,
140 color: "#fff",
141 fontSize: "24",
142 },
143 },
144 },
145 ],
146 series: [
147 {
148 name: "接入成功数量",
149 type: "bar",
150 data: [1000, 1500, 2000, 500, 4000],
151 },
152 {
153 name: "接入失败数量",
154 type: "bar",
155 data: [900, 500, 3200, 800, 4500],
156 },
157 {
158 name: "上报成功数量",
159 type: "bar",
160 data: [1000, 1500, 2000, 500, 4000],
161 },
162 {
163 name: "上报失败数量",
164 type: "bar",
165 data: [900, 500, 3200, 800, 4500],
166 },
167 ],
168 });
141 }, 169 },
170 },
142 }; 171 };
143 </script> 172 </script>
144 <style scoped lang="scss"> 173 <style scoped lang="scss">
145 @import "~@/styles/public.scss"; 174 @import "~@/styles/public.scss";
146 175
147 .jktjDetail { 176 .jktjDetail {
148 height: 100%; 177 height: 100%;
178 display: flex;
179 flex-direction: column;
180 .rows {
181 margin-left: 100px;
182 }
183 .echarts-box {
149 display: flex; 184 display: flex;
150 flex-direction: column; 185 justify-content: center;
186 height: 500px;
151 187
152 .echarts-box { 188 .chart {
153 display: flex; 189 width: 100%;
154 justify-content: center; 190 height: 100%;
155 height: 500px;
156
157 .chart {
158 width: 100%;
159 height: 100%;
160 }
161 } 191 }
192 }
162 193
163 .form-clues-content { 194 .form-clues-content {
164 flex: 1; 195 flex: 1;
165 height: 100%; 196 height: 100%;
166 } 197 }
167 } 198 }
168 </style> 199 </style>
169 <style scoped lang="scss"> 200 <style scoped lang="scss">
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px"> 5 <el-form
6 <el-row> 6 ref="form"
7 <el-col :span="8"> 7 :model="form"
8 <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至" 8 :inline="true"
9 start-placeholder="开始日期" end-placeholder="结束日期"> 9 class="from-clues-header"
10 </el-date-picker> 10 label-width="100px"
11 </el-col> 11 >
12 <!-- 按钮操作 --> 12 <el-row class="rows">
13 <el-col :span="12" class="btnColRight"> 13 <el-col :span="8">
14 <el-button type="default" @click="resetForm"> 重置 </el-button> 14 <el-date-picker
15 <el-button type="primary"> 查询 </el-button> 15 v-model="valueTime"
16 </el-col> 16 type="datetimerange"
17 </el-row> 17 range-separator="至"
18 </el-form> 18 start-placeholder="开始日期"
19 <!-- 表格 --> 19 end-placeholder="结束日期"
20 <div class="form-clues-content echarts-box"> 20 >
21 <div id="myChart" class="chart"></div> 21 </el-date-picker>
22 </div> 22 </el-col>
23 <!-- 按钮操作 -->
24 <el-col :span="12" class="btnColRight">
25 <el-button type="default" @click="resetForm"> 重置 </el-button>
26 <el-button type="primary"> 查询 </el-button>
27 </el-col>
28 </el-row>
29 </el-form>
30 <!-- 表格 -->
31 <div class="form-clues-content echarts-box">
32 <div id="myChart" class="chart"></div>
23 </div> 33 </div>
34 </div>
24 </template> 35 </template>
25 36
26 <script> 37 <script>
27 export default { 38 export default {
28 name: "jktj", 39 name: "jktj",
29 data () { 40 data() {
30 return { 41 return {
31 // 开始结束日期限制 42 // 开始结束日期限制
32 pickerOptionsStart: { 43 pickerOptionsStart: {
33 disabledDate: (time) => { 44 disabledDate: (time) => {
34 if (this.form.endTime) { 45 if (this.form.endTime) {
35 return ( 46 return time.getTime() >= new Date(this.form.endTime).getTime();
36 time.getTime() >= new Date(this.form.endTime).getTime() 47 }
37 ); 48 },
38 } 49 },
39 } 50 // 结束日期限制
40 }, 51 pickerOptionsEnd: {
41 // 结束日期限制 52 disabledDate: (time) => {
42 pickerOptionsEnd: { 53 if (this.form.startTime) {
43 disabledDate: (time) => { 54 return time.getTime() <= new Date(this.form.startTime).getTime();
44 if (this.form.startTime) { 55 }
45 return ( 56 },
46 time.getTime() <= new Date(this.form.startTime).getTime() 57 },
47 ); 58 // 搜索表单
48 } 59 valueTime: "",
49 } 60 form: {
50 }, 61 startTime: "",
51 // 搜索表单 62 endTime: "",
52 valueTime: '', 63 },
53 form: { 64 };
54 startTime: "", 65 },
55 endTime: "" 66 mounted() {
56 } 67 // 初始化图表
57 } 68 this.echartInit();
69 },
70 methods: {
71 // 重置
72 resetForm() {
73 this.form = {
74 startTime: "",
75 endTime: "",
76 };
58 }, 77 },
59 mounted () { 78 echartInit() {
60 // 初始化图表 79 // 基于准备好的dom，初始化echarts实例
61 this.echartInit(); 80 let myChart = this.$echarts.init(document.getElementById("myChart"));
81 // 绘制图表
82 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
84 title: {
85 show: true,
86 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
87 left: "center",
88 textStyle: {
89 fontSize: 30,
90 lineHeight: 30,
91 height: 60,
92 color: "#fff",
93 },
94 },
95 legend: {
96 data: [
97 "接入成功数量",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 24,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 },
110 tooltip: {
111 show: true,
112 trigger: "axis",
113 textStyle: {
114 fontSize: 22 // 字体大小
62 }, 115 },
63 methods: { 116 extraCssText: 'width:260px;height:200px;' // 背景色
64 // 重置
65 resetForm () {
66 this.form = {
67 startTime: "",
68 endTime: ""
69 }
70 }, 117 },
71 echartInit () { 118 grid: {
72 // 基于准备好的dom，初始化echarts实例 119 top: 120,
73 let myChart = this.$echarts.init(
74 document.getElementById("myChart")
75 );
76 // 绘制图表
77 myChart.setOption({
78 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
79 title: {
80 show: true,
81 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
82 left: "center",
83 textStyle: {
84 fontSize: 18,
85 lineHeight: 30,
86 height: 60,
87 color: "#777",
88 },
89 },
90 legend: {
91 data: [
92 "接入成功数量",
93 "接入失败数量",
94 "上报成功数量",
95 "上报失败数量",
96 ],
97 top: 80,
98 },
99 tooltip: {
100 show: true,
101 trigger: "axis",
102 },
103 grid: {
104 top: 120,
105 },
106 xAxis: [
107 {
108 type: "category",
109 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
110 },
111 ],
112 yAxis: [
113 {
114 type: "value",
115 },
116 ],
117 series: [
118 {
119 name: "接入成功数量",
120 type: "bar",
121 data: [1000, 1500, 2000, 500, 4000],
122 },
123 {
124 name: "接入失败数量",
125 type: "bar",
126 data: [900, 500, 3200, 800, 4500],
127 },
128 {
129 name: "上报成功数量",
130 type: "bar",
131 data: [1000, 1500, 2000, 500, 4000],
132 },
133 {
134 name: "上报失败数量",
135 type: "bar",
136 data: [900, 500, 3200, 800, 4500],
137 },
138 ],
139 });
140 }, 120 },
121 xAxis: [
122 {
123 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
125 axisLabel: {
126 textStyle: {
127 show: true,
128 color: "#fff",
129 fontSize: "24",
130 },
131 },
132 },
133 ],
134 yAxis: [
135 {
136 type: "value",
137 axisLabel: {
138 textStyle: {
139 show: true,
140 color: "#fff",
141 fontSize: "24",
142 },
143 },
144 },
145 ],
146 series: [
147 {
148 name: "接入成功数量",
149 type: "bar",
150 data: [1000, 1500, 2000, 500, 4000],
151 },
152 {
153 name: "接入失败数量",
154 type: "bar",
155 data: [900, 500, 3200, 800, 4500],
156 },
157 {
158 name: "上报成功数量",
159 type: "bar",
160 data: [1000, 1500, 2000, 500, 4000],
161 },
162 {
163 name: "上报失败数量",
164 type: "bar",
165 data: [900, 500, 3200, 800, 4500],
166 },
167 ],
168 });
141 }, 169 },
170 },
142 }; 171 };
143 </script> 172 </script>
144 <style scoped lang="scss"> 173 <style scoped lang="scss">
145 @import "~@/styles/public.scss"; 174 @import "~@/styles/public.scss";
146 175
147 .jktjDetail { 176 .jktjDetail {
148 height: 100%; 177 height: 100%;
178 display: flex;
179 flex-direction: column;
180 .rows {
181 margin-left: 100px;
182 }
183 .echarts-box {
149 display: flex; 184 display: flex;
150 flex-direction: column; 185 justify-content: center;
186 height: 500px;
151 187
152 .echarts-box { 188 .chart {
153 display: flex; 189 width: 100%;
154 justify-content: center; 190 height: 100%;
155 height: 500px;
156
157 .chart {
158 width: 100%;
159 height: 100%;
160 }
161 } 191 }
192 }
162 193
163 .form-clues-content { 194 .form-clues-content {
164 flex: 1; 195 flex: 1;
165 height: 100%; 196 height: 100%;
166 } 197 }
167 } 198 }
168 </style> 199 </style>
169 <style scoped lang="scss"> 200 <style scoped lang="scss">
......