用Vue整合Echarts做数据展示：整合Axios,前后端交互

之前整合Echarts的时候，数据是写死的。为了达到动态的效果，我们只能通过后端生产数据，然后让前端展示。

1. npm i axios --save

2. 定义交互接口config.js和char.js

config.js

import axios from "axios"
// 定义后端地址
const SERVER_BASE = "http://127.0.0.1:8080/api"

// 创建一个http连接
let link = axios.create()

export {
  SERVER_BASE,
  link
}

char.js

import { SERVER_BASE, link } from "@/api/config";
export default {
  // 定义接口，向后端发送一个get请求，请求地址是127.0.0.1:8080/api/query_info
  // 并返回收到的结果
  getData () {
    return link.get(SERVER_BASE + "/query_info")
  }
}

char1.vue

<script>
 //引入api
import charapi from "@/api/char";
var echarts = require('echarts');
export default {
  data () {
      //...省略
  },
  methods: {
    draw () {
      let that = this;
        //通过Api请求后端接口，返回的结果会自动给resp变量
        //因为不需要传参，所以getData()不用写参数
      charapi.getData().then(function (resp) {
          //如果返回状态码是200
        if (resp.data.code == 200) {
            //就将数据更改
          that.option.series.data = resp.data.data;
        }
      });
      let myChart = echarts.init(document.getElementById('main'));
      myChart.setOption(this.option, true)
    }

  },
  watch: {
    //数据变化时自动重画，在控制台修改message,会自动重画
    message: function () {
      this.draw();
    }
  },
  mounted () {
    this.draw();
  }
}
</script>

这样，每次画图之前都会去后端请求新数据，如果请求成功，图的数据就会变化。