手把手教你MVC前后台数据交互Echarts写个统计图
Posted 前端教程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手教你MVC前后台数据交互Echarts写个统计图相关的知识，希望对你有一定的参考价值。
数据库 表的数据
在mvc中获取数据
public class zhuyeController : Controller
{
//
// GET: /zhuye/
//DbContext myContext = new MyContext();
sj_kjwsBll sjb = new sj_kjwsBll();//实例化已封装的表对象
public ActionResult Index()
{
return View();
}
public ActionResult SQL()
{
var list = sjb.GetList(10, 1)//查询数据
.Select(
u => new
{
Fp = u.kjws_fp,
Cl = u.kjws_ccl,
Jd = u.fkws_zl,
Id = u.kjws_id
}
)
.OrderBy(u => u.Id)
.FirstOrDefault();//获取最后一条数据
List<object> lists = new List<object>();
var fp = list.Fp;
var cl = list.Cl;
//构建Echarts饼图所需的Json数据格式
var obj1 = new { name = "风排", value = fp };
var obj2 = new { name = "抽采", value = cl };
lists.Add(obj1);
lists.Add(obj2);
return Json(lists, JsonRequestBehavior.AllowGet);
}
}
前台代码
//引入Echarts JS文件
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/echarts.js"></script>
//放置Echarts容器
<div id="echart" style="width:300px; height:400px;color: red;"></div>
//对应ajax代码
<script type="text/javascript">
var echart_kjws = echarts.init(document.getElementById('echart_kjws'));
var sj1 = new Array();
var sj2 = new Array();
// 显示标题，图例和空的坐标轴
echart_kjws.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
series: [
{
name: '来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
]
}
]
});
// 异步加载数据
$.get('@Url.Action("JData","TFIndex")').done(function (data) {
document.getElementById("Kjws").innerhtml = data.list_kjws.Jd;
document.getElementById("zjfl").innerHTML = data.list_jfj_zl;
document.getElementById("zhfl").innerHTML = data.list_zhushan_zl;
document.getElementById("huifengjing").innerHTML = data.list_huifengjing_zl;
// 填入数据
var data = eval(data);
for (var i = 0; i < data.list_tb.length; i++) {
sj1.push(data.list_tb[i]["name"]);
}
for (var j = 0; j < data.list_tb.length; j++) {
sj2.push(data.list_tb[j]);
}
echart_kjws.setOption({
legend: {
data: sj1
},
//xAxis: {
// data: sj1
//},
series: [{
// 根据名字对应到相应的系列
data: sj2
}]
});
});
</script>
//最终效果
猜你喜欢
|
|
感谢.转发.分享一起提升技术
以上是关于手把手教你MVC前后台数据交互Echarts写个统计图的主要内容，如果未能解决你的问题，请参考以下文章
三教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
一基础折线图详解《手把手教你 ECharts 数据可视化详解》
二基础平滑面积折线图与折线堆叠面积堆叠《手把手教你 ECharts 数据可视化详解》