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);
};
posted @   minch  阅读(83)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示