Echars折线图（前端如何接收后端传递的值）实现动态数据

一、前端部分

1.定义好我们需要的dom容器

<%--折线图--%>
    <div id="pBroken" style="width:1070px;height:500px;float: right;margin-left: 20px" ></div>

 2.在method方法区内的内容

我们在这里进行对后端值的接收，一般使用数组接收，将data里的死数据替换为我们后端传递给前端的活的数据。

method:{
     //第一个折线图
            priceBroken(){
                // 基于准备好的dom，初始化echarts实例
                var pBrokenData = echarts.init(document.getElementById('pBroken'));
                var that =this;
                axios.post("/statistics/pBroken").then(function (result){
                    //定义一个数组用于接收后台返回给前台的商品名字值
                    var goodsName =[];
                    //定义一个数组用于接收后台返回给前台的商品进价值
                    var inprice=[];
                    //定义一个数组用于接收后台返回给前台的商品售值
                    var outprice=[];
                    //将后台数据赋值給数组
                    /*NetStatistical=result.data.data*/
                    //循环遍历返回的数组
                    for(var i=0;i < result.data.data.length;i++){
                        //取出商品名字
                        goodsName[i]=result.data.data[i].goodsName;
                        //取出商品进价
                        inprice[i]=result.data.data[i].inprice;
                        //取出商品进价
                        outprice[i]=result.data.data[i].outprice;
                    }
                    pBrokenData.setOption({
                        title: {
                            text: '商品售价统计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['进价', '售价']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: goodsName,
                            axisLabel: {
                                interval: 0,//横轴信息全部显示
                                rotate: -65, //倾斜度 -90 至 90 默认为0
                                margin: 5, //刻度标签与轴线之间的距离
                                textStyle: {
                                    /*fontSize: 9, //横轴字体大小*/
                                    color: "#000000",//颜色
                                },
                            },
                        },
                        yAxis: {
                            type: 'value',
                            data:[500,1000,1500,2000,3000,3500]
                        },
                        series: [
                            {
                                name: '进价',
                                type: 'line',
                                stack: 'Total',
                                barWidth:'50%',
                                data: inprice,
                            },
                            {
                                name: '售价',
                                type: 'line',
                                stack: 'Total',
                                data:outprice,
                            },
                        ]
                    })

                })
            },
}

3.在mounted方法区中定义我们的折线图显示方法

mounted()方法是页面初始化完成后，加载完dom后触发

 mounted(){
            //折线图的方法
            this.priceBroken();
        },

二、后端

后端方面只需要把我们查询到的数据传递给前端即可。