首页图表

src/views/wel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="boxswai">
-    <div class="boxnei">
+    <div class="boxnei flex flex-d-c">
       <el-menu
         :default-active="activeIndex"
         class="el-menu-demo"
@@ -15,7 +15,7 @@
           :disabled="!menuTag"
         >所有代办工单</el-menu-item>
       </el-menu>
-      <div class="information">
+      <div class="information flex1">
         <el-collapse v-show="activeIndex==1">
           <el-collapse-item
             :name="item.title"
@@ -73,39 +73,71 @@
           </el-collapse-item>
         </el-collapse>
       </div>
-      <div class="visualization flexBetween">
-        <div>
+      <el-row :gutter="20" class="mg-t-20">
+        <el-col :span="8">
+          <div class="chart-title">证书统计(总计362个)</div>
           <div id="container"></div>
-        </div>
-        <div>
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-title">人员账户统计(总计1365位)</div>
           <div id="container2"></div>
-        </div>
-        <div>
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-title">
+            <span>维护类型统计汇总</span>
+            <el-select v-model="value" placeholder="请选择项目" size="small">
+              <el-option
+                v-for="item in projectList"
+                :key="item.id"
+                :label="item.projectName"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
           <div id="container3"></div>
-        </div>
-      </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script>
 // 引入统计图
-import { Line, Column, Pie } from '@antv/g2plot';
+import { Area, Column, Pie } from '@antv/g2plot';
 import { queryBusinessUserOpinion, queryBusinessUserOpinionAll } from '@/api/news/news.js'
+import { getProjectList } from "@/api/manager/projectinfo";
 export default {
   data () {
     return {
-      LineData: [{ type: '分类一', value: 27 },
-      { type: '分类二', value: 25 },
-      { type: '分类三', value: 18 },
-      { type: '分类四', value: 15 },
-      { type: '分类五', value: 10 },
-      { type: '其他', value: 5 },],//折现统计图数据
-      ColumnData: [],//条形统计图数据
-      PieData: [],//饼图统计图数据
+      LineData: [
+        {"category": "个人证书","project": "奉建路","value": 100},
+        {"category": "企业证书","project": "奉建路","value": 150},
+        {"category": "个人证书","project": "陈油路","value": 140},
+        {"category": "企业证书","project": "陈油路","value": 100},
+        {"category": "个人证书","project": "西环线","value": 230},
+        {"category": "企业证书","project": "西环线","value": 200},
+      ],//折现统计图数据
+      ColumnData: [
+        {"category": "施工方","project": "奉建路","value": 100},
+        {"category": "监理方","project": "奉建路","value": 150},
+        {"category": "指挥部","project": "奉建路","value": 202},
+        {"category": "施工方","project": "陈油路","value": 140},
+        {"category": "监理方","project": "陈油路","value": 100},
+        {"category": "指挥部","project": "陈油路","value": 174},
+        {"category": "施工方","project": "西环线","value": 230},
+        {"category": "监理方","project": "西环线","value": 200},
+        {"category": "指挥部","project": "西环线","value": 213},
+      ],//条形统计图数据
+      PieData: [
+        { type: '业务问题', value: 100 },
+        { type: '操作问题', value: 150 },
+        { type: '系统问题', value: 130 },
+      ],//饼图统计图数据
       activeIndex: '1',
       collapseData1: [],//
       collapseData2: [],//
       menuTag: true,
+
+      projectList:[],
     }
   },
   methods: {
@@ -149,45 +181,45 @@ export default {
       this.collapseData2.splice(this.collapseData2.indexOf(this.collapseData2[key]), 1)
     },
     LineV () {
-      const Line = new Line('container', {
+      const line = new Area('container', {
         data: this.LineData,
-        xField: 'value',
-        yField: 'type',
-        height: 500,
-        // seriesField: 'category',//颜色设置
+        xField: 'project',
+        yField: 'value',
+        seriesField: 'category',
+        isStack:false,
         legend: {
-          position: 'top-left',
+          position: 'bottom',
         },
+        autoFit:true
       });
-      Line.render();
+      line.render();
     },
     ColumnV () {
       const columnPlot = new Column('container2', {
         data: this.ColumnData,
-        xField: 'type',
-        yField: 'sales',
+        isGroup: true,
+        xField: 'project',
+        yField: 'value',
+        seriesField: 'category',
+        /** 设置颜色 */
+        //color: ['#1ca9e6', '#f88c24'],
+        /** 设置间距 */
+        // marginRatio: 0.1,
         label: {
           // 可手动配置 label 数据标签位置
-          position: 'middle', // 'top', 'bottom', 'middle',
-          // 配置样式
-          style: {
-            fill: '#FFFFFF',
-            opacity: 0.6,
-          },
-        },
-        xAxis: {
-          label: {
-            autoHide: true,
-            autoRotate: false,
-          },
+          position: 'middle', // 'top', 'middle', 'bottom'
+          // 可配置附加的布局方法
+          layout: [
+            // 柱形图数据标签位置自动调整
+            { type: 'interval-adjust-position' },
+            // 数据标签防遮挡
+            { type: 'interval-hide-overlap' },
+            // 数据标签文颜色自动调整
+            { type: 'adjust-color' },
+          ],
         },
-        meta: {
-          type: {
-            alias: '类别',
-          },
-          sales: {
-            alias: '销售额',
-          },
+        legend: {
+          position: 'bottom',
         },
       });
 
@@ -203,20 +235,31 @@ export default {
         label: {
           type: 'spider',
           labelHeight: 28,
-          // content: '{name}\n{percentage}',
+          content: '{name}\n{value}',
         },
         interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+        legend: {
+          position: 'bottom',
+        },
       });
       piePlot.render();
     },
+
+    //获取项目列表
+    getProjectList() {
+      getProjectList(1, 999).then((res) => {
+        this.projectList = res.data.data.records;
+      });
+    },
   },
   created () {
     this.queryBusinessUserOpinion()
+    this.getProjectList();
   },
   mounted () {
     this.LineV()
-    // this.ColumnV()
-    // this.PieV()
+    this.ColumnV()
+    this.PieV()
   }
 }
 </script>
@@ -237,7 +280,6 @@ export default {
 }
 .information {
   margin-top: 20px;
-  height: 40%;
   background-color: #faf8fd;
 
   box-sizing: border-box;
@@ -263,4 +305,11 @@ export default {
 .visualization {
   height: calc(60% - 60px);
 }
+
+.chart-title{
+  margin-bottom: 20px;
+  font-weight: 700;
+  font-size: 18px;
+  color: rgba(119, 40, 245, 0.85);
+}
 </style>