Asp.net mvc与echart不显示柱状图

tigerxiang88 2018-06-19 04:35:14

我用Asp.net mvc与echart 做柱状图，但不显示，只有数据 [{"name":"A1","value":6},{"name":"A2","value":9},{"name":"A3","value":10},{"name":"A4","value":4},{"name":"A5","value":1},{"name":"A6","value":1},{"name":"A7","value":1},{"name":"A8","value":16}]，求助各位高手。代码如下：
前台（是参考网上的内容）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts5</title>

<script type="text/javascript" src="~/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="~/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="~/js/echarts-all.js"></script>
<script type="text/javascript" src="~/js/echarts.js"></script>
</head>

<body>
<div id="main" style="width:100%; height:400px;"></div>
<script type="text/javascript">

function loadOneColumn() {
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: 'ECharts5 铜管产量'
},
tooltip: {},
legend: {
data: ['产量排行']
},
xAxis: {
type:'category', //后追加的
data: []
//data:names
},
yAxis: {
splitLine: { show: true },//保留网格线
name: ''
},
series: [{
barWidth: "30px",
name: '产量排行',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
data: []
//data:nums
}]
});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

var names = []; //类别数组（实际用来盛放X轴坐标值）
//var nums = []; //销量数组（实际用来盛放Y坐标值）
var values = [];

$.ajax({
// type: 'get',
type:'POST',
url: 'Home/EchartView5',//请求数据的地址
//url: "${basePath}Controllers/HomeController/EchartView3()",
async: false,
// async: ture,
cache: false,
dataType: "json", //返回数据形式为json

success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
// $.each(result.list, function (index, item) {
$.each(result.list, function (EchartView5, item) {
//names.push(item.department); //挨个取出类别并填入类别数组
names.push(item.name);
//nums.push(item.num); //挨个取出销量并填入销量数组
values.push(item.value);
});

myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '产量排行', //显示在上部的标题
// data: nums
data:values
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};

loadOneColumn();

</script>
</body>
</html>

后台
public JsonResult EchartView5()
{
string strConn = "Server=.; database=conApparry; uid=sa; pwd=123456;";
string strSql = "select Name as Name, count(*) as Tel from T_UserInfo group by Name";
SqlDataAdapter da = new SqlDataAdapter(strSql, strConn);
DataSet ds = new DataSet();
JavaScriptSerializer jsS = new JavaScriptSerializer();
da.Fill(ds);

List<object> lists = new List<object>();
//ArrayList<object> alists=new ArrayList<object>;

// lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { name = dr["Name"], value = dr["Tel"] };
//var obj = new { name =Convert.ToString(dr["Name"]), value = Convert.ToInt16(dr["Score"]) };
var obj2 = new { value=dr["Tel"]};
lists.Add(obj);
}
return Json(lists, JsonRequestBehavior.AllowGet);
}

...全文