Quellcode durchsuchen

Merge branch 'master' of http://git.in.ahbd.net/aielab/jcxt_qd

jiangyu vor 3 Jahren
Ursprung
Commit
223810e68f
2 geänderte Dateien mit 31 neuen und 13 gelöschten Zeilen
  1. 31 9
      src/components/admin/dataEchart.vue
  2. 0 4
      src/main.js

+ 31 - 9
src/components/admin/dataEchart.vue

@@ -2,7 +2,7 @@
 <div>
     <div>
         <h2>监测任务统计</h2>
-        <div id="monitor" style="width:100%;height:400px;">
+        <div id="monitor" style="width:100%;height:400px;" ref="liXing_ref">
     </div>
     </div>
     
@@ -15,22 +15,42 @@
 export default {
     data(){
          return {
-             monitorData:'',
-             task_class:'例行监测'
+             monitorData:[],
+             queryInfo:{
+                 task_class:'例行监测'
+             }
+             
         }
     },
     created(){
 
     },
     mounted() {
-        this.stasticalTasks();
+        this.stasticalTasks();//调用接口函数
+
+        this.myChart();
     },
     methods:{
         async stasticalTasks(){
-            const result = await this.$http.post("stasticalTasks",{task_class}); 
-            this.monitorData = this.result.data.data
+            const result = await this.$http.post("stasticalTasks",this.queryInfo); 
+            if (result.data.code == 0){
+                this.monitorData = result.data.data
+               var td = []
+               for(let key in this.monitorData){
+                   td.push(this.monitorData[key])
+               }
+            console.log(td)
+            this.monitorData = td
+             this.myChart();
+            }else{
+                this.$message({
+                    type: 'error',
+                    message: '获取图表失败!'
+                });
+            }
         },
-         stasticalTasks () {
+        
+         myChart () {
 //第一步:实例化对象
             const monitorChart = this.$echarts.init(document.getElementById('monitor'))
 //第二步:指定配置项和数据            
@@ -54,6 +74,7 @@ export default {
                 {
                     type: 'category',
                     data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
+                    // data:this.xData,
                     axisTick: {
                         alignWithLabel: true //轴刻度 --与标签对齐
                     },
@@ -70,6 +91,7 @@ export default {
                 yAxis: [  
                 {
                     type: 'value',
+                    name: '数量'
                 }
                 ],
                 //
@@ -77,7 +99,7 @@ export default {
                 {
                     type: 'bar', // type值设置图表类型,bar为柱状图
                     barWidth: '30%', // 柱形的宽度
-                    data: [10, 52, 200, 334, 390 ],
+                    data:this.monitorData,
                     showBackground: true,//是否显示背景色
                     backgroundStyle: {
                         color: 'rgba(180, 180, 180, 0.2)'
@@ -85,7 +107,7 @@ export default {
                 }
                 ]
             }
-//第三步:把配置项给实例对象
+//第三步:把配置项给实例对象(绘制)
       monitorChart.setOption(monitorData)
     }
     }

+ 0 - 4
src/main.js

@@ -6,10 +6,6 @@ import router from './router'
 import './plugins/element.js'
 // 导入全局样式表
 import './assets/css/global.css'
-// 导入echarts
-// import echarts from 'echarts'
-// Vue.prototype.$echarts = echarts
-// 导入axios数据交互请求
 import axios from 'axios'
 //导入echart
 import * as echarts from 'echarts';