Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
9a79d5e2 by yangwei
Options

完善监控统计图表功能

1 parent a5c08ac8
Inline Side-by-side
Showing 5 changed files with 192 additions and 112 deletions
...@@ -7,13 +7,14 @@ class business { ...@@ -7,13 +7,14 @@ class business {
7 startDate:开始日期 7 startDate:开始日期
8 endDate:结束日期 8 endDate:结束日期
9 */ 9 */
10 async getSuucessRate(startDate,endDate) { 10 async getSuucessRate(startDate,endDate,qxdm) {
11 return request({ 11 return request({
12 url: SERVER.SERVERAPI + '/rest/statistics/Business/sf', 12 url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
13 method: 'get', 13 method: 'get',
14 params: { 14 params: {
15 startDate:startDate, 15 startDate:startDate,
16 endDate:endDate 16 endDate:endDate,
17 qxdm:qxdm
17 } 18 }
18 }) 19 })
19 } 20 }
......
...@@ -7,13 +7,14 @@ class efficient { ...@@ -7,13 +7,14 @@ class efficient {
7 startDate:开始日期 7 startDate:开始日期
8 endDate:结束日期 8 endDate:结束日期
9 */ 9 */
10 async getProcessCounts(startDate, endDate) { 10 async getProcessCounts(startDate, endDate,qxdm) {
11 return request({ 11 return request({
12 url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts", 12 url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts",
13 method: "post", 13 method: "post",
14 params: { 14 params: {
15 startDate: startDate, 15 startDate: startDate,
16 endDate: endDate, 16 endDate: endDate,
17 qxdm:qxdm
17 }, 18 },
18 }); 19 });
19 } 20 }
......
...@@ -2,34 +2,41 @@ ...@@ -2,34 +2,41 @@
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="4">
9 class="from-clues-header" 9 <el-form-item label="开始日期" prop="startTime">
10 label-width="100px" 10 <el-date-picker
11 > 11 type="datetime"
12 <el-row class="rows"> 12 placeholder="开始日期"
13 <el-col :span="8"> 13 :picker-options="pickerOptionsStart"
14 <el-form-item label="开始日期"> 14 clearable
15 <el-date-picker 15 v-model="form.startTime"
16 v-model="valueTime" 16 value-format="yyyy/MM/dd HH:mm:ss"
17 value-format="yyyy/MM/dd HH:mm:ss" 17 ></el-date-picker>
18 type="datetimerange" 18 </el-form-item>
19 range-separator="至" 19 </el-col>
20 start-placeholder="开始日期" 20 <el-col :span="4">
21 end-placeholder="结束日期" 21 <el-form-item label="结束日期" prop="endTime">
22 > 22 <el-date-picker
23 </el-date-picker> 23 type="datetime"
24 </el-form-item> 24 placeholder="结束日期"
25 </el-col> 25 :picker-options="pickerOptionsEnd"
26 <!-- 操作按钮 --> 26 clearable
27 <el-col :span="3" class="btnColRight"> 27 v-model="form.endTime"
28 <btn nativeType="cz" @click="resetForm">重置</btn> 28 value-format="yyyy/MM/dd HH:mm:ss"
29 <btn nativeType="cx" @click="getProcessCounts">查询</btn> 29 ></el-date-picker>
30 </el-col> 30 </el-form-item>
31 </el-row> 31 </el-col>
32 </el-form> 32 <!-- 操作按钮 -->
33 <el-col :span="3" class="btnColRight">
34 <btn nativeType="cz" @click="resetForm">重置</btn>
35 <btn nativeType="cx" @click="getProcessCounts">查询</btn>
36 </el-col>
37 </el-row>
38 </el-form>
39 </div>
33 <!-- 表格 --> 40 <!-- 表格 -->
34 <div class="form-clues-content echarts-box" v-if="pieChartsData.length"> 41 <div class="form-clues-content echarts-box" v-if="pieChartsData.length">
35 <div id="myChart" class="chart"></div> 42 <div id="myChart" class="chart"></div>
...@@ -62,16 +69,18 @@ export default { ...@@ -62,16 +69,18 @@ export default {
62 } 69 }
63 }, 70 },
64 }, 71 },
72 form: {
73 startTime: getFirstDayOfSeason(),
74 endTime: timeFormat(new Date(), true),
75 },
65 // 搜索表单 76 // 搜索表单
66 valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
67 // valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
68 pieChartsData: [], 77 pieChartsData: [],
69 }; 78 };
70 }, 79 },
71 created() { 80 created() {},
81 mounted() {
72 this.getProcessCounts(); 82 this.getProcessCounts();
73 }, 83 },
74 mounted() {},
75 computed: { 84 computed: {
76 ...mapGetters(["dicData"]), 85 ...mapGetters(["dicData"]),
77 }, 86 },
...@@ -80,8 +89,8 @@ export default { ...@@ -80,8 +89,8 @@ export default {
80 async getProcessCounts() { 89 async getProcessCounts() {
81 this.pieChartsData = []; 90 this.pieChartsData = [];
82 let { result: res } = await efficient.getProcessCounts( 91 let { result: res } = await efficient.getProcessCounts(
83 this.valueTime[0], 92 this.form.startTime,
84 this.valueTime[1] 93 this.form.endTime
85 ); 94 );
86 //获取图表配置项需要的数据 95 //获取图表配置项需要的数据
87 res.length > 0 && 96 res.length > 0 &&
...@@ -95,13 +104,18 @@ export default { ...@@ -95,13 +104,18 @@ export default {
95 groupId: item.recType, 104 groupId: item.recType,
96 }); 105 });
97 }); 106 });
98 // 初始化图表 107 this.$nextTick(() => {
99 this.echartInit(); 108 // 初始化图表
100 this.barChartInit(res[0].recType); 109 this.echartInit();
110 this.barChartInit(res[0].recType);
111 });
101 }, 112 },
102 // 重置 113 // 重置
103 resetForm() { 114 resetForm() {
104 this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)]; 115 this.form = {
116 startTime: getFirstDayOfSeason(),
117 endTime: timeFormat(new Date(), true),
118 };
105 this.getProcessCounts(); 119 this.getProcessCounts();
106 }, 120 },
107 //玫瑰图初始化 121 //玫瑰图初始化
...@@ -112,7 +126,7 @@ export default { ...@@ -112,7 +126,7 @@ export default {
112 // 绘制图表 126 // 绘制图表
113 myChart.setOption({ 127 myChart.setOption({
114 legend: { 128 legend: {
115 bottom: "6%", 129 bottom: "2%",
116 left: "center", 130 left: "center",
117 textStyle: { 131 textStyle: {
118 color: "#fff", 132 color: "#fff",
...@@ -127,14 +141,11 @@ export default { ...@@ -127,14 +141,11 @@ export default {
127 name: "各业务类型办理数量", 141 name: "各业务类型办理数量",
128 type: "pie", 142 type: "pie",
129 radius: [0, 250], 143 radius: [0, 250],
130 center: ["50%", "30%"], 144 center: ["50%", "45%"],
131 roseType: "area", 145 roseType: "area",
132 itemStyle: { 146 itemStyle: {
133 borderRadius: 8, 147 borderRadius: 8,
134 }, 148 },
135 label: {
136 show: false,
137 },
138 data: this.pieChartsData, 149 data: this.pieChartsData,
139 }, 150 },
140 ], 151 ],
...@@ -173,19 +184,37 @@ export default { ...@@ -173,19 +184,37 @@ export default {
173 //请求recType对应业务的各区县数据 184 //请求recType对应业务的各区县数据
174 let { result: res } = await efficient.getProcessDays( 185 let { result: res } = await efficient.getProcessDays(
175 recType, 186 recType,
176 this.valueTime[0], 187 this.form.startTime,
177 this.valueTime[1] 188 this.form.endTime
178 ); 189 );
190 //行政区数组
179 let xzqArr = []; 191 let xzqArr = [];
180 //行政区代码过滤 192 this.dicData["A20"].forEach((item) => {
181 res.length > 0 && 193 xzqArr.push(item.DNAME);
182 res.forEach((item) => { 194 let tempArr = res.filter((i) => {
183 xzqArr.push( 195 return i.qxdm == item.DCODE;
184 this.dicData["A20"].filter((i) => {
185 return i.DCODE == item.qxdm;
186 })[0].DNAME
187 );
188 }); 196 });
197 if (tempArr.length) {
198 item.avgDay = tempArr[0].avgDay;
199 item.maxDay = tempArr[0].maxDay;
200 item.minDay = tempArr[0].minDay;
201 } else {
202 item.avgDay = 0;
203 item.maxDay = 0;
204 item.minDay = 0;
205 }
206 });
207 //补全无数据行政区后的结果数组
208 let dealArr = [...this.dicData["A20"]];
209 // //行政区代码过滤
210 // res.length > 0 &&
211 // res.forEach((item) => {
212 // xzqArr.push(
213 // this.dicData["A20"].filter((i) => {
214 // return i.DCODE == item.qxdm;
215 // })[0].DNAME
216 // );
217 // });
189 let myChartBar = this.$echarts.init( 218 let myChartBar = this.$echarts.init(
190 document.getElementById("myChart-bar") 219 document.getElementById("myChart-bar")
191 ); 220 );
...@@ -220,7 +249,7 @@ export default { ...@@ -220,7 +249,7 @@ export default {
220 textStyle: { 249 textStyle: {
221 show: true, 250 show: true,
222 color: "#fff", 251 color: "#fff",
223 fontSize: "20", 252 fontSize: "16",
224 }, 253 },
225 }, 254 },
226 }, 255 },
...@@ -245,18 +274,21 @@ export default { ...@@ -245,18 +274,21 @@ export default {
245 series: [ 274 series: [
246 { 275 {
247 type: "bar", 276 type: "bar",
277 barMaxWidth: '60',
248 name: "最短用时", 278 name: "最短用时",
249 data: res.map((item) => item.minDay), 279 data: dealArr.map((item) => item.minDay),
250 }, 280 },
251 { 281 {
252 type: "bar", 282 type: "bar",
283 barMaxWidth: '60',
253 name: "平均用时", 284 name: "平均用时",
254 data: res.map((item) => item.avgDay), 285 data: dealArr.map((item) => item.avgDay),
255 }, 286 },
256 { 287 {
257 type: "bar", 288 type: "bar",
289 barMaxWidth: '60',
258 name: "最长用时", 290 name: "最长用时",
259 data: res.map((item) => item.maxDay), 291 data: dealArr.map((item) => item.maxDay),
260 }, 292 },
261 ], 293 ],
262 }); 294 });
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-row> 7 <el-row>
8 <el-col :span="6"> 8 <el-col :span="4">
9 <el-form-item label="行政区"> 9 <el-form-item label="行政区">
10 <el-select 10 <el-select
11 v-model="form.XZQDM" 11 v-model="form.qxdm"
12 class="width100" 12 class="width100"
13 clearable 13 clearable
14 placeholder="行政区" 14 placeholder="行政区"
...@@ -23,17 +23,28 @@ ...@@ -23,17 +23,28 @@
23 </el-select> 23 </el-select>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="8"> 26 <el-col :span="4">
27 <el-form-item label="开始日期"> 27 <el-form-item label="开始日期" prop="startTime">
28 <el-date-picker 28 <el-date-picker
29 v-model="valueTime" 29 type="datetime"
30 placeholder="开始日期"
31 :picker-options="pickerOptionsStart"
32 clearable
33 v-model="form.startTime"
30 value-format="yyyy/MM/dd HH:mm:ss" 34 value-format="yyyy/MM/dd HH:mm:ss"
31 type="datetimerange" 35 ></el-date-picker>
32 range-separator="至" 36 </el-form-item>
33 start-placeholder="开始日期" 37 </el-col>
34 end-placeholder="结束日期" 38 <el-col :span="4">
35 > 39 <el-form-item label="结束日期" prop="endTime">
36 </el-date-picker> 40 <el-date-picker
41 type="datetime"
42 placeholder="结束日期"
43 :picker-options="pickerOptionsEnd"
44 clearable
45 v-model="form.endTime"
46 value-format="yyyy/MM/dd HH:mm:ss"
47 ></el-date-picker>
37 </el-form-item> 48 </el-form-item>
38 </el-col> 49 </el-col>
39 <!-- 操作按钮 --> 50 <!-- 操作按钮 -->
...@@ -76,13 +87,12 @@ export default { ...@@ -76,13 +87,12 @@ export default {
76 } 87 }
77 }, 88 },
78 }, 89 },
79 // 搜索表单
80 valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
81 recTypeArr: [], 90 recTypeArr: [],
82 chartData: [], 91 chartData: [],
92 // 搜索表单
83 form: { 93 form: {
84 startTime: "", 94 startTime: getFirstDayOfSeason(),
85 endTime: "", 95 endTime: timeFormat(new Date(),true),
86 qxdm: "", 96 qxdm: "",
87 }, 97 },
88 }; 98 };
...@@ -99,8 +109,9 @@ export default { ...@@ -99,8 +109,9 @@ export default {
99 this.recTypeArr = []; 109 this.recTypeArr = [];
100 this.chartData = []; 110 this.chartData = [];
101 let { result: res } = await business.getSuucessRate( 111 let { result: res } = await business.getSuucessRate(
102 this.valueTime[0], 112 this.form.startTime,
103 this.valueTime[1] 113 this.form.endTime,
114 this.form.qxdm
104 ); 115 );
105 this.chartData = res; 116 this.chartData = res;
106 //行政区代码过滤 117 //行政区代码过滤
...@@ -108,15 +119,17 @@ export default { ...@@ -108,15 +119,17 @@ export default {
108 res.forEach((item) => { 119 res.forEach((item) => {
109 this.recTypeArr.push(item.recTypeName); 120 this.recTypeArr.push(item.recTypeName);
110 }); 121 });
111 this.echartInit(); 122 this.$nextTick(() => {
123 // 初始化图表
124 this.echartInit();
125 });
112 }, 126 },
113 // 重置 127 // 重置
114 resetForm() { 128 resetForm() {
115 this.form = { 129 this.form = {
116 startTime: "", 130 startTime: getFirstDayOfSeason(),
117 endTime: "", 131 endTime: timeFormat(new Date(),true),
118 }; 132 };
119 this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
120 this.getSuucessRate(); 133 this.getSuucessRate();
121 }, 134 },
122 echartInit() { 135 echartInit() {
...@@ -206,7 +219,7 @@ export default { ...@@ -206,7 +219,7 @@ export default {
206 color: "#fff", 219 color: "#fff",
207 fontSize: "16", 220 fontSize: "16",
208 }, 221 },
209 interval: 5, 222 splitNumber:4,
210 axisLabel: { 223 axisLabel: {
211 formatter: "{value} %", 224 formatter: "{value} %",
212 textStyle: { 225 textStyle: {
...@@ -221,6 +234,7 @@ export default { ...@@ -221,6 +234,7 @@ export default {
221 { 234 {
222 name: "成功", 235 name: "成功",
223 type: "bar", 236 type: "bar",
237 barMaxWidth: '60',
224 tooltip: { 238 tooltip: {
225 valueFormatter: function (value) { 239 valueFormatter: function (value) {
226 return value + " ml"; 240 return value + " ml";
...@@ -233,6 +247,7 @@ export default { ...@@ -233,6 +247,7 @@ export default {
233 { 247 {
234 name: "失败", 248 name: "失败",
235 type: "bar", 249 type: "bar",
250 barMaxWidth: '60',
236 tooltip: { 251 tooltip: {
237 valueFormatter: function (value) { 252 valueFormatter: function (value) {
238 return value + " ml"; 253 return value + " ml";
...@@ -245,6 +260,7 @@ export default { ...@@ -245,6 +260,7 @@ export default {
245 { 260 {
246 name: "成功率", 261 name: "成功率",
247 type: "line", 262 type: "line",
263 barMaxWidth: '60',
248 yAxisIndex: 1, 264 yAxisIndex: 1,
249 tooltip: { 265 tooltip: {
250 valueFormatter: function (value) { 266 valueFormatter: function (value) {
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-row> 7 <el-row>
8 <el-col :span="6"> 8 <el-col :span="4">
9 <el-form-item label="行政区"> 9 <el-form-item label="行政区">
10 <el-select 10 <el-select
11 v-model="form.XZQDM" 11 v-model="form.qxdm"
12 class="width100" 12 class="width100"
13 clearable 13 clearable
14 placeholder="行政区" 14 placeholder="行政区"
...@@ -23,35 +23,50 @@ ...@@ -23,35 +23,50 @@
23 </el-select> 23 </el-select>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="8"> 26 <el-col :span="4">
27 <el-form-item label="开始日期"> 27 <el-form-item label="开始日期" prop="startTime">
28 <el-date-picker 28 <el-date-picker
29 v-model="valueTime" 29 type="datetime"
30 type="datetimerange" 30 placeholder="开始日期"
31 range-separator="至" 31 :picker-options="pickerOptionsStart"
32 start-placeholder="开始日期" 32 clearable
33 end-placeholder="结束日期" 33 v-model="form.startTime"
34 > 34 value-format="yyyy/MM/dd HH:mm:ss"
35 </el-date-picker> 35 ></el-date-picker>
36 </el-form-item>
37 </el-col>
38 <el-col :span="4">
39 <el-form-item label="结束日期" prop="endTime">
40 <el-date-picker
41 type="datetime"
42 placeholder="结束日期"
43 :picker-options="pickerOptionsEnd"
44 clearable
45 v-model="form.endTime"
46 value-format="yyyy/MM/dd HH:mm:ss"
47 ></el-date-picker>
36 </el-form-item> 48 </el-form-item>
37 </el-col> 49 </el-col>
38 <!-- 操作按钮 --> 50 <!-- 操作按钮 -->
39 <el-col :span="3" class="btnColRight"> 51 <el-col :span="3" class="btnColRight">
40 <btn nativeType="cz" @click="resetForm">重置</btn> 52 <btn nativeType="cz" @click="resetForm">重置</btn>
41 <btn nativeType="cx">查询</btn> 53 <btn nativeType="cx" @click="getProcessCounts">查询</btn>
42 </el-col> 54 </el-col>
43 </el-row> 55 </el-row>
44 </el-form> 56 </el-form>
45 </div> 57 </div>
46 <!-- 图表 --> 58 <!-- 图表 -->
47 <div class="form-clues-content echarts-box"> 59 <div class="form-clues-content echarts-box" v-if="chartData.length">
48 <div id="myChart" class="chart"></div> 60 <div id="myChart" class="chart"></div>
49 </div> 61 </div>
62 <div class="form-clues-content echarts-box center" v-else>暂无数据</div>
50 </div> 63 </div>
51 </template> 64 </template>
52 65
53 <script> 66 <script>
54 import { mapGetters } from "vuex"; 67 import { mapGetters } from "vuex";
68 import efficient from "@/api/efficient";
69 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
55 export default { 70 export default {
56 name: "jktj", 71 name: "jktj",
57 data() { 72 data() {
...@@ -74,21 +89,37 @@ export default { ...@@ -74,21 +89,37 @@ export default {
74 }, 89 },
75 // 搜索表单 90 // 搜索表单
76 valueTime: "", 91 valueTime: "",
92 // 搜索表单
77 form: { 93 form: {
78 startTime: "", 94 startTime: getFirstDayOfSeason(),
79 endTime: "", 95 endTime: timeFormat(new Date(),true),
80 XZQDM: "", 96 qxdm: "",
81 }, 97 },
98 chartData:[]
82 }; 99 };
83 }, 100 },
84 mounted() { 101 mounted() {
85 // 初始化图表 102 // 查询业务量
86 this.echartInit(); 103 this.getProcessCounts();
87 }, 104 },
88 computed: { 105 computed: {
89 ...mapGetters(["dicData"]), 106 ...mapGetters(["dicData"]),
90 }, 107 },
91 methods: { 108 methods: {
109 async getProcessCounts(){
110 this.chartData = [];
111 let { result: res } = await efficient.getProcessCounts(
112 this.form.startTime,
113 this.form.endTime,
114 this.form.qxdm
115 );
116 //获取图表配置项需要的数据
117 this.chartData = res;
118 this.$nextTick(() => {
119 // 初始化图表
120 this.echartInit(this.chartData)
121 });
122 },
92 // 重置 123 // 重置
93 resetForm() { 124 resetForm() {
94 this.form = { 125 this.form = {
...@@ -96,7 +127,8 @@ export default { ...@@ -96,7 +127,8 @@ export default {
96 endTime: "", 127 endTime: "",
97 }; 128 };
98 }, 129 },
99 echartInit() { 130 //图表渲染
131 echartInit(chartArr) {
100 // 基于准备好的dom，初始化echarts实例 132 // 基于准备好的dom，初始化echarts实例
101 let myChart = this.$echarts.init(document.getElementById("myChart")); 133 let myChart = this.$echarts.init(document.getElementById("myChart"));
102 // 绘制图表 134 // 绘制图表
...@@ -108,7 +140,6 @@ export default { ...@@ -108,7 +140,6 @@ export default {
108 textStyle: { 140 textStyle: {
109 fontSize: 16, // 字体大小 141 fontSize: 16, // 字体大小
110 }, 142 },
111 extraCssText: "width:220px;height:160px;", // 背景色
112 }, 143 },
113 grid: { 144 grid: {
114 top: 120, 145 top: 120,
...@@ -116,14 +147,7 @@ export default { ...@@ -116,14 +147,7 @@ export default {
116 xAxis: [ 147 xAxis: [
117 { 148 {
118 type: "category", 149 type: "category",
119 data: [ 150 data: chartArr.map(item=>item.recTypeName),
120 "土地所有权",
121 "建设用地、宅基地使用权",
122 "构（建）筑物所有权",
123 "林权",
124 "注销登记",
125 "抵押权登记",
126 ],
127 axisLabel: { 151 axisLabel: {
128 interval: 0, 152 interval: 0,
129 formatter: function (val) { 153 formatter: function (val) {
...@@ -151,7 +175,7 @@ export default { ...@@ -151,7 +175,7 @@ export default {
151 textStyle: { 175 textStyle: {
152 show: true, 176 show: true,
153 color: "#fff", 177 color: "#fff",
154 fontSize: "20", 178 fontSize: "16",
155 }, 179 },
156 }, 180 },
157 }, 181 },
...@@ -175,8 +199,9 @@ export default { ...@@ -175,8 +199,9 @@ export default {
175 ], 199 ],
176 series: [ 200 series: [
177 { 201 {
178 data: [200, 120, 150, 80, 70, 30], 202 data: chartArr.map(item=>item.counts),
179 type: "bar", 203 type: "bar",
204 barMaxWidth: '60',
180 }, 205 },
181 ], 206 ],
182 }); 207 });
...@@ -193,6 +218,11 @@ export default { ...@@ -193,6 +218,11 @@ export default {
193 .rows { 218 .rows {
194 margin-left: 100px; 219 margin-left: 100px;
195 } 220 }
221 .center {
222 line-height: 50vh;
223 text-align: center;
224 color:#b6b5b5
225 }
196 .echarts-box { 226 .echarts-box {
197 display: flex; 227 display: flex;
198 justify-content: center; 228 justify-content: center;
......