vue中,使用Echarts 怎么获取后台数据

Question

这是我前端代码：

<template>
    <div style="width:25%; background:#FFF; display:inline-block !important; ">
      <div style="height:250px;" >
        <Chart style='height:310px;' :options="data3"></Chart>
      </div>
    </div>
</template>

前端下面 引用的js 文件

import data3 from 'components/demo-components/components/datas/data3';

JS 部分:

export default {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['博士','本科','大专','中专','高中']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '45%',
            center: ['45%', '40%'],
            data:[
                {value:335, name:'博士'},
                {value:310, name:'本科'},
                {value:234, name:'大专'},
                {value:135, name:'中专'},
                {value:1548, name:'高中'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

我的问题是 如何获取后端数据库数据， 就是 在哪个地方写。 = = 搞不懂 ， 求高手给个Demo 直接砸我脸上的 那种 - -

Answer 1

这个怎么还真给不了demo，你要看后台返回的数据格式，自己对照着修改这个渲染的数据。举个简单例子，假设后台返回['博士','本科','大专','中专','高中']这个数组，那显然是替换data3的legend中的data的，将后台返回的数据直接替换不就行了吗？至于前端就用ajax获取数据,你在methods里定义一个方法就可以了。比如:

data(){
    return{
        data3:data3
    }
},
mounted(){
    //调用函数获取后台数据
    this.getLegend();
},
methods:{
    getLegend(){
        axios().then((res) => {
            //后台返回数据替换data3中对应的数据
        })
    }
}