echart-动态加载柱状图

1前台页面：

@{
ViewBag.Title = "echart-柱状图";
}
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<button onclick="InitLineChart()">点击显示柱状图</button>
<!-- ECharts单文件引入 -->
<script src="~/Scripts/ECharts/echarts.js"></script>
<script src="~/Scripts/ECharts/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
//var myChart = echarts.init(document.getElementById('main'));
//var option = {
// tooltip: {
// show: true
// },
// legend: {
// data: ['销量']
// },
// xAxis: [
// {
// type: 'category',
// data: ["手机", "笔记本", "耳机", "平板", "台式机", "显示器"]
// }
// ],
// yAxis: [
// {
// type: 'value'
// }
// ],
// series: [
// {
// "name": "销量",
// "type": "bar",
// "data": [5, 20, 40, 10, 10, 20]
// }
// ]
//};

//// 为echarts对象加载数据
//myChart.setOption(option);
</script>


<script type="text/javascript">
function InitLineChart()
{
$.post("/Home/InitChartData",
{ "className": "" },
function (data) {
//获取返回的“对象集合”，并转换成jQuery能够识别的JSON格式
var list = $.parseJSON(data);
var xData = list.xAxisData;
var yData = list.seriesData;
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data: ['步数']
},
xAxis: [
{
type: 'category',
data: xData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "步数",
"type": "bar",
"data": yData
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
});


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

 

2后台控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using MySql.Data.MySqlClient;
using EchartDemo.DBHelper;

namespace EchartDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{

return View();


}


public JsonResult InitChartData()
{
string[] xAxisData = null;
string[] seriesData = null;
string XData = null;
string YData = null;
DataTable dt = T9.Common.CommonDal.Query(@"SELECT DATE_FORMAT(createtime,'%Y%m%d') days,
SUM(s_sportstep) AS TotalStep FROM wd_sport WHERE L_DID=18 GROUP BY days;").Tables[0];
if (dt != null && dt.Rows.Count > 0)
{
foreach (DataRow drStep in dt.Rows)
{
XData += drStep["days"].ToString() + ",";
YData += drStep["TotalStep"].ToString() + ",";
}
}
xAxisData = XData.Trim(',').Split(',');
seriesData = YData.Trim(',').Split(',');
echartData chartData = new echartData();
chartData.xAxisData = xAxisData;
chartData.seriesData = seriesData;
string datas = T9.Util.JSONUtil.JsonSerializer<echartData>(chartData);
return Json(datas, JsonRequestBehavior.AllowGet);

}


public class echartData
{
public string[] xAxisData { get; set; }
public string[] seriesData { get; set; }
}

//public JsonResult AllBarList()
//{
//{
// "name":["iso","english","china","ufo","seo"],
// "data":[400,200,300,100,11]
//}
// //https://www.cnblogs.com/clayzhang/p/7027139.html
// var list=null;
// return Json(new { total = list.Total,data=list}, JsonRequestBehavior.AllowGet);

//}

}
}

 

3得到得效果图：

 

posted @ 2020-04-11 12:44  .net&new  阅读(1465)  评论(0)  编辑  收藏  举报