Datatable 数据格式:
控制器代码:
public string GetEchart1(string code)
{
//---这部分是封装参数通过存储过程获取数据库数据,不用理会
Dictionary<string, object> dic = _service.GetUserInfoDic();
dic.Add("Action", "SumPPEReceived");
Dictionary<string, object> dx = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, object>>(code);
Dictionary<string, object> newdic = new Dictionary<string, object>();
newdic = dic.Union(dx).ToDictionary(key => key.Key, value => value.Value);
//-------------end
//-----------只需这部分从数据库拿到数据,赋给Datatable
DataSet ds = _service.Query("usp_PPE_Common", XmlParams.CreateSqlXml(newdic));
DataTable dt = ds.Tables[0];
List<string> PPETypeList = new List<string>();
List<string> SumApplyQtyList = new List<string>();
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DataRow dataRow = dt.Rows[i];
PPETypeList.Add(dataRow["PPEType"].ToString());
SumApplyQtyList.Add(dataRow["SumApplyQty"].ToString());
}
var obj = new
{
PPEType = PPETypeList,
SumApplyQty = SumApplyQtyList,
};
string jsonstr = JsonConvert.SerializeObject(obj);
return jsonstr;
}
else
{
string jsonstr = "";
return jsonstr;
}
}
前端js代码:
function GetEchart1()
{
var code =
{
StartYear: $("#StartYear").val(),
EndYear: $("#EndYear").val()
};
var names = [];
var mydata = [];
var json_str = JSON.stringify(code);
$.ajax({
url:'@Url.Action("GetEchart1")',
type: "post",
dataType: "json",
async: true,
data: { code: json_str},
success: function (data)
{
// debugger;
// alert(data.SumApplyQty.length);
// console.log(data.VSM);
for (var i = 0; i < data.SumApplyQty.length; i++) {
names.push(data.PPEType[i]);
mydata[i] = { value: data.SumApplyQty[i], name: data.PPEType[i] };
}
var chartDom = document.getElementById('echart1');
var myChart = echarts.init(chartDom);
var option;
option =
{
backgroundColor: "rgb(26, 27, 32)",
tooltip:
{
trigger: 'item',
//formatter: '{a} <br/>{b} : {c}%'
formatter: '{b} : {c}'
},
title: {
text: 'PPE 领用分布',
// subtext: 'Fake Data',
left: 'center',
textStyle: {
color: 'white',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif'
}
},
legend:
{
orient: 'vertical',
left: 'center',
bottom: 'bottom',
textStyle:
{
color: 'white',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif'
},
data: names
},
color: ['#00ccff', '#5470c6', '#91cc75', '#fac858', '#ee6666'], // 自定义颜色
series: [
{
//name: '访问来源',
type: 'pie',
minAngle: 10, // 最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互
radius: ['40%', '68%'],
center: ['48%', '53%'],
label:
{
formatter: '{b|{b}}\n({c})\n', // 这里的设置就是饼图的标签内容及其格式
rich:
{
b:
{
align: 'center'
}
}
},
data: mydata
}
]
};
option && myChart.setOption(option);
}
});
};
页面DIV代码:<div id="echart1"></div>
效果图: