项目成本对比折线图优化

src/views/module_kzks/projectContrastList/allList.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
     <!-- <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 4750 }" :pagination="ipagination" rowKey="id"> -->
-    <a-table :columns="columns" :data-source="tableData" bordered :scroll="{ x: 4750 }" :pagination="false" rowKey="id">
+    <a-table :columns="columns" :data-source="tableData" bordered :scroll="{ x:true }" :pagination="false" rowKey="id">
     </a-table>
-    <div>单选/多选</div>
-    <lineBarChart :xAxisData="xAxisData" :seriesData="seriesData" style="height: 300px;"></lineBarChart>
+    <div class="extra-item" style="margin-top: 20px;">
+      <a-button :type="selectedMode==='single'?'primary':'link'" @click="selectedMode = 'single'">单选</a-button>
+      <a-button :type="selectedMode==='multiple'?'primary':'link'" @click="selectedMode = 'multiple'">多选</a-button>
+    </div>
+    <lineBarChart :xAxisData="xAxisData" :seriesData="seriesData" :selectedMode="selectedMode" style="height: 360px;"></lineBarChart>
   </div>
   
 </template>
@@ -15,12 +18,15 @@ const columns = [
           {
             title:'任务号',
             fixed:"left",
-            dataIndex: 'taskno'
+            align:"center",
+            width: 140,
+            dataIndex: 'taskno',
           },
           {
             title:'任务名称',
             align:"center",
             fixed:"left",
+            width: 120,
             dataIndex: 'taskname'
           },
           {
@@ -247,7 +253,7 @@ const columns = [
           },
         ];
 
-const tableData = [];
+
 
 export default {
   components: { lineBarChart },
@@ -261,7 +267,7 @@ export default {
   },
   data() {
     return {
-      tableData,
+      tableData: [],
       columns,
       /* 分页参数 */
       ipagination:{
@@ -275,26 +281,26 @@ export default {
         showSizeChanger: true,
         total: 0
       },
-      // 
-      // xAxisData: [],
-      // seriesData: [
-      //   {
-      //     name: '合同数量',
-      //     data: [10, 11, 13, 11, 12, 12, 9],
-      //   },
-      //   {
-      //     name: '开票数量',
-      //     data: [112, 58, 69, 78, 99, 102],
-      //   },
-      //   {
-      //     name: '金额',
-      //     data: [33, 23, 56, 48, 46, 55],
-      //   }
-      // ]
+      selectedMode: 'single'
     };
   },
+  watch: {
+    duibiList: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.tableData = newValue
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+  },
   computed: {
     xAxisData(){
+      if(this.tableData.length === 0){
+        return []
+      }
       var data = this.tableData.map(res => {
         return res.taskno
       })
@@ -302,6 +308,9 @@ export default {
       return data
     },
     seriesData(){
+      if(this.tableData.length === 0){
+        return []
+      }
       var arr = columns.filter(cur => cur.isEcharts)
       var data = arr.map(res => {
         var liData = this.tableData.map((item) => {
@@ -318,8 +327,6 @@ export default {
     },
   },
   created(){
-    console.log(this.duibiList)
-    this.tableData = this.duibiList
   }
 };
 </script>

src/views/module_kzks/projectContrastList/components/lineBarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lineBarCharts" ref="lineBarCharts" />
+  <div class="lineBarCharts" ref="lineBarCharts"/>
 </template>
 
 <script>
@@ -14,7 +14,11 @@ export default {
     seriesData: {
       type: Array,
       default: []
-    }
+    },
+    selectedMode: {
+      type: String,
+      default: 'single' // 'multiple'
+    },
   },
   data () {
     return {
@@ -30,6 +34,17 @@ export default {
           this.setSeriesData(newValue)
         }
       },
+      deep: true,
+      // immediate: true
+    },
+    selectedMode: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.uOption.legend.selectedMode = newValue
+          this.uEcharts.setOption(this.uOption, true)
+        }
+      },
       // immediate: true
     }
   },
@@ -45,16 +60,25 @@ export default {
     initChart(){
       this.uEcharts = echarts.init(this.$refs.lineBarCharts)
 
+      // let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE','#f9c129', '#13c2c2', '#79ce42', '#f55837'];
+      // fc8452  
       this.uOption = {
         // title: {
-        //   text: '测试展示'
+        //   text: this.title + '图',
+        //   left: 'center'
         // },
+        // color: color,
         tooltip: {
           trigger: 'axis'
         },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%'
+        },
         legend: {
           selectedMode: 'single', // 单个显示
-          type: 'scroll', // 翻页显示
+          type: 'scroll',
           width: '60%',
           // orient: 'vertical',
           // right: 90,
@@ -73,11 +97,25 @@ export default {
           show: true,
           feature: {
             // dataView: { readOnly: false }, // 展示数据--不过没用
-            magicType: { type: ['bar', 'line',] },
+            magicType: { type: ['bar', 'line'] },
             // restore: {}, // 还原
             saveAsImage: {}
           }
         },
+        grid: {
+          bottom: '70px'
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          },
+          {
+            start: 0,
+            end: 100
+          }
+        ],
         xAxis: {
           type: 'category',
           // boundaryGap: true, // 解决数据溢出X轴的问题
@@ -109,24 +147,39 @@ export default {
       };
 
       this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
     },
     setSeriesData(data){
+      // console.log(this.uEcharts)
       var seriesData = data ? data : this.seriesData
-      var option = {}
-      option.series = seriesData.map(res => {
+      // console.log(seriesData)
+      // var option = this.uOption
+      this.uOption.xAxis.data = this.xAxisData
+      this.uOption.series = seriesData.map(res => {
         return {
           name: res.name,
           type: 'bar',
+          smooth: true,
           data: res.data,
         }
       })
-      this.uEcharts.setOption(option)
+      // console.log(this.uOption.series)
+      this.uEcharts.hideLoading()
+      this.uEcharts.setOption(this.uOption, true)
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.a-spin{
+  height: 100%;
+  .ant-spin-container{
+    height: 100%;
+  }
+}
 .lineBarCharts{
   width: 100%;
   height: 100%;

src/views/module_kzks/projectContrastList/wuliaoList.vue

@@ -70,28 +70,30 @@ export default {
   },
   methods: {
     getHebing(){
-        let that = this
-        let rowSpan = 0
-        let wlbm = ''
-        for (let i = that.data.length-1; i >= 0; i--) {
-            // 任务号合并
-            if (wlbm == '') {
-                that.data[i].rowSpan = 0
-                wlbm = that.data[i].wlbm
-                rowSpan++
-                } else {
-                if(wlbm == that.data[i].wlbm){
-                    that.data[i].rowSpan = 0
-                    rowSpan++
-                }else{
-                    that.data[i+1].rowSpan = rowSpan
-                    that.data[i].rowSpan = 0
-                    rowSpan = 1
-                    wlbm = that.data[i].wlbm
-                }
-            }
+      if(this.data.length === 0){
+        return
+      }
+      let rowSpan = 0
+      let wlbm = ''
+      for (let i = this.data.length-1; i >= 0; i--) {
+        // 任务号合并
+        if (wlbm == '') {
+          this.data[i].rowSpan = 0
+          wlbm = this.data[i].wlbm
+          rowSpan++
+          } else {
+          if(wlbm == this.data[i].wlbm){
+            this.data[i].rowSpan = 0
+              rowSpan++
+          }else{
+            this.data[i+1].rowSpan = rowSpan
+              this.data[i].rowSpan = 0
+              rowSpan = 1
+              wlbm = this.data[i].wlbm
+          }
         }
-        that.data[0].rowSpan = rowSpan
+      }
+      that.data[0].rowSpan = rowSpan
     }
   }
 };