首页折线图

src/api/home/index.js

@@ -14,3 +14,31 @@ export function getMonthPolicyCount(params) {
     params
   });
 }
+// 需求增加趋势
+export function getMonthNeedCount(params) {
+  return request({
+    url: '/data/getMonthNeedCount',
+    params
+  });
+}
+// 解读增加趋势
+export function getMonthReadCount(params) {
+  return request({
+    url: '/data/getMonthReadCount',
+    params
+  });
+}
+// 成果增加趋势
+export function getMonthResultCount(params) {
+  return request({
+    url: '/data/getMonthResultCount',
+    params
+  });
+}
+// 客户增加趋势
+export function getMonthUserCount(params) {
+  return request({
+    url: '/data/getMonthUserCount',
+    params
+  });
+}

src/views/dashboard/LineChart.vue

@@ -61,7 +61,7 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData,keys } = {}) {
+    setOptions({ expectedData, actualData,keys,arr } = {}) {
       this.chart.setOption({
         xAxis: {
           data: keys,
@@ -94,10 +94,10 @@ export default {
           }
         },
         legend: {
-          data: []
+          data: arr
         },
         series: [{
-          name: 'expected', itemStyle: {
+          name: arr[0], itemStyle: {
             normal: {
               color: '#ff944b',
               lineStyle: {
@@ -113,7 +113,7 @@ export default {
           animationEasing: 'cubicInOut'
         },
         {
-          name: 'actual',
+          name: arr[1],
           smooth: true,
           type: 'line',
           itemStyle: {

src/views/index.vue

@@ -34,9 +34,19 @@
         </div>
       </div>
     </div>
-    <h4 style="margin:100px 0 0">政策增加趋势</h4>
+    <el-row :gutter="50">
+      <el-col :span="12">
+        <h4 style="margin:100px 0 0">政策解读趋势</h4>
+        <line-chart :chart-data="lineChartData" />
+      </el-col>
+      <el-col :span="12">
+        <h4 style="margin:100px 0 0">需求成果趋势</h4>
+        <line-chart :chart-data="lineChartData2" />
+      </el-col>
+    </el-row>
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
+      <h4 style="margin:100px 0 0">客户增加趋势</h4>
+      <line-chart :chart-data="lineChartData3" />
     </el-row>
   </div>
 </template>
@@ -44,22 +54,46 @@
 <script>
 import PanelGroup from './dashboard/PanelGroup'
 import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
 import {
   getPlatformData,
   getMonthPolicyCount,
+  getMonthNeedCount,
+  getMonthReadCount,
+  getMonthResultCount,
+  getMonthUserCount
 } from '@/api/home/index';
 export default {
   name: 'Index',
   components: {
-    PanelGroup,
-    LineChart
+    // PanelGroup,
+    LineChart,
+    // RaddarChart,
+    // PieChart,
+    // BarChart
   },
   data() {
     return {
       platData:{},
       lineChartData: {
+        arr:["政策", "解读"],
         keys:[],
-        expectedData:[]
+        expectedData:[],
+        actualData: []
+      },
+      lineChartData2: {
+        arr:["需求", "成果"],
+        keys:[],
+        expectedData:[],
+        actualData: []
+      },
+      lineChartData3: {
+        arr:['客户'],
+        keys:[],
+        expectedData:[],
+        actualData: []
       }
     };
   },
@@ -72,9 +106,28 @@ export default {
     getPlatformData().then(({data})=>{
       this.platData = data
     })
+    // 政策增加趋势
     getMonthPolicyCount().then(({data})=>{
       this.lineChartData.keys = Object.keys(data)
       this.lineChartData.expectedData = Object.values(data)
+      // 解读增加趋势
+      getMonthReadCount().then(({data:res})=>{
+        this.lineChartData.actualData = Object.values(res)
+      })
+    })
+    // 需求增加趋势
+    getMonthNeedCount().then(({data})=>{
+      this.lineChartData2.keys = Object.keys(data)
+      this.lineChartData2.expectedData = Object.values(data)
+      // 成果增加趋势
+      getMonthResultCount().then(({data:res})=>{
+        this.lineChartData2.actualData = Object.values(res)
+      })
+    }),
+    // 客户增加趋势
+    getMonthUserCount().then(({data})=>{
+      this.lineChartData3.keys = Object.keys(data)
+      this.lineChartData3.expectedData = Object.values(data)
     })
   }
 };