趋势图-模考次数

test_client/src/api/analyse.js

@@ -35,4 +35,11 @@ export function getConsumerdis() {
     url: '/analyse/consumerdis/',
     method: 'get',
   })
+}
+
+export function getMonitest() {
+  return request({
+    url: '/analyse/monitest/',
+    method: 'get',
+  })
 }

test_client/src/views/analyse/chart.vue

@@ -14,26 +14,32 @@
   <china-map :chartData="consumerdis" />
         </el-card>
             </el-col>
-        </el-row>     
+        </el-row>
+        <el-card style="margin-top:6px">
+  <line-chart :chartData="monidata" />
+        </el-card>  
     </div>
 </template>
 <script>
 import BarChart from '../components/BarChart'
 import ChinaMap from '../components/ChinaMap'
-import { getAdmindata1, getCompanydis, getConsumerdis } from '@/api/analyse'
+import LineChart from '../components/LineChart'
+import { getAdmindata1, getCompanydis, getConsumerdis, getMonitest } from '@/api/analyse'
 export default {
-    components:{BarChart, ChinaMap},
+    components:{BarChart, ChinaMap, LineChart},
     data(){
         return {
             admindata1:{},
             companydis:{},
-            consumerdis:{}
+            consumerdis:{},
+            monidata:{}
         }
     },
     created(){
         this.getadmindata1()
         this.getcompanydis()
         this.getconsumerdis()
+        this.getmonitest()
     },
     methods:{
         getadmindata1(){
@@ -50,7 +56,13 @@ export default {
             getConsumerdis().then(res=>{
                 this.consumerdis = res.data
             })
+        },
+        getmonitest(){
+            getMonitest().then(res=>{
+                this.monidata = res.data
+            })
         }
+        
     }
 }
 </script>

test_client/src/views/components/LineChart.vue

@@ -6,7 +6,7 @@
 import echarts from 'echarts'
 // require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
-
+const animationDuration = 1000;
 export default {
   mixins: [resize],
   props: {
@@ -40,7 +40,7 @@ export default {
     chartData: {
       deep: true,
       handler(val) {
-        this.setOptions(val)
+        this.initChart()
       }
     }
   },
@@ -59,15 +59,24 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
+      if (!this.chartData.s) {
+      return;
+    }
+      let series = [];
+      for (var i = 0; i < this.chartData.s.length; i++) {
+        series.push({
+          name: this.chartData.s[i].name,
+          type: "line",
+          data: this.chartData.s[i].data,
+          animationDuration,
+        });
+      }
+            this.chart.setOption({
         title:{
-          text:'趋势分析'
+          text:this.chartData.t
         },
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.chartData.x.data,
           boundaryGap: false,
           axisTick: {
             show: false
@@ -77,7 +86,7 @@ export default {
           left: 10,
           right: 10,
           bottom: 20,
-          top: 30,
+          top: 40,
           containLabel: true
         },
         tooltip: {
@@ -93,46 +102,11 @@ export default {
           }
         },
         legend: {
-          data: ['expected', 'actual']
+          data: this.chartData.l
         },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
+        series: series
       })
-    }
+    },
   }
 }
 </script>

test_server/analyse/views.py

@@ -45,14 +45,16 @@ class Monitest(APIView):
     模拟考试数据-时间分布图
     """
     def get(self, request):
-        ret = {'x':{'name':'月份', 'data':[]}, 's':[{'name':'自助模考', 'data':[]}, {'name':'押卷模考', 'data':[]}], 't':'模考次数趋势图'}
+        ret = {'x':{'name':'月份', 'data':[]}, 's':[{'name':'模考数', 'data':[]}], 't':'趋势图', 'l':['模考数']}
+        # ret = {'x':{'name':'月份', 'data':[]}, 's':[{'name':'自助模考', 'data':[]}, {'name':'押卷模考', 'data':[]}], 't':'模考次数趋势图', 'l':['自助模考', '押卷模考']}
         tmp = ExamTest.objects.exclude(consumer__create_admin__isnull=True)\
             .annotate(create_month=ExtractMonth('create_time'), create_year=ExtractYear('create_time'))\
-                .values('create_month', 'create_year', 'type').order_by('create_year', 'create_month').annotate(total=Count('create_month'))
+                .values('create_month', 'create_year').order_by('create_year', 'create_month').annotate(total=Count('create_month'))
         for i in tmp:
-            if str(i['create_year'])+'年'+str(i['create_month'])+'月' not in ret['x']['data']:
-                ret['x']['data'].append(str(i['create_year'])+'年'+str(i['create_month'])+'月')
-            
+            # if str(i['create_year'])+'年'+str(i['create_month'])+'月' not in ret['x']['data']:
+            ret['x']['data'].append(str(i['create_year'])+'年'+str(i['create_month'])+'月')
+            # if i['type'] == '自助模考':
+            ret['s'][0]['data'].append(i['total'])
         return Response(ret)
 
 nameMap = {