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轴日期数据和三条折线的数据
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.