更新

src/views/home.vue

@@ -50,6 +50,7 @@ export default {
     ...count(['query']),
     async search() {
       let res = await this.query();
+
       // 柱状图
       //levelexit:退出;
       //levelqj:请假;
@@ -61,7 +62,9 @@ export default {
 
       //饼形图,哪个学校多少人
       //schstu:学校上报人数;
+
       if (this.$checkRes(res)) this.$set(this, `data`, res.data);
+
       this.loading = false;
     },
   },

src/views/home/iscome.vue

@@ -1,24 +1,29 @@
 <template>
   <div id="iscome">
-    <div id="chartPie" style="height:350px;"></div>
+    <div id="chartPie" style="height:400px;"></div>
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
-import echarts from 'echarts/lib/echarts';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/markPoint';
-import 'echarts/lib/component/tooltip';
+
+import { Ring } from '@antv/g2plot';
+// import echarts from 'echarts/lib/echarts';
+// import 'echarts/lib/chart/pie';
+// import 'echarts/lib/component/title';
+// import 'echarts/lib/component/legend';
+// import 'echarts/lib/component/toolbox';
+// import 'echarts/lib/component/markPoint';
+// import 'echarts/lib/component/tooltip';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'iscome',
   props: {
     istrain: { type: Number, default: 0 },
     nottrain: { type: Number, default: 0 },
+    // data: { type: [Object, Array], default: () => [] },
+    // axis: { type: Object, default: () => {} },
+    // gid: { type: String, default: `${new Date().getTime()}` },
   },
   components: {},
   data: function() {
@@ -32,38 +37,80 @@ export default {
     });
   },
   methods: {
-    init(type) {
-      this.myPie = echarts.init(document.getElementById('chartPie'));
-      const option = {
-        title: { text: '当前学生参加培训情况' },
-        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
-        legend: {
-          data: ['已参加培训', '未参加培训'],
+    init() {
+      const data = [
+        {
+          type: '已参加培训',
+          value: this.istrain,
+          itemStyle: { color: '#7cb5ec' },
         },
-        series: [
-          {
-            name: '统计',
-            label: {
-              show: true,
-              position: 'top',
-            },
-            type: 'pie',
-            data: [
-              { name: '已参加培训', value: this.istrain, itemStyle: { color: '#7cb5ec' } },
-              { name: '未参加培训', value: this.nottrain, itemStyle: { color: '#ffa94b' } },
-            ],
-            animationType: 'scale',
-          },
-        ],
-        toolbox: {
-          show: true,
-          feature: {
-            dataView: { readOnly: false },
-            saveAsImage: {},
+        {
+          type: '未参加培训',
+          value: this.nottrain,
+          itemStyle: { color: '#ffa94b' },
+        },
+      ];
+      const ringPlot = new Ring(document.getElementById('chartPie'), {
+        forceFit: true,
+        radius: 0.8,
+        data,
+        angleField: 'value',
+        colorField: 'type',
+        title: {
+          visible: true,
+          text: '当前学生参加培训情况',
+          style: {
+            fontSize: 30,
+            fill: 'black',
           },
         },
-      };
-      this.myPie.setOption(option);
+      });
+      ringPlot.render();
+      // const columnPlot = new Column(document.getElementById('container'), {
+      //   title: {
+      //     visible: true,
+      //     text: '图表标题及描述',
+      //   },
+      //   description: {
+      //     visible: true,
+      //     text: '这是一个关于配置图表标题和描述文本内容的demo',
+      //   },
+      //   data,
+      //   xField: 'year',
+      //   yField: 'value',
+      // });
+
+      //   this.myPie = echarts.init(document.getElementById('chartPie'));
+      //   const option = {
+      //     title: { text: '当前学生参加培训情况' },
+      //     tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+      //     legend: {
+      //       data: ['已参加培训', '未参加培训'],
+      //     },
+      //     series: [
+      //       {
+      //         name: '统计',
+      //         label: {
+      //           show: true,
+      //           position: 'top',
+      //         },
+      //         type: 'pie',
+      //         data: [
+      //           { name: '已参加培训', value: this.istrain, itemStyle: { color: '#7cb5ec' } },
+      //           { name: '未参加培训', value: this.nottrain, itemStyle: { color: '#ffa94b' } },
+      //         ],
+      //         animationType: 'scale',
+      //       },
+      //     ],
+      //     toolbox: {
+      //       show: true,
+      //       feature: {
+      //         dataView: { readOnly: false },
+      //         saveAsImage: {},
+      //       },
+      //     },
+      //   };
+      //   this.myPie.setOption(option);
     },
   },
   computed: {

src/views/home/leave.vue

@@ -6,14 +6,7 @@
 
 <script>
 import _ from 'lodash';
-import echarts from 'echarts/lib/echarts';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/markPoint';
-import 'echarts/lib/component/tooltip';
+import { Column } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'leave',
@@ -34,53 +27,91 @@ export default {
   },
   methods: {
     init() {
-      const option = {
-        title: { text: '请假/退出统计' },
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['请假/退出统计'],
+      const data = [
+        {
+          type: '请假',
+          sales: this.qj,
         },
-        xAxis: {
-          boundaryGap: true,
-          // nameLocation: 'center',
-          data: ['请假', '退出'],
+        {
+          type: '退出',
+          sales: this.exit,
         },
-        yAxis: {},
-        series: [
-          {
-            name: '请假',
-            step: true,
-            label: {
-              show: true,
-              position: 'top',
-            },
-            type: 'bar',
-            data: [this.qj],
-            color: ['#333ceb'],
+      ];
+
+      const columnPlot = new Column(document.getElementById('chartLinebar'), {
+        title: {
+          visible: true,
+          text: '请假/退出统计',
+          style: {
+            fontSize: 30,
+            fill: 'black',
           },
-          {
-            name: '退出',
-            label: {
-              show: true,
-              position: 'top',
-            },
-            type: 'bar',
-            data: [this.exit],
-            color: ['#acaecce'],
+        },
+        forceFit: true,
+        data,
+        padding: 'auto',
+
+        xField: 'type',
+        yField: 'sales',
+        meta: {
+          type: {
+            alias: '类别',
           },
-        ],
-        toolbox: {
-          show: true,
-          feature: {
-            dataView: { readOnly: false },
-            saveAsImage: {},
-            restore: {},
-            // magicType: { type: ['bar'] },
+          sales: {
+            alias: '人数',
           },
         },
-      };
-      this.mychart = echarts.init(document.getElementById('chartLinebar'));
-      this.mychart.setOption(option);
+      });
+
+      columnPlot.render();
+
+      // const option = {
+      //   title: { text: '请假/退出统计' },
+      //   tooltip: { trigger: 'axis' },
+      //   legend: {
+      //     data: ['请假/退出统计'],
+      //   },
+      //   xAxis: {
+      //     boundaryGap: true,
+      //     // nameLocation: 'center',
+      //     data: ['请假', '退出'],
+      //   },
+      //   yAxis: {},
+      //   series: [
+      //     {
+      //       name: '请假',
+      //       step: true,
+      //       label: {
+      //         show: true,
+      //         position: 'top',
+      //       },
+      //       type: 'bar',
+      //       data: [this.qj],
+      //       color: ['#333ceb'],
+      //     },
+      //     {
+      //       name: '退出',
+      //       label: {
+      //         show: true,
+      //         position: 'top',
+      //       },
+      //       type: 'bar',
+      //       data: [this.exit],
+      //       color: ['#acaecce'],
+      //     },
+      //   ],
+      //   toolbox: {
+      //     show: true,
+      //     feature: {
+      //       dataView: { readOnly: false },
+      //       saveAsImage: {},
+      //       restore: {},
+      //       // magicType: { type: ['bar'] },
+      //     },
+      //   },
+      // };
+      // this.mychart = echarts.init(document.getElementById('chartLinebar'));
+      // this.mychart.setOption(option);
     },
   },
   computed: {

src/views/home/school.vue

@@ -1,18 +1,12 @@
 <template>
   <div id="school">
-    <div id="schoolPie" style="height:350px;"></div>
+    <div id="schoolPie" style="height:400px;"></div>
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
-import echarts from 'echarts/lib/echarts';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/markPoint';
-import 'echarts/lib/component/tooltip';
+import { Ring } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'school',
@@ -31,38 +25,59 @@ export default {
     });
   },
   methods: {
-    init(type) {
-      let data = this.school.map(i => {
-        return { name: i.schname, value: i.schnum };
+    init() {
+      let datas = this.school.map(i => {
+        return { type: i.schname, value: i.schnum };
       });
-      this.myPie = echarts.init(document.getElementById('schoolPie'));
-      const option = {
-        title: { text: '学校上报统计' },
-        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
-        legend: {
-          data: data.map(i => i.name),
-        },
-        series: [
-          {
-            name: '统计',
-            label: {
-              show: true,
-              position: 'top',
-            },
-            type: 'pie',
-            data: data,
-            animationType: 'scale',
-          },
-        ],
-        toolbox: {
-          show: true,
-          feature: {
-            dataView: { readOnly: false },
-            saveAsImage: {},
+
+      console.log(datas);
+
+      const data = datas;
+      const ringPlot = new Ring(document.getElementById('schoolPie'), {
+        forceFit: true,
+        radius: 0.8,
+        data,
+        angleField: 'value',
+        colorField: 'type',
+        title: {
+          visible: true,
+          text: '学校上报统计',
+
+          style: {
+            fontSize: 30,
+            fill: 'black',
           },
         },
-      };
-      this.myPie.setOption(option);
+      });
+      ringPlot.render();
+      // this.myPie = echarts.init(document.getElementById('schoolPie'));
+      // const option = {
+      //   title: { text: '学校上报统计' },
+      //   tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+      //   legend: {
+      //     data: data.map(i => i.name),
+      //   },
+      //   series: [
+      //     {
+      //       name: '统计',
+      //       label: {
+      //         show: true,
+      //         position: 'top',
+      //       },
+      //       type: 'pie',
+      //       data: data,
+      //       animationType: 'scale',
+      //     },
+      //   ],
+      //   toolbox: {
+      //     show: true,
+      //     feature: {
+      //       dataView: { readOnly: false },
+      //       saveAsImage: {},
+      //     },
+      //   },
+      // };
+      // this.myPie.setOption(option);
     },
   },
   computed: {