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得到得效果圖：
