nodsjs POST请求

PHP

遇到问题：

1.跨域问题 

报failed to load response data:no data fond for response with give

header("Content-Type: text/html;charset=utf-8");
header('Access-Control-Allow-Origin: *');

2.遇到这种无法读取undefined的属性(读取'getAttribute')  ，  导致些图表不出来 
echarts.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')

解决方法：  封装的JS，在页面也要转入值到JS函数里


前端

1.最大DIV加入 id="Market" v-cloak  对应el: '#Market', 才能把值写入

2.<h4>{{topCounts['order_amount_total']}}</h4>

3.循环 与IF

　　<div class="countItme" v-for="item in topCounts" v-if="item.count_name=='市场活跃度排行'">
　　　　<div class="countNum">{{item.count}}</div>
　　　　<div class="countText">{{item.count_name}}</div>
　　</div>

<script src="./js/index.js"></script>

<script src="./js/vue.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#Screen',
        data:{
            topCounts:[],
            StatisticsList:[],
            orderList:[],
            dotList:[],
            user7todayList:[],
            order7todaylist:[],  //1、定义变量
        },
        created:function(){
            var that = this;
            that.commImg = commImg();
            that.token = localStorage.getItem('caiToken');
            that.id = localStorage.getItem('id');
            that.ame = localStorage.getItem('name');
        },
        mounted:function(){
            var that = this;
            var postData = {"id":that.id,"token":that.token};

            //轮询
            lunxun = setInterval(function(){
                that.getStatistics(postData);
            },10000);

            that.getStatistics(postData,1);
            that.getStatistics_list(postData,1);
            that.order_list(postData,1);
            that.doc_list(postData,1);
            that.user7today_list(postData,1);
            that.order7today_list(postData,1);  //定义函数
        },
        methods:{
            getStatistics:function(postData,curIndex){
                var that = this;
                that.getData('statistics',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.topCounts = res;
                    }
                    that.$forceUpdate()//强制刷新

                });
            },

            getStatistics_list:function(postData,curIndex){
                var that = this;
                that.getData('statistics_list',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.StatisticsList = res.list;
                    }
                    that.$forceUpdate() 
                });
            },

            getData:function(aggregate,postData,onSuccess){
                var url1 = commUrl() + aggregate;
                var params = postData;
                $.post(url1,params,function(res){
                    if(res.code == -1){
                        alert(res.msg);
                    }else if(res.code == 1){
                        onSuccess(res.data);
                    }else{
                        alert(res.msg);
                        return false;
                    }
                },'json')
            },

            order_list:function(postData,curIndex){
                var that = this;
                that.getData('order_list',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.orderList = res.list;  //3.值写入变量
                    }
                    that.$forceUpdate() //强制刷新

                });
            },

            doc_list:function(postData,curIndex){
                var that = this;
                that.getData('dot',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.dotList = res.list;
                    }
                    that.$forceUpdate() //强制刷新

                });
            },

            order7today_list:function(postData,curIndex){
                var that = this;
                that.getData('order7today_list',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.user7todayList = res.list;
                    }
                    that.$forceUpdate()

                    var ledger2X=[];
                    var ledger2Y=[];
                    $.each(res.list, function(index,item) {
                        ledger2X.push(item.x2);
                        ledger2Y.push(item.x1);
                    });
                    Echart2(ledger2X,ledger2Y);
                });
            },

            user7today_list:function(postData,curIndex){
                var that = this;
                that.getData('user7today_list',postData,function(res){
                    if(res.code==0){
                        that.$forceUpdate()
                        return false;
                    }else{
                        that.user7todaylist = res.list;
                    }
                    that.$forceUpdate()
                    var ledger3X=[];
                    var ledger3Y=[];
                    $.each(res.list, function(index,item) {
                        ledger3X.push(item.x2);
                        ledger3Y.push(item.x1);
                    });
                    Echart3(ledger3X,ledger3Y);
                });
            },
        }
    });
</script>

index.js

function Echart3(xData,yData){
    // 中间省略的数据  准备三项
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        }
    };
    option = {
        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
            // 轴触发提示才有效
            axisPointer: {
                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                type: 'shadow'
            }
        },
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0',
            right: '3%',
            bottom: '3%',
            top: '5%',
            // 大小是否包含文本【类似于boxsizing】
            containLabel: true,
            //显示边框
            show: true,
            //边框颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: xData, //['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度设置
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                }
            }
        ],
        // 控制y轴
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
            }
        ],
        // 控制x轴
        series: [

            {
                // series配置
                // 颜色
                itemStyle: {
                    // 提供的工具函数生成渐变颜色
                    color: new echarts.graphic.LinearGradient(
                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#00fffb' }, // 0 起始颜色
                            { offset: 1, color: '#0061ce' }  // 1 结束颜色
                        ]
                    )
                },
                // 图表数据名称
                name: '用户统计',
                // 图表类型
                type: 'bar',
                // 柱子宽度
                barWidth: '60%',
                // 数据
                data: yData, //[2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
            }
        ]
    };
    var myechart = echarts.init($('.users .bar')[0]);
    myechart.setOption(option);
};