xiaodaocao
xiaodaocao
这家伙很懒,什么也没写!

注册于 2年前

回答
3
文章
0
关注者
0

需要了解VUE文件的基本格式
<template></template>
<script></script>
......
比如 在template中使用Elementplus

<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
  <line-chart :chart-data="lineChartData" />
</el-row>

引入了lineChartData

那么 在<script>中
类似 这样写

<script>
import axios from 'axios';
import LineChart from "./dashboard/LineChart";

const defaultLineChartData = {
 newVisitis: {
   expectedData: [50,50,50,50,50,50,50],
   actualData: [50,50,50,50,50,50,50],
 }
};
export default {
 name: "DashboardAdmin",
 components: {
   LineChart,
 },
 data() {
   return {
     lineChartData: defaultLineChartData.newVisitis
   };
 },
 mounted() 
   this.getData();
 },
 methods: {
   handleSetLineChartData(type) {
     this.lineChartData = defaultLineChartData[type];
   },
   getData() {
     axios.get('/test.json').then(response => {
       console.log(response.data.actualData);
       this.lineChartData =response.data      });

     // setTimeout(() => { 
     //   const data = {
     //     "expectedData": [100, 80, 161, 134, 105, 60, 165],
     //     "actualData": [120, 50, 91, 190, 162, 20, 130]
     //   }
     //   this.lineChartData = data;
     // }, 3000)
   },
 }
};
</script>

刚好我会.
在这个VUE中这样输入:

这里输入代码 mounted() {//此处调用函数

this.getData();

},
methods: {

handleSetLineChartData(type) {
  this.lineChartData = defaultLineChartData[type];
},
getData() {
  axios.get('http://xxx/test.json').then(response => {
    console.log(response.data.actualData);
    this.lineChartData =response.data;//把返回的数据给linechart
  });

  // setTimeout(() => { 
  //   const data = {
  //     "expectedData": [100, 80, 161, 134, 105, 60, 165],
  //     "actualData": [120, 50, 91, 190, 162, 20, 130]
  //   }
  //   this.lineChartData = data;
  // }, 3000)
},

}
};

发布
问题