ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
2024-08-24 02:36:34
一、背景：
我们这行做web开发的，很多时候都需要做数据统计报表，现在我所使用的是来自百度团队的ECharts。官方网址：http://echarts.baidu.com/
我们知道，很多时候我们需要一些吸引眼球的能力。先上一张稍微有一点点炫的图给大家看看。
二、代码栗子
1.在页面直接使用静态数据进行显示
步骤：
（1）先建一个空的MVC项目，并将它命名为EChartsDemo
（2）再建一个空的控制器HomeController，并创建一个Index视图
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
}
}
HomeController.cs
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px"></div> <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script>
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.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>
</body>
Index.cshtml
运行后的效果图：
我们可以在Index.cshtml代码中的--①②--处自己学习加下数据。
对于它的使用，我们可以简单的总结为：
a.准备一个Dom --> b.引入js --> c.配置路径 --> d.动态加载图表
2.这次我们弄个饼图（MVC+jQuery），上次我们引入的是网上中的js，现在我们换成本地的js。文件需要自己到官方下载。
步骤：
（1）在Models文件夹添加两个类
namespace EChartsDemo.Models
{
public class PieMapViewModel
{
/// <summary>
/// 图例数据
/// </summary>
public List<string> LegendData { get; set; } /// <summary>
/// 图表数据
/// </summary>
public List<VisitSource> SeriesData { get; set; }
}
}
PieMapViewModel
namespace EChartsDemo.Models
{
public class VisitSource
{
public string value { get; set; } public string name { get; set; }
}
}
VisitSource
（2）在HomeController中添加两个名为PieMap的方法
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
public ActionResult PieMap()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult PieMap(string id)
{
var pie = new PieMapViewModel()
{
LegendData = new List<string>()
{
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
},
SeriesData = new List<VisitSource>()
{
new VisitSource() {name = "直接访问", value = ""},
new VisitSource() {name = "邮件营销", value = ""},
new VisitSource() {name = "联盟广告", value = ""},
new VisitSource() {name = "视频广告", value = ""},
new VisitSource() {name = "搜索引擎", value = ""}
}
}; return Json(new { status = , result = pie });
}
}
}
HomeController.cs
（3）前端代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 800px"></div> <!-- ECharts单文件引入 -->
@*<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>*@
<script src="~/assets/echarts/build/source/echarts.js"></script> <script src="~/assets/jquery-2.1.4.js"></script> <script>
$.post("/Home/PieMap", { id: '' }, function (response, status) {
// 路径配置
require.config({
paths: {
echarts: '/assets/echarts/build/source'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用饼状图就加载pie模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init($("#main")[]); var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
data: response.result.LegendData
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max:
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: response.result.SeriesData
//data: [
// { value: 335, name: '直接访问' },
// { value: 310, name: '邮件营销' },
// { value: 234, name: '联盟广告' },
// { value: 135, name: '视频广告' },
// { value: 1548, name: '搜索引擎' }
//]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
}); </script>
</body>
PieMap.cshtml
运行后的效果图：
3.依然是这个饼图，只不过这次我们将前端换成Angularjs+jQuery的形式
（1）在HomeController内添加方法PieMapS【因为手机升级版常常在尾端加上S】
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
public ActionResult PieMap()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult PieMap(string id)
{
var pie = new PieMapViewModel()
{
LegendData = new List<string>()
{
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
},
SeriesData = new List<VisitSource>()
{
new VisitSource() {name = "直接访问", value = ""},
new VisitSource() {name = "邮件营销", value = ""},
new VisitSource() {name = "联盟广告", value = ""},
new VisitSource() {name = "视频广告", value = ""},
new VisitSource() {name = "搜索引擎", value = ""}
}
}; return Json(new { status = , result = pie });
} /// <summary>
/// 饼图（angularjs）
/// </summary>
/// <returns></returns>
public ActionResult PieMapS()
{
return View();
} }
}
HomeController.cs
（2）准备好视图和js文件（pieMapS.js为自定义的脚本）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ng-app="myApp" ng-controller="myCtrl" style="height: 400px"> </div> <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/assets/scripts/pieMapS.js"></script> </body>
PieMapS.cshtml
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$http
.post("/Home/PieMap")
.success(function (response) {
// 路径配置
require.config({
paths: {
echarts: "/assets/echarts/build/source"
}
});
// 使用
require(
[
"echarts",
"echarts/chart/pie" // 使用饼状图就加载pie模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init($("#main")[0]);
var option = getOption(response);
// 为echarts对象加载数据
myChart.setOption(option);
}
);
})
.error(function () {
alert("系统发生异常");
});
});
function getOption(response) {
return {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: response.result.LegendData
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: response.result.SeriesData
}
]
};
}
pieMapS.js
运行后的效果图：参考上图
【注意】js 的路径配置；
如果没有显示出对应图形，可能是漏加载对应模块（"echarts/chart/pie"：表示饼图；'echarts/chart/bar'：表示柱状图；具体参考官方文档）；
获取Dom时不要写成 $("#main")，$("#main")[0] 才等同于 document.getElementById('main')；
一切以官方文档为基准：http://echarts.baidu.com/doc/doc.html
Demo下载：http://files.cnblogs.com/files/liqingwen/EChartsDemo.7z
最新文章
- mysql命令行导入sql脚本中文变问号问题
- Delphi Berlin 10.1 for 小米平板2 (Win 10) 电子罗盘测试
- MonkeyRunner学习（2）常用命令
- .net自定义控件
- 挺有意思的HBase日志+Splunk
- Spring源码情操陶冶-AbstractApplicationContext#onRefresh
- C++ Socket学习记录 -2
- 基于input子系统的sensor驱动调试（二）
- 怎样共享windows和linux之间的文件
- 初识Haskell 三：函数function
- Angular官方教程采坑
- Linux命令-基本变量类型及其运算
- Java调用OCR进行图片识别
- java基础篇---注解(Annotation)
- HDU 4716 A Computer Graphics Problem （水题）
- 开源免费天气预报接口API以及全国所有地区代码[值得收藏]
- Java基础学习笔记（一）
- ubuntu重新设置登陆界面|切换gdm kdm lightdm
- HAproxy-1.6.3 安装部署
- lincode 题目记录5