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

这是我前端代码:

<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 直接砸我脸上的 那种 - -

阅读 4.1k
评论
    1 个回答
    • 2.8k

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

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

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章