Echarts Circular pie chart dynamically get JSON data

Echarts Circular pie chart dynamically get JSON data

As follows:

I. HTML section

<div id= "Secondpiechart" style= "width:100%; height:400px; " ></div>

Two. js section

<script type= "Text/javascript" >

function Loadonecolumn () {
var mychart = echarts.init (document.getElementById (' Secondpiechart '));
Show title, legend, and empty axes
Mychart.setoption ({
Color: [' #ff7d27 ', ' #47b73d ', ' #fcc36e ', ' #57a2fd ', ' #228b22 '],//pie chart colors
Title: {
Text: "Ranking of information release",
Subtext: ' Pure fiction ',
X: ' Center '
},
ToolTip: {
Trigger: ' Item ',
Formatter: "{A} <br/>{b}: {C} ({d}%)"
},
Legend: {
Orient: ' Vertical ',
x: ' Left ',
Data: []
},
Toolbox: {
Show:true,
Feature: {
Mark: {Show:true},
DataView: {show:true, readonly:false},
Magictype: {
Show:true,
Type: [' pie ', ' funnel '],
Option: {
Funnel: {
x: ' 25% ',
Width: ' 50% ',
Funnelalign: ' Center ',
max:1548
}
}
},
Restore: {show:true},
Saveasimage: {show:true}
}
},
Calculable:true,
Series: [{
Name: ' Published rankings ',
Type: ' Pie ',
Radius: [' 50% ', ' 70% '],//Set the space size of the ring
ItemStyle: {
Normal: {
Label: {
Show:true
},
Labelline: {
Show:false
}
},
Emphasis: {
Label: {
Show:true,
Position: ' Center ',
TextStyle: {
FontSize: ' 20 ',
FontWeight: ' Bold '
}
}
}
},
Data: []
}]
});
Mychart.showloading (); Display a simple loading animation before the data is loaded
var names = []; Category Array (the category used to store the pie chart)
var brower = [];
$.ajax ({
Type: ' Get ',
URL: ' Json/chart/column/index_fbph.txt ',//address of request data
DataType: "JSON",//return data in the form of JSON
Success:function (Result) {
The function contents are executed when the request succeeds, and result is the JSON object returned by the server
$.each (result.list, function (index, item) {
Names.push (item.department); Take out the category and fill in the category array
Brower.push ({
Value:item.num,
Name:item.department
});
});
Mychart.hideloading (); Hide Load Animations
Mychart.setoption ({//Load data graph
Legend: {
Data:names
},
Series: [{
Data:brower
}]
});
},
Error:function (errormsg) {
Execute the function when the request fails
Alert ("Chart request data failed!");
Mychart.hideloading ();
}
});
};
Loadonecolumn ();
</script>

Three. The JSON format is as follows:

{"List": [{"Department": "Heping", "num": 480},{"department": "Hexi District", "num": 380},{"department": "Hedong", "num": 366},{" Department ":" Hebei District "," num ": 320},{" department ":" Nankai District "," num ": 300}]}

Echarts Circular pie chart dynamically get JSON data