Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
df708db4 by yangwei
Options

统计监控功能开发

1 parent 44f7ea61
Inline Side-by-side
Showing 5 changed files with 611 additions and 146 deletions
1 import request from '@/utils/request'
2 import SERVER from './config'
3
4 class business {
5 /*
6 成功率统计
7 startDate:开始日期
8 endDate:结束日期
9 */
10 async getSuucessRate(startDate,endDate) {
11 return request({
12 url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
13 method: 'get',
14 params: {
15 startDate:startDate,
16 endDate:endDate
17 }
18 })
19 }
20 }
21 export default new business()
...\ No newline at end of file ...\ No newline at end of file
1 import request from "@/utils/request";
2 import SERVER from "./config";
3
4 class efficient {
5 /*
6 获取对应的业务量总数
7 startDate:开始日期
8 endDate:结束日期
9 */
10 async getProcessCounts(startDate, endDate) {
11 return request({
12 url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts",
13 method: "post",
14 params: {
15 startDate: startDate,
16 endDate: endDate,
17 },
18 });
19 }
20 /*
21 获取各区县业务对应的天数
22 recType:业务代码
23 startDate:开始日期
24 endDate:结束日期
25 */
26 async getProcessDays(recType, startDate, endDate) {
27 return request({
28 url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessDays",
29 method: "post",
30 params: {
31 recType: recType,
32 startDate: startDate,
33 endDate: endDate,
34 },
35 });
36 }
37 }
38 export default new efficient();
...@@ -11,30 +11,37 @@ ...@@ -11,30 +11,37 @@
11 > 11 >
12 <el-row class="rows"> 12 <el-row class="rows">
13 <el-col :span="8"> 13 <el-col :span="8">
14 <el-date-picker 14 <el-form-item label="开始日期">
15 v-model="valueTime" 15 <el-date-picker
16 type="datetimerange" 16 v-model="valueTime"
17 range-separator="至" 17 value-format="yyyy/MM/dd HH:mm:ss"
18 start-placeholder="开始日期" 18 type="datetimerange"
19 end-placeholder="结束日期" 19 range-separator="至"
20 > 20 start-placeholder="开始日期"
21 </el-date-picker> 21 end-placeholder="结束日期"
22 >
23 </el-date-picker>
24 </el-form-item>
25 </el-col>
26 <!-- 操作按钮 -->
27 <el-col :span="3" class="btnColRight">
28 <btn nativeType="cz" @click="resetForm">重置</btn>
29 <btn nativeType="cx" @click="getProcessCounts">查询</btn>
22 </el-col> 30 </el-col>
23 <!-- 操作按钮 -->
24 <el-col :span="3" class="btnColRight">
25 <btn nativeType="cz" @click="resetForm">重置</btn>
26 <btn nativeType="cx">查询</btn>
27 </el-col>
28 </el-row> 31 </el-row>
29 </el-form> 32 </el-form>
30 <!-- 表格 --> 33 <!-- 表格 -->
31 <div class="form-clues-content echarts-box"> 34 <div class="form-clues-content echarts-box" v-if="pieChartsData.length">
32 <div id="myChart" class="chart"></div> 35 <div id="myChart" class="chart"></div>
36 <div id="myChart-bar" class="chart-bar"></div>
33 </div> 37 </div>
38 <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
34 </div> 39 </div>
35 </template> 40 </template>
36
37 <script> 41 <script>
42 import { mapGetters } from "vuex";
43 import efficient from "@/api/efficient";
44 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
38 export default { 45 export default {
39 name: "jktj", 46 name: "jktj",
40 data() { 47 data() {
...@@ -56,73 +63,160 @@ export default { ...@@ -56,73 +63,160 @@ export default {
56 }, 63 },
57 }, 64 },
58 // 搜索表单 65 // 搜索表单
59 valueTime: "", 66 valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
60 form: { 67 // valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
61 startTime: "", 68 pieChartsData: [],
62 endTime: "",
63 },
64 }; 69 };
65 }, 70 },
66 mounted() { 71 created() {
67 // 初始化图表 72 this.getProcessCounts();
68 this.echartInit(); 73 },
74 mounted() {},
75 computed: {
76 ...mapGetters(["dicData"]),
69 }, 77 },
70 methods: { 78 methods: {
79 //查询各区县办件数量
80 async getProcessCounts() {
81 this.pieChartsData = [];
82 let { result: res } = await efficient.getProcessCounts(
83 this.valueTime[0],
84 this.valueTime[1]
85 );
86 //获取图表配置项需要的数据
87 res.length > 0 &&
88 res.forEach((item) => {
89 this.pieChartsData.push({
90 //登记数量
91 value: item.counts,
92 //登记数量
93 name: item.recTypeName,
94 //登记类型代码
95 groupId: item.recType,
96 });
97 });
98 // 初始化图表
99 this.echartInit();
100 this.barChartInit(res[0].recType);
101 },
71 // 重置 102 // 重置
72 resetForm() { 103 resetForm() {
73 this.form = { 104 this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
74 startTime: "", 105 this.getProcessCounts();
75 endTime: "",
76 };
77 }, 106 },
107 //玫瑰图初始化
78 echartInit() { 108 echartInit() {
109 let _this = this;
79 // 基于准备好的dom，初始化echarts实例 110 // 基于准备好的dom，初始化echarts实例
80 let myChart = this.$echarts.init(document.getElementById("myChart")); 111 let myChart = this.$echarts.init(document.getElementById("myChart"));
81 // 绘制图表 112 // 绘制图表
82 myChart.setOption({ 113 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], 114 legend: {
84 title: { 115 bottom: "6%",
85 show: true,
86 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
87 left: "center", 116 left: "center",
88 textStyle: { 117 textStyle: {
89 fontSize: 20, 118 color: "#fff",
90 lineHeight: 30,
91 height: 60,
92 color: "#b6b5b5",
93 }, 119 },
94 }, 120 },
95 legend: { 121 tooltip: {
96 data: [ 122 trigger: "item",
97 "接入成功数量", 123 formatter: "{b} : {c}",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 20,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 }, 124 },
125 series: [
126 {
127 name: "各业务类型办理数量",
128 type: "pie",
129 radius: [0, 250],
130 center: ["50%", "30%"],
131 roseType: "area",
132 itemStyle: {
133 borderRadius: 8,
134 },
135 label: {
136 show: false,
137 },
138 data: this.pieChartsData,
139 },
140 ],
141 });
142 //添加点击事件
143 myChart.on("click", function (param) {
144 _this.barChartInit(param.data.groupId);
145 });
146 //默认选中第一个
147 let index = 1;
148 myChart.dispatchAction({
149 type: "highlight",
150 seriesIndex: 0,
151 dataIndex: 0,
152 });
153 myChart.on("mouseover", function (e) {
154 if (e.dataIndex != index) {
155 myChart.dispatchAction({
156 type: "downplay",
157 seriesIndex: 0,
158 dataIndex: index,
159 });
160 }
161 });
162 myChart.on("mouseout", function (e) {
163 index = e.dataIndex;
164 myChart.dispatchAction({
165 type: "highlight",
166 seriesIndex: 0,
167 dataIndex: e.dataIndex,
168 });
169 });
170 },
171 //柱图初始化
172 async barChartInit(recType) {
173 //请求recType对应业务的各区县数据
174 let { result: res } = await efficient.getProcessDays(
175 recType,
176 this.valueTime[0],
177 this.valueTime[1]
178 );
179 let xzqArr = [];
180 //行政区代码过滤
181 res.length > 0 &&
182 res.forEach((item) => {
183 xzqArr.push(
184 this.dicData["A20"].filter((i) => {
185 return i.DCODE == item.qxdm;
186 })[0].DNAME
187 );
188 });
189 let myChartBar = this.$echarts.init(
190 document.getElementById("myChart-bar")
191 );
192 myChartBar.setOption({
193 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
110 tooltip: { 194 tooltip: {
111 show: true, 195 show: true,
112 trigger: "axis", 196 trigger: "axis",
113 textStyle: { 197 textStyle: {
114 fontSize: 20 // 字体大小 198 fontSize: 16, // 字体大小
115 }, 199 },
116 extraCssText: 'width:220px;height:160px;' // 背景色 200 extraCssText: "width:220px;height:160px;", // 背景色
117 }, 201 },
118 grid: { 202 grid: {
119 top: 120, 203 top: 120,
120 }, 204 },
205 legend: {
206 data: ["最短用时", "平均用时", "最长用时"],
207 top: 20,
208 textStyle: {
209 show: true,
210 color: "#fff",
211 fontSize: "16",
212 },
213 },
121 xAxis: [ 214 xAxis: [
122 { 215 {
123 type: "category", 216 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"], 217 data: xzqArr,
125 axisLabel: { 218 axisLabel: {
219 interval: 0,
126 textStyle: { 220 textStyle: {
127 show: true, 221 show: true,
128 color: "#fff", 222 color: "#fff",
...@@ -134,35 +228,35 @@ export default { ...@@ -134,35 +228,35 @@ export default {
134 yAxis: [ 228 yAxis: [
135 { 229 {
136 type: "value", 230 type: "value",
231 name: "单位：天",
232 nameTextStyle: {
233 color: "#fff",
234 fontSize: "16",
235 },
137 axisLabel: { 236 axisLabel: {
138 textStyle: { 237 textStyle: {
139 show: true, 238 show: true,
140 color: "#fff", 239 color: "#fff",
141 fontSize: "20", 240 fontSize: "16",
142 }, 241 },
143 }, 242 },
144 }, 243 },
145 ], 244 ],
146 series: [ 245 series: [
147 { 246 {
148 name: "接入成功数量",
149 type: "bar",
150 data: [1000, 1500, 2000, 500, 4000],
151 },
152 {
153 name: "接入失败数量",
154 type: "bar", 247 type: "bar",
155 data: [900, 500, 3200, 800, 4500], 248 name: "最短用时",
249 data: res.map((item) => item.minDay),
156 }, 250 },
157 { 251 {
158 name: "上报成功数量",
159 type: "bar", 252 type: "bar",
160 data: [1000, 1500, 2000, 500, 4000], 253 name: "平均用时",
254 data: res.map((item) => item.avgDay),
161 }, 255 },
162 { 256 {
163 name: "上报失败数量",
164 type: "bar", 257 type: "bar",
165 data: [900, 500, 3200, 800, 4500], 258 name: "最长用时",
259 data: res.map((item) => item.maxDay),
166 }, 260 },
167 ], 261 ],
168 }); 262 });
...@@ -177,24 +271,30 @@ export default { ...@@ -177,24 +271,30 @@ export default {
177 height: 100%; 271 height: 100%;
178 display: flex; 272 display: flex;
179 flex-direction: column; 273 flex-direction: column;
180 .rows { 274 .rows {
181 margin-left: 100px; 275 margin-left: 100px;
182 } 276 }
277 .center {
278 line-height: 50vh;
279 text-align: center;
280 }
183 .echarts-box { 281 .echarts-box {
184 display: flex; 282 display: flex;
185 justify-content: center; 283 justify-content: center;
186 height: 500px;
187
188 .chart { 284 .chart {
189 width: 100%; 285 width: 40%;
190 height: 100%; 286 height: 100%;
287 float: left;
288 }
289 .chart-bar {
290 width: 60%;
191 } 291 }
192 } 292 }
193 293
194 .form-clues-content { 294 .form-clues-content {
195 flex: 1; 295 flex: 1;
196 height: 100%; 296 height: 100%;
197 color: #b6b5b5 297 color: #b6b5b5;
198 } 298 }
199 } 299 }
200 </style> 300 </style>
......
1 <template>
2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 -->
5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px">
7 <el-row>
8 <el-col :span="6">
9 <el-form-item label="行政区">
10 <el-select
11 v-model="form.XZQDM"
12 class="width100"
13 clearable
14 placeholder="行政区"
15 >
16 <el-option
17 v-for="item in dicData['A20']"
18 :key="item.DCODE"
19 :label="item.DNAME"
20 :value="item.DCODE"
21 >
22 </el-option>
23 </el-select>
24 </el-form-item>
25 </el-col>
26 <el-col :span="8">
27 <el-form-item label="开始日期">
28 <el-date-picker
29 v-model="valueTime"
30 value-format="yyyy/MM/dd HH:mm:ss"
31 type="datetimerange"
32 range-separator="至"
33 start-placeholder="开始日期"
34 end-placeholder="结束日期"
35 >
36 </el-date-picker>
37 </el-form-item>
38 </el-col>
39 <!-- 操作按钮 -->
40 <el-col :span="3" class="btnColRight">
41 <btn nativeType="cz" @click="resetForm">重置</btn>
42 <btn nativeType="cx" @click="getSuucessRate">查询</btn>
43 </el-col>
44 </el-row>
45 </el-form>
46 </div>
47 <!-- 图表 -->
48 <div class="form-clues-content echarts-box" v-if="chartData.length">
49 <div id="myChart" class="chart"></div>
50 </div>
51 <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
52 </div>
53 </template>
54
55 <script>
56 import { mapGetters } from "vuex";
57 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
58 import business from "@/api/business";
59 export default {
60 name: "jktj",
61 data() {
62 return {
63 // 开始结束日期限制
64 pickerOptionsStart: {
65 disabledDate: (time) => {
66 if (this.form.endTime) {
67 return time.getTime() >= new Date(this.form.endTime).getTime();
68 }
69 },
70 },
71 // 结束日期限制
72 pickerOptionsEnd: {
73 disabledDate: (time) => {
74 if (this.form.startTime) {
75 return time.getTime() <= new Date(this.form.startTime).getTime();
76 }
77 },
78 },
79 // 搜索表单
80 valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
81 recTypeArr: [],
82 chartData: [],
83 form: {
84 startTime: "",
85 endTime: "",
86 qxdm: "",
87 },
88 };
89 },
90 mounted() {
91 // 查询成功率
92 this.getSuucessRate();
93 },
94 computed: {
95 ...mapGetters(["dicData"]),
96 },
97 methods: {
98 async getSuucessRate() {
99 this.recTypeArr = [];
100 this.chartData = [];
101 let { result: res } = await business.getSuucessRate(
102 this.valueTime[0],
103 this.valueTime[1]
104 );
105 this.chartData = res;
106 //行政区代码过滤
107 res.length > 0 &&
108 res.forEach((item) => {
109 this.recTypeArr.push(item.recTypeName);
110 });
111 this.echartInit();
112 },
113 // 重置
114 resetForm() {
115 this.form = {
116 startTime: "",
117 endTime: "",
118 };
119 this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
120 this.getSuucessRate();
121 },
122 echartInit() {
123 let _this = this;
124 // 基于准备好的dom，初始化echarts实例
125 let myChart = this.$echarts.init(document.getElementById("myChart"));
126 // 绘制图表
127 myChart.setOption({
128 color: ["#fff", "#ff6e6e", "#3f99ff", "#ffaf48"],
129 tooltip: {
130 trigger: "axis",
131 axisPointer: {
132 type: "cross",
133 crossStyle: {
134 color: "#fff",
135 },
136 },
137 },
138 legend: {
139 data: ["成功", "失败", "成功率"],
140 textStyle: {
141 show: true,
142 color: "#fff",
143 fontSize: "16",
144 },
145 },
146 xAxis: [
147 {
148 type: "category",
149 data: _this.recTypeArr,
150 axisPointer: {
151 type: "shadow",
152 },
153 axisLabel: {
154 textStyle: {
155 show: true,
156 color: "#fff",
157 fontSize: "16",
158 },
159 formatter: function (val) {
160 let c = document.createElement("canvas");
161 const ctx = c.getContext("2d");
162 const arr = val.split("");
163 arr
164 .map((item) => ctx.measureText(item).width)
165 .reduce((pre, next, index) => {
166 const nLen = pre + next;
167 if (nLen > 40) {
168 arr[index - 1] += "...";
169 return next;
170 } else {
171 return nLen;
172 }
173 });
174 c = null;
175 let ind = arr.findIndex((i) => {
176 return i.indexOf("...") > -1;
177 });
178 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
179 return newArr.join("");
180 },
181 },
182 },
183 ],
184 yAxis: [
185 {
186 type: "value",
187 name: "数量/个",
188 nameTextStyle: {
189 color: "#fff",
190 fontSize: "16",
191 },
192 interval: 50,
193 axisLabel: {
194 formatter: "{value}",
195 textStyle: {
196 show: true,
197 color: "#fff",
198 fontSize: "16",
199 },
200 },
201 },
202 {
203 type: "value",
204 name: "成功率/%",
205 nameTextStyle: {
206 color: "#fff",
207 fontSize: "16",
208 },
209 interval: 5,
210 axisLabel: {
211 formatter: "{value} %",
212 textStyle: {
213 show: true,
214 color: "#fff",
215 fontSize: "16",
216 },
217 },
218 },
219 ],
220 series: [
221 {
222 name: "成功",
223 type: "bar",
224 tooltip: {
225 valueFormatter: function (value) {
226 return value + " ml";
227 },
228 },
229 data: this.chartData.map((item) => {
230 return item.success;
231 }),
232 },
233 {
234 name: "失败",
235 type: "bar",
236 tooltip: {
237 valueFormatter: function (value) {
238 return value + " ml";
239 },
240 },
241 data: this.chartData.map((item) => {
242 return item.failure;
243 }),
244 },
245 {
246 name: "成功率",
247 type: "line",
248 yAxisIndex: 1,
249 tooltip: {
250 valueFormatter: function (value) {
251 return value + "%";
252 },
253 },
254 data: this.chartData.map((item) => {
255 return item.rate;
256 }),
257 },
258 ],
259 });
260 },
261 },
262 };
263 </script>
264 <style scoped lang="scss">
265 @import "~@/styles/public.scss";
266 .jktjDetail {
267 height: 100%;
268 display: flex;
269 flex-direction: column;
270 .rows {
271 margin-left: 100px;
272 }
273 .center {
274 line-height: 50vh;
275 text-align: center;
276 color:#b6b5b5
277 }
278 .echarts-box {
279 display: flex;
280 justify-content: center;
281 height: 500px;
282 .chart {
283 width: 100%;
284 height: 100%;
285 }
286 }
287 .form-clues-content {
288 flex: 1;
289 height: 100%;
290 }
291 }
292 </style>
293 <style scoped lang="scss">
294 @import "~@/styles/public.scss";
295 </style>
...@@ -2,32 +2,48 @@ ...@@ -2,32 +2,48 @@
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <el-form 5 <div class="from-clues-header">
6 ref="form" 6 <el-form ref="form" :model="form" label-width="100px">
7 :model="form" 7 <el-row>
8 :inline="true" 8 <el-col :span="6">
9 class="from-clues-header" 9 <el-form-item label="行政区">
10 label-width="100px" 10 <el-select
11 > 11 v-model="form.XZQDM"
12 <el-row class="rows"> 12 class="width100"
13 <el-col :span="8"> 13 clearable
14 <el-date-picker 14 placeholder="行政区"
15 v-model="valueTime" 15 >
16 type="datetimerange" 16 <el-option
17 range-separator="至" 17 v-for="item in dicData['A20']"
18 start-placeholder="开始日期" 18 :key="item.DCODE"
19 end-placeholder="结束日期" 19 :label="item.DNAME"
20 > 20 :value="item.DCODE"
21 </el-date-picker> 21 >
22 </el-col> 22 </el-option>
23 <!-- 操作按钮 --> 23 </el-select>
24 </el-form-item>
25 </el-col>
26 <el-col :span="8">
27 <el-form-item label="开始日期">
28 <el-date-picker
29 v-model="valueTime"
30 type="datetimerange"
31 range-separator="至"
32 start-placeholder="开始日期"
33 end-placeholder="结束日期"
34 >
35 </el-date-picker>
36 </el-form-item>
37 </el-col>
38 <!-- 操作按钮 -->
24 <el-col :span="3" class="btnColRight"> 39 <el-col :span="3" class="btnColRight">
25 <btn nativeType="cz" @click="resetForm">重置</btn> 40 <btn nativeType="cz" @click="resetForm">重置</btn>
26 <btn nativeType="cx">查询</btn> 41 <btn nativeType="cx">查询</btn>
27 </el-col> 42 </el-col>
28 </el-row> 43 </el-row>
29 </el-form> 44 </el-form>
30 <!-- 表格 --> 45 </div>
46 <!-- 图表 -->
31 <div class="form-clues-content echarts-box"> 47 <div class="form-clues-content echarts-box">
32 <div id="myChart" class="chart"></div> 48 <div id="myChart" class="chart"></div>
33 </div> 49 </div>
...@@ -35,6 +51,7 @@ ...@@ -35,6 +51,7 @@
35 </template> 51 </template>
36 52
37 <script> 53 <script>
54 import { mapGetters } from "vuex";
38 export default { 55 export default {
39 name: "jktj", 56 name: "jktj",
40 data() { 57 data() {
...@@ -60,6 +77,7 @@ export default { ...@@ -60,6 +77,7 @@ export default {
60 form: { 77 form: {
61 startTime: "", 78 startTime: "",
62 endTime: "", 79 endTime: "",
80 XZQDM: "",
63 }, 81 },
64 }; 82 };
65 }, 83 },
...@@ -67,6 +85,9 @@ export default { ...@@ -67,6 +85,9 @@ export default {
67 // 初始化图表 85 // 初始化图表
68 this.echartInit(); 86 this.echartInit();
69 }, 87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
70 methods: { 91 methods: {
71 // 重置 92 // 重置
72 resetForm() { 93 resetForm() {
...@@ -81,39 +102,13 @@ export default { ...@@ -81,39 +102,13 @@ export default {
81 // 绘制图表 102 // 绘制图表
82 myChart.setOption({ 103 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], 104 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: 20,
90 lineHeight: 30,
91 height: 60,
92 color: "#b6b5b5",
93 },
94 },
95 legend: {
96 data: [
97 "接入成功数量",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 20,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 },
110 tooltip: { 105 tooltip: {
111 show: true, 106 show: true,
112 trigger: "axis", 107 trigger: "axis",
113 textStyle: { 108 textStyle: {
114 fontSize: 20 // 字体大小 109 fontSize: 16, // 字体大小
115 }, 110 },
116 extraCssText: 'width:220px;height:160px;' // 背景色 111 extraCssText: "width:220px;height:160px;", // 背景色
117 }, 112 },
118 grid: { 113 grid: {
119 top: 120, 114 top: 120,
...@@ -121,8 +116,38 @@ export default { ...@@ -121,8 +116,38 @@ export default {
121 xAxis: [ 116 xAxis: [
122 { 117 {
123 type: "category", 118 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"], 119 data: [
120 "土地所有权",
121 "建设用地、宅基地使用权",
122 "构（建）筑物所有权",
123 "林权",
124 "注销登记",
125 "抵押权登记",
126 ],
125 axisLabel: { 127 axisLabel: {
128 interval: 0,
129 formatter: function (val) {
130 let c = document.createElement("canvas");
131 const ctx = c.getContext("2d");
132 const arr = val.split("");
133 arr
134 .map((item) => ctx.measureText(item).width)
135 .reduce((pre, next, index) => {
136 const nLen = pre + next;
137 if (nLen > 60) {
138 arr[index - 1] += "...";
139 return next;
140 } else {
141 return nLen;
142 }
143 });
144 c = null;
145 let ind = arr.findIndex((i) => {
146 return i.indexOf("...") > -1;
147 });
148 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
149 return newArr.join("");
150 },
126 textStyle: { 151 textStyle: {
127 show: true, 152 show: true,
128 color: "#fff", 153 color: "#fff",
...@@ -134,35 +159,24 @@ export default { ...@@ -134,35 +159,24 @@ export default {
134 yAxis: [ 159 yAxis: [
135 { 160 {
136 type: "value", 161 type: "value",
162 name: "数量/个",
163 nameTextStyle: {
164 color: "#fff",
165 fontSize: "16",
166 },
137 axisLabel: { 167 axisLabel: {
138 textStyle: { 168 textStyle: {
139 show: true, 169 show: true,
140 color: "#fff", 170 color: "#fff",
141 fontSize: "20", 171 fontSize: "16",
142 }, 172 },
143 }, 173 },
144 }, 174 },
145 ], 175 ],
146 series: [ 176 series: [
147 { 177 {
148 name: "接入成功数量", 178 data: [200, 120, 150, 80, 70, 30],
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", 179 type: "bar",
165 data: [900, 500, 3200, 800, 4500],
166 }, 180 },
167 ], 181 ],
168 }); 182 });
...@@ -172,25 +186,22 @@ export default { ...@@ -172,25 +186,22 @@ export default {
172 </script> 186 </script>
173 <style scoped lang="scss"> 187 <style scoped lang="scss">
174 @import "~@/styles/public.scss"; 188 @import "~@/styles/public.scss";
175
176 .jktjDetail { 189 .jktjDetail {
177 height: 100%; 190 height: 100%;
178 display: flex; 191 display: flex;
179 flex-direction: column; 192 flex-direction: column;
180 .rows { 193 .rows {
181 margin-left: 100px; 194 margin-left: 100px;
182 } 195 }
183 .echarts-box { 196 .echarts-box {
184 display: flex; 197 display: flex;
185 justify-content: center; 198 justify-content: center;
186 height: 500px; 199 height: 500px;
187
188 .chart { 200 .chart {
189 width: 100%; 201 width: 100%;
190 height: 100%; 202 height: 100%;
191 } 203 }
192 } 204 }
193
194 .form-clues-content { 205 .form-clues-content {
195 flex: 1; 206 flex: 1;
196 height: 100%; 207 height: 100%;
......