Echarts 饼图，折线图，柱状图，条形图ajax动态渲染数据方法汇总

Echarts的各种图表渲染方法其实速途同归，你对照着官网的demo里的数据格式，设置好回传数据的接受格式就行，下面看各个demo。

一.Echarts折线图

function getIndex(URL) {
$.ajax({
dataType: "json",
type: "GET",
url: URL,
async: true, //ajax异步true
success: function (json) {
var status = json.status;
var repairdata = json.repairPatchTotalData;
var repairlabels= ["aaa","bbb","ccc"];
var repairDangerCounts = [];
var repairSelectCounts = [];
var repairTotalCounts = [];
var repairseries = [];
var repaircounts =[];
var repairdate = [];

var repairItem = function(){
return {
name:"",
type:'line',
data:[]
}
};
if (status == 0) {

//数据渲染
$("#patch_repair_loading_image").remove();
$(".patch_repair_loading").append('<span id="patch_repair_msg" style="position:relative;bottom: 150px;font-size: 15px;color: #999;">'+'暂无数据...'+'</span>')
if (repairdata.length != 0){
$("#patch_repair_msg").remove();

//遍历获取x轴日期数据和三条折线的数据

4000
for (var i = 0; i < repairdata.length; i++) {
repairdate.push(repairdata[i].date);
repairDangerCounts.push(repairdata[i].dangerRepair);
repairSelectCounts.push(repairdata[i].selectRepair);
repairTotalCounts.push(repairdata[i].totalRepair);
}
repaircounts.push(repairDangerCounts);
repaircounts.push(repairSelectCounts)
repaircounts.push(repairTotalCounts)
for(var i = 0;i<3;i++) {
var repairit = new repairItem();
repairit.name = repairlabels[i];
repairit.data = repaircounts[i];
repairseries.push(repairit);
}
patch_repair_config_option.legend.data = repairlabels; //标签赋值
patch_repair_config_option.xAxis[0].data = repairdate; //X轴赋值 因为折线图能设置上下两个x轴，所以用[0].
patch_repair_config_option.series = repairseries; //折线的数据赋值
}
install_patch_option.setOption(install_config_option, true);
notinstall_patch_option.setOption(notinstall_config_option, true);
client_patch_statistics_option.setOption(client_patch_config_option, true);
patch_repair_option.setOption(patch_repair_config_option, true);
if (oLoading){
patch_repair_option.hideLoading();
}
}

}
折线图的data格式：{label:"xxx",data:[1,2,3,34]}，不管后台传给你数据时什么格式，你的目的就是把解析成[[1,2,3],[1,2,3],[1,2,3]]类似这种格式。
二.Echarts饼图

function getIndex(URL) {
$.ajax({
dataType: "json",
type: "GET",
url: URL,
async: true, //ajax异步true
success: function (json) {
var status = json.status;
var installlabels = ['AA','BB'];
var installcounts = [];
var installdata = json.installPatchData[0];
var installseries = [];
installcounts.push(installdata.selectPatch);
installcounts.push(installdata.dangerPatch);

var installItem = function(){
return {
name: '',
type: 'pie',
radius : '50%',
center: ['25%', '47%'],
startAngle:90, //开始 的旋转角度
itemStyle: {
normal: {
label: {
show: false,
position: 'inner'
},
labelLine: {
show: false,
}
}
},
data: []
}
};

if (status == 0) {
//已安装补丁统计数据渲染
$("#install_patch_loading_image").remove();
$(".install_patch_loading").append('<span id="install_patch_loading_msg" style="position:relative;bottom: 108px;font-size: 15px;color: #999;">'+'暂无数据...'+'</span>')
if(json.installPatchData.length != 0){
$("#install_patch_loading_msg").remove();
var installit = new installItem();
for (var i = 0; i < 2; i++) {
installit.data.push({value: installcounts[i], name: installlabels[i]});
}
installseries.push(installit);
install_config_option.series = installseries;
//将数据渲染到legend上
install_config_option.legend =
{
x : '65%',
y : '36%',
orient : 'vertical',
data:[{name:'可选补丁',textStyle:{color:'#1DFAF1'}},{name:'高危补丁',textStyle:{color:'#72A4FB'}}],
formatter: function(name) {
var index = 0;
installlabels.forEach(function(value,i){
if(value == name){
index = i;
}
});
return name + " " + installcounts[index];
}
};

}
},
error:function(){
console.log("出错！")
}

});
}三.Echarts柱状图
function getIndex() {
$.ajax({
dataType: "json",
type: "GET",
url: "",/*"/report/virusreport/dangerPostRanking?option=[day|week|month]"*/
async: true, //ajax异步true
success:function(){
var json =
{
"status": 0,
"code":0,
"msg":" ",
"data":[{"num": 0.4},{"num": 0.5},{"num": 0.6},{"num": 0.7},{"num": 0.9},
{"num":1.0},{"num":1.2},{"num":1.4},{"num":1.5},{"num":1.6}],
"clientData":[{"name":"PC-Macdae0"},{"name":"PC-Macdae1"},{"name":"PC-Macdae2"},{"name":"PC-Macdae3"},
{"name":"PC-Macdae4"},{"name":"PC-Macdae5"},{"name":"PC-Macdae6"},{"name":"PC-Macdae7"},
{"name":"PC-Macdae8"}, {"name":"PC-Macdae9"}]
};
var status = json.status;
var data = json.data;
var nameData = json.clientData;
var series = [];
var Ydata = [];
var Item = function () {
return {
barWidth: 15,
name: '',
type: 'bar',
itemStyle: {
normal: {
/*给不同柱子设置固定颜色*/
color: '#FEC400',
label: {
show: true,
position: 'right',
textStyle: {
color: '#333'
}
}
}
},
data: []
}
};

var Yaxis = function () {
return {
show:true,
type: 'category',
data: [],
//隐藏坐标轴小标记
axisTick:[{
show:false
}],
//设置x轴颜色和宽度
axisLine: {
lineStyle: {
type: 'solid',
color: '#D6DAE3',//左边线的颜色
width:'2'//坐标线的宽度
}
}
}
};
if(status == 0) {
if(data.length != 0) {
$("#dager_host_loading_image").remove();
var It = new Item();
for (var i = 0; i <data.length; i++) {
It.data.push(data[i].num);
}
series.push(It);
dager_host_config_option.series = series;
var Ya = new Yaxis();
for (var j = 0; j < data.length; j++) {
Ya.data.push(nameData[j].name);
}
Ydata.push(Ya);
dager_host_config_option.yAxis = Ydata;
}
}
dager_host_option.setOption(dager_host_config_option, true);
if (oLoading) dager_host_option.hideLoading();
console.log("出错！");
}
});
}
getIndex();