对接图表数据库数据

web/src/api/data.js

@@ -130,3 +130,10 @@ export function login(params) {
     params
   })
 }
+export function getData(params) {
+  return request({
+    url: "http://localhost:5000/getData",
+    method: 'get',
+    params
+  })
+}

web/src/store/modules/charts.js

 const state = () => ({
   chartSettingsTitle: {
-    text: 'Initial Chart Title',  // 添加初始标题
+    text: '国民总收入',  // 添加初始标题
     top: 'top',
     left: 'left',
     show: true,

web/src/views/chartcustomization/components/chart.vue

@@ -13,6 +13,7 @@
   import { mapState }  from 'vuex';
   import { getProject, getFileList, createProject } from '@/api/data'
   import * as echarts from 'echarts';
+  import {getData} from "@/api/data"
   import Chartedit from "../chartedit.vue";
   export default {
     name: 'project',
@@ -20,12 +21,16 @@
     data() {
       return {
         myChart:null,
-
+        dataset:[],
+        XAxis:[],
+        YAxis:[],
+        value:[]
       }
     },
 
     mounted() {
-      this.init()
+      this.getdata()
+
     },
     watch:{
       chartSettingsTitle: {
@@ -40,6 +45,10 @@
         deep: true,
         handler: 'init' // 直接将方法名指定为 handler
       },
+      chartSettingsYAxis:{
+        deep: true,
+        handler: 'init' // 直接将方法名指定为 handler
+      },
       chartSettingsSeries:{
         deep: true,
         handler: 'init' // 直接将方法名指定为 handler
@@ -53,6 +62,21 @@
       ...mapState('charts', ['chartSettingsTitle','chartSettingsLegend','chartSettingsXAxis','chartSettingsYAxis','chartSettingsSeries','chartSettingsDataZoom']),
     },
     methods: {
+      getdata(){
+        const params ={"name": "国民总收入"}
+        getData(params).then(res=>{
+          this.dataset= res.data
+          let XAxis=[]
+          let value=[]
+          for(var i in res.data){
+            XAxis.push(res.data[i].year)
+            value.push(res.data[i].value)
+          }
+          this.XAxis = XAxis
+          this.value = value
+          this.init()
+        })
+      },
       addPointSetting(series){
         for (var i = 0; i < series.length; i++) {
           for (var key in this.chartSettingsSeries) {
@@ -78,36 +102,17 @@
         setOption.legend = this.chartSettingsLegend
         setOption.xAxis = this.chartSettingsXAxis
         setOption.yAxis = this.chartSettingsYAxis
-        setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        setOption.xAxis.data=this.XAxis
+        // setOption.xAxis.data=['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
         setOption.dataZoom = this.chartSettingsDataZoom
 
         setOption.series= [
           {
-            name: 'Email',
+            name: '国民总收入',
             type: 'line',
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: this.value
           },
-          {
-            name: 'Union Ads',
-            type: 'line',
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: 'Video Ads',
-            type: 'line',
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: 'Direct',
-            type: 'line',
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: 'Search Engine',
-            type: 'line',
-            stack: 'Total',
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
-          }]
+         ]
         if(this.chartSettingsSeries.showPoint==true){
           this.addPointSetting(setOption.series)
         }else {