BUG

operationSupport/src/views/newWorkBench/components/PatrolProblem.vue

@@ -30,7 +30,7 @@
   </div>
 </template>
 <script>
-import { columnOptionsChartName } from './indexOptionChart';
+import { columnOptionsChartNameTilt } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 export default {
   mixins: [permissionComponent],
@@ -45,7 +45,7 @@ export default {
         queryDate: ''
       },
       queryDate: '',
-      clientOptions: columnOptionsChartName(
+      clientOptions: columnOptionsChartNameTilt(
         '(个)',
         ['name1', 'name2', 'name3'],
         [
@@ -68,39 +68,6 @@ export default {
     };
   },
   methods: {
-    // getData () {
-    //   this.$http.get('/czc-community/statisticPatrolPersonnelDuration', this.mixins_query).then(({ data, msg, status }) => {
-    //     if (status == 0 && !!data.length) {
-    //       let name = [];
-    //       data.map((item) => {
-    //         name.push(item.name);
-    //         item.data = item.data.toFixed(2);
-    //       });
-    //       this.clientOptions = columnOptionsChartName('(小时)', name, data, [], 10);
-    //     } else {
-    //       this.clientOptions = columnOptionsChartName(
-    //         '(小时)',
-    //         ['name1', 'name2', 'name3'],
-    //         [
-    //           {
-    //             name: 'name1',
-    //             data: 0
-    //           },
-    //           {
-    //             name: 'name2',
-    //             data: 0
-    //           },
-    //           {
-    //             name: 'name3',
-    //             data: 0
-    //           }
-    //         ],
-    //         [],
-    //         10
-    //       );
-    //     }
-    //   });
-    // },
     changeTime (v) {
       this.mixins_query.queryDate = v;
       this.getData();
@@ -117,7 +84,7 @@ export default {
               data: item.count
             })
           })
-          this.clientOptions = columnOptionsChartName('(个)', name, resDate, [], 10);
+          this.clientOptions = columnOptionsChartNameTilt('(个)', name, resDate, [], 10);
         }
       })
     }

operationSupport/src/views/newWorkBench/components/indexOptionChart.js

@@ -530,6 +530,168 @@ export const columnOptionsChartName = (name = '', xAxis = [], series = [], color
             },
             axisLabel: {
                 // interval: 0,
+                rotate: 45,
+                formatter: function (params, index) {
+                    console.log('88888', params);
+                    if (params.length > 5) {
+                        return `${params.slice(0, 3)}...`;
+                    } else {
+                        return params;
+                    }
+                    // return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: false,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};
+
+//柱状name  单柱状  x轴倾斜
+export const columnOptionsChartNameTilt = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[0].data.push(item.data);
+        });
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>${item.name}：${item.value}${name}</span>
+                      </p>`;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 10,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                // interval: 0,
+                rotate: 45,
                 formatter: function (params, index) {
                     console.log('88888', params);
                     if (params.length > 5) {