vue jsonp

Vue jsonp请求数据Network status 200但打印显示undefined或者请求超时

该怎样解决呢? 第一次使用jsonp,请各位大佬带带小白

代码如下:

 jsonp('http://111.231.75.86:8000/api/provinces/CHN/',(err,data)=>{
                 if (err) {
                        console.log(err.message);
                    } else {
                        console.log(data);
                    }
                console.log(data.data.list)
                // map() 方法 
                var lists=data.data.list.map(item=>{
                    return {"provinceName":item.provinceName,currentConfirmedCount:item.currentConfirmedCount}
                });
                console.log(lists)
                option.series[0].data=lists;
                this.myChart.setOption(option);
   })

在这里插入图片描述这是network显示

在这里插入图片描述
preview

在这里插入图片描述
response

在这里插入图片描述
console.log(1)为测试

看了https://blog.csdn.net/weixin_46240162/article/details/104636592这篇文章之后
修改代码如下:

export default {
    data(){
        return{
            myChart:'',    
        }
    },
    mounted(){
        this.getData();
        this.myChart=echarts.init(document.getElementById('chart'));
        //  option
        // 使用指定的配置项和数据显示图表
        // myChart.setOption(option);
    },
    methods:{
        //真实数据获取
        // https://interface.sina.cn/mews/wap/fymap2020_data.d.json?=1580893522427
        // http://111.231.75.86:8000/api/countries/daily/?countryCodes=CHN,
        // http://111.231.75.86:8000/api/countries/CHN/  最新疫情
        getData(){
            // http://111.231.75.86:8000/api/provinces/CHN/
            // jsonp('url',function(){})
            // https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
            //  http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427
            jsonp(' http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',(err,data)=>{
               if(!err){
                    const list= data.data.list.map((item)=>{
                        return {
                            name:item.name,
                            value:item.value
                        }
                    })
                console.log(2)
                // console.log(data)
                option.series[0].data=list
                console.log(list)
                this.myChart.setOption(option) 
               }               
                }) 
            }
        }        
}

可以实现想要的效果,错误原因是之前用的api接口数据
在谷歌浏览器的调试台显示的和实际的不一致,对数据的处理方式不正确。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值