mvc 将数据库的值显示在echart中

最新推荐文章于 2021-04-28 20:59:44 发布

11小猪会飞11

最新推荐文章于 2021-04-28 20:59:44 发布

阅读量424

点赞数 1

文章标签： echart mvc

本文链接：https://blog.csdn.net/SS33SSS/article/details/102611185

版权

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>

$.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轴数据
}]
});