• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串。但是,放到echarts option.series[0].data里,获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应,给出的答案五花八门,仍旧未解决问题,最后还是一个同事大牛给解决的,在此分享给大家。希望对大家有帮助,,,,

    废话不多说,直接上码:

    $(function () { 
    var data = [];
    function setOption(data){
    var myChart = echarts.init(document.getElementById('main'));
    //window.onresize = myChart.resize;
    var option = {
    title : {
    text: '全国...分布图',
    // subtext: '纯属虚构',
    x:'left'
    },
    tooltip : {
    trigger: 'item'
    },
    // legend: {
    // orient: 'vertical',
    // x:'left',
    // data:['iphone3','iphone4','iphone5']
    // },
    dataRange: {
    min: 0,
    max: 10,
    x: 'left',
    y: 'bottom',
    text:['高','低'], // 文本,默认为数值文本
    color:['#ff5e5e', '#ffa25e', '#ffd05e','#fce6b2','#e1dbcd'],
    calculable : true
    },
    // toolbox: {
    // show: true,
    // orient : 'vertical',
    // x: 'right',
    // y: 'center',
    // feature : {
    // mark : {show: true},
    // dataView : {show: true, readOnly: false},
    // restore : {show: true},
    // saveAsImage : {show: true}
    // }
    // },
    // roamController: {
    // show: true,
    // x: 'right',
    // mapTypeControl: {
    // 'china': true
    // }
    // },
    series : [
    {
    name: '...',
    type: 'map',
    mapType: 'china',
    roam: false,
    itemStyle:{
    normal:{label:{show:true}},
    emphasis:{label:{show:true}}
    },
    data:data
    }
    ]
    };
    myChart.setOption(option);
    //$.getJSON('HotspotServlet',function(data){
    //option.series[0].data=data.result;
    // 为echarts对象加载数据 
    //myChart.setOption(option);
    //});
    }
    //获取...排行数据
    function getMapData(limit){ 
    $.ajax({
    url:'http://127.0.0.1/api/adminunit/score/top/'+limit,
    type:'post',
    dataType:'JSON',
    success:function(objdata){
    //var str = JSON.parse(objdata);
    for(var i = 0;i  objdata.length;i ++){
    var dId = parseInt(objdata[i].id);
    //var dName="天津市";
    //if(dId==1){
    // dName="北京市";
    //}
    var dName = objdata[i].name;
    var dScore = parseInt(objdata[i].score);
    var oneData = {};
    var oneData = {id:dId,name:dName,value:dScore};
    data.push(oneData);
    }
    console.log(data);
    //option.series[0].data=data;
    setOption(data);//执行setOption函数。传参
    }
    });
    }
    getMapData(2);
    });

    里面最重要的就是从后台获取到的数据是通过传参的形式放到echarts里的。

    当时我做的时候未通过传参的形式,在echarts里获取到的数据始终是空的。

    您可能感兴趣的文章:
    • echarts图表导出excel示例
    • echarts3 使用总结(绘制各种图表,地图)
    • 详解ECharts使用心得总结
    • ECharts仪表盘实例代码(附源码下载)
    • 在vue中添加Echarts图表的基本使用教程
    • 在Vue中使用echarts的实例代码(3种图)
    • jsp使用ECharts动态在地图上标识点
    • echarts学习笔记之图表自适应问题详解
    • echarts整合多个类似option的方法实例
    上一篇:通过Ajax手动解决WordPress WP-PostViews不计数的问题
    下一篇:jsp+ajax实现无刷新上传文件的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax获取到数据放入echarts里不显示的原因分析及解决办法 Ajax,获取,到,数据,放入,