Vue+ECharts+关系图（异步请求数据）

Vue+ECharts+关系图（异步请求数据）

---

上一篇Vue+ECharts+关系图记录了如何加载在Vue里使用ECharts绘画关系图，但是，应用时一般不会写死数据，然后去做数据可视化。这时就需要做异步请求以及数据处理了。

废话不多说，先上图：

项目view是这样，现在就来记录如何“画出这种图”!

理一下思路：

1.定义一个数据变量graph_data用来接收数据

异步请求获得的数据经过处理后存入该变量中，作最后传值用，如下：

<script>
export default {
    data() {
    	return {
      	graph_data: {},
    	};
  	},
}
</script>

2.异步请求axios获取数据并做数据处理

使用axios.get异步请求获取数据。首当其冲，我们需要保证成功get到。现在一般是前后端分离，因而后端给了接口之后，只要接口能够正常访问，无误情况下，就能通过后端给的API成功get到数据。但是，在开发环境下，我们不可避免地会出现跨域请求问题。那什么是跨域呢？

在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是跨域请求。

哪些情况造成跨域?
1） 域名不同 （域名访问和ip访问也造成跨域）
    http://www.example.com (117.34.1.1)
    http://117.34.1.1

    http://www.example.com
    http://www.case.com

2） 子域名不同
    http://www.example.com
    http://e.example.com

3） 端口不同
    http://www.example.com(:80)
    http://www.example.com:8080

4） 协议不同
    http://www.example.com
    https://www.example.com

浏览器的同源策略(这块翻译的javascript同源有误) https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

引自*什么是跨域请求?（by天下为景晨帆起航）*

有问题自然就有解决办法，vue里设置了proxy属性就是专门用来解决跨域问题的。在vue-cli@2.x（vue init）创建的vue项目里config目录下index.js里开发环境dev下有一个proxyTable属性，配置好即可。倘若使用的vue-cli@3.x

及以上（vue create）创建的项目，新建一个vue.config.js再配置proxy即可。

这里贴上配置代码：

前端配置：

module.exports = {
   
    dev:{
   
        proxyTable: {
   
            "/api": {
   
                target