Ajaxで取得したデータがechartsで表示されない原因の分析と解決策

echarts マップの使用が必要なプロジェクトに取り組んでいるとき、ajax を介してバックグラウンドから提供されるデータを正常に取得し、目的の JSON 文字列を生成しました。ただし、echartsのoption.series[0].dataに配置するとデータは取得できません。生成されたマップの背景から取得した値は表示されません。必要な友人はそれを参照してください。私は echarts マップの使用を必要とするプロジェクトに取り組んでいたとき、バックグラウンドで提供されたデータが ajax 経由で正常に取得され、必要な JSON 文字列が生成されます。ただし、echartsのoption.series[0].dataに配置するとデータは取得できません。背景から取得した値は、生成されたマップ上では見ることができません。 Baidu や Bing で検索したところ、さまざまな回答が得られましたが、最終的には問題は解決されませんでした。専門家である同僚が解決したので、皆さんと共有したいと思います。皆さんのお役に立てれば幸いです、、、、、

これ以上ナンセンスはなく、直接コーディングするだけです:

$(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);
});

最も重要なことは、バックグラウンドから取得されたデータがパラメーター転送の形式で echart に入れられることです。

私がそれを行ったとき、パラメータを渡さなかったので、echartsで取得されたデータは常に空でした。

上記は私があなたのためにまとめたものです。

関連記事:

Ajax 投稿リクエストのジャンプ ページ

Ajax 送信フォーム ページがすぐに更新される

Ajax が新しいウィンドウを開いてブラウザーによってブロックされる場合の 2 つの解決策

以上がAjaxで取得したデータがechartsで表示されない原因の分析と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。