Cause Analysis and Solution for data not displayed in echarts obtained by Ajax: ajaxecharts

Cause Analysis and Solution for data not displayed in echarts obtained by Ajax: ajaxecharts

When creating a project that requires using echarts maps, you can use ajax to obtain the data provided in the background and generate the desired JSON string. However, the data cannot be obtained in echarts option. series [0]. data. The value you obtained from the background cannot be seen on the generated map. Baidu and Bing have provided a wide variety of answers, but they still haven't solved the problem. Finally, I am here to share my answers with you. Hope to help everyone ,,,,

If you don't talk much about this nonsense, go directly to the Code:

$ (Function () {var data = []; function setOption (data) {var myChart = echarts. init (document. getElementById ('main'); // window. onresize = myChart. resize; var option = {title: {text: 'nationwide... distribution chart ', // subtext:' purely fictitious ', x: 'left'}, tooltip: {trigger: 'item'}, // legend: {// orient: 'signature', // x: 'left', // data: ['iphone3', 'iphone4', 'iphone5'] //}, dataRange: {min: 0, max: 10, x: 'left', y: 'bottom ', text: ['high', 'low'], // text, default value text color: ['# ff5e5e', '# ffa25e', '# ffd05e', '# fce6b2', '# e1dbcd'], calculable: true}, // toolbox: {// show: true, // orient: 'version', // 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; // load data for the echarts object // myChart. setOption (option); //});} // get... ranking data function getMapData (limit) {$. ajax ({url :' http://127.0.0.1/api/adminunit/score/top/ '+ Limit, type: 'post', ype: '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 = "Tianjin"; // if (dId = 1) {// dName = "Beijing "; //} 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); // execute the setOption function. Passing parameters}) ;}getmapdata (2 );});

The most important thing is that the data obtained from the backend is stored in echarts by passing parameters.

At that time, when I did not pass the parameter, the data obtained in echarts was always empty.

Articles you may be interested in:

• Javascript to obtain multiple data records (simulate ajax to obtain data)
• Ajax asynchronous data acquisition implementation code (js creates ajax objects)
• Processing Summary After JQuery ajax obtains data (html, xml, json)
• How to obtain JSON data transmitted by ExtJS. Ajax in JSP
• Sample Code for getting JSON format data using Ajax in jQuery
• Implementation of jquery's ajax and getJson cross-origin acquisition of json data
• The most simple and perfect solution to the problem of Chinese garbled characters obtained by ajax
• Node. js + Ajax: Get the data returned by the HTTP server