1.controller的代碼：
得到數據的字段值，並放到list中，2
public ActionResult GetEchart()
{
DataTable dt = bll.GetEchart();
// 轉換爲List並返回
List<ChannelInfo> lstObj = new List<ChannelInfo>();
ChannelInfo m_info=new ChannelInfo();
foreach (DataRow item in dt.Rows)
{
ChannelInfo model = new ChannelInfo();
model.CUS_CATEGORY = item["CUS_CATEGORY"].ToString();
model.SS= item["SS"].ToString(); ;
lstObj.Add(model);
}
var result = new { total =10, iTotalDisplayRecords = 10, data = lstObj };
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
2：html內容：
@{
Layout = null;
}
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta name="viewport" content="width=device-width" />
<title>ShowEchart</title>
</head>
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/echart/echart.js"></script>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
$.ajax({
url: "../Customer/GetEchart",
type:"get",
data: {},
success: function (res)
{
var objs = [];
var objs1 = [];
for (var i = 0; i < res.data.length; i++)
{
objs[i] = res.data[i].CUS_CATEGORY;
objs1[i] = res.data[i].SS;
}
var dom = document.getElementById("container");
var mychart = echarts.init(dom);
mychart.setOption({
xAxis: { data: objs },//X軸數據"CUS_CATEGORY"
// xAxis: { data: "CUS_CATEGORY" },//X軸數據"CUS_CATEGORY"
yAxis: {},
series: [{
name: '存量',
type: 'bar',//圖表類型
data:objs1,//y軸數據
}]
});
}
});
</script>
</body>
</html>
完成。