问题篇(详解)：http://www.cnblogs.com/hanyinglong/p/4708337.html
a.在系统开发过程中可能会使用到图表控件，一个好的图标控件可以使我们的网站增加很好的动态感和美感以及增加人气。那么如果我们遇到这种需求的话就需要去找寻图表控件，我在开发过程中也是用过很多的图表控件(HighCharts,Charts,ECharts等等),那么下面我就简单介绍一下这三种插件，代码实现是：Echarts。
(1):HighCharts 官网：http://www.highcharts.com/
(2):Charts 官网：http://www.telerik.com/aspnet-mvc/charts?utm_medium=listings&utm_source=VisualStudioGallery&utm_campaign=dt-MVC-jan2015
(3):ECharts 官网：http://echarts.baidu.com/
b.因为上面三个图表控件都是基于JavaScript来实现的，所以相对来说对于我们开发人员调用起来也很容易，下载引用，然后查看API，查询API就能实现需要的功能，那么为什么我这里还要写一篇博客呢，其实主要还是给大家简单介绍一下，如果开发人员没有很多时间去看的话可以直接仿照我的例子去实现，速度可以相对来说比查看API快一点，但是要深入了解还需要查看API中每个方法的属性和事件，才能真正使用的得心应手。
c.ECahrts API地址：http://echarts.baidu.com/doc/doc.html，http://echarts.baidu.com/doc/option.html。
2.准备工作
a.首先登录ECharts 官网：http://echarts.baidu.com/，在导航中可以看到下载按钮，单击下拉选择需要下载的包下载保存到电脑上。
b.创建ASP.NET MVC或者ASP.NET 项目，在Scripts文件夹下面创建echarts文件夹。
c.解压下载成功的文件夹之后选择build或者dist文件夹复制到创建的项目中的Scripts的文件夹下面的echarts文件夹下面。
d.项目创建完成之后如图所示：
3.实现功能：
a.本实例实在ASP.NET MVC下面实现的，故我们按照HTML，JS和后端的实现分离将代码贴出来，大家仔细查看即可。
b.ECharts插件依赖于Jquery，所以在引入echarts.js之前需要引入Jquery.js，请注意.
c.HTML页面代码如下：
1 @using System.Web.Optimization 2 3 <style type="text/css"> 4 .selectRefreshInfo { 5 width: 80px; 6 height: 28px; 7 margin: 2px 0; 8 } 9 </style> 10 11 <!--展示监控信息--> 12 <div id="main" style="height: 400px;"></div> 13 <div id="foot_order" style="height: 30px;text-align: center"> 14 @Html.DropDownList("Name",ViewBag.SelectList as IEnumerable<SelectListItem>,new { @class = "selectRefreshInfo",Id="dropDownId" }) 15 <span style="color: red">(秒)设置发送时间间隔</span> 16 <input type="button" class="btn btn-primary" value="停止刷新" onclick="Ecarts.BtnStopRefresh()"/> 17 <input type="button" class="btn btn-primary" value="手动刷新" onclick="Ecarts.BtnHandRefresh()"/> 18 </div> 19 20 @section footerJs 21 { 22 @Scripts.Render("~/Scripts/echarts/build/dist/echarts.js") 23 @Scripts.Render("~/Scripts/Views/orderInfoIndex.js") 24 }
d.JS页面代码如下：
1 /* 功能:实现读取数据库中的需要监控的数据在前端展示，JS操作Echarts插件 2 * 创建人：Kencery 创建时间：2015-7-30 */ 3 4 //初始化加载信息 5 $(document).ready(function() { 6 //页面打开时候的初始化 7 Ecarts.EcartsReFresh(); 8 //初始化完成之后按照第一个下拉框的时间刷新 9 Ecarts.SetInterval($("#dropDownId").find("option:selected").text()); 10 //当下拉列表框改变的时候定时执行程序 11 Ecarts.DropDownChange(); 12 }); 13 14 var callUrl = { readDataRefreshChats: "/OrderInfo/ReadDataRefreshChats" }; 15 16 //路径配置 17 require.config({ 18 paths: { echarts: '/Scripts/echarts/build/dist' } 19 }); 20 21 var lineBar = "bar"; //读取bar 22 var interVal; //最终删除定时执行程序 23 var Ecarts = { 24 EcartsReFresh: function() { 25 require([//使用线性图或者柱状图加载line和bar模块，按需加载 26 'echarts', 27 'echarts/chart/line', 28 'echarts/chart/bar' 29 ], function(orderInfo) { 30 var myChart = orderInfo.init(document.getElementById('main')); //初始化Echarts图标信息 31 32 //选择magicType时间，读取选择的是什么图形 33 var ecConfig = require('echarts/config'); 34 myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, function(param) { 35 if (param.magicType.bar) { 36 lineBar = "bar"; 37 } else { 38 lineBar = "line"; 39 } 40 }); 41 42 //发送异步请求从后台读取Option参数，赋值给Charts对象 43 $.getJSON(callUrl.readDataRefreshChats, { lineBar: lineBar, }, function(data) { 44 var option = { 45 title: { 46 text: '订单号剩余量监控', 47 }, 48 tooltip: { 49 show: true, 50 trigger: 'axis' 51 }, 52 toolbox: { 53 show: true, 54 feature: { 55 dataView: { show: true, readOnly: false }, 56 magicType: { show: true, type: ['line', 'bar'] }, 57 restore: { show: true }, 58 saveAsImage: { show: true } 59 } 60 }, 61 legend: { 62 data: data.Legend 63 }, 64 xAxis: [ 65 { 66 name: data.XName, 67 type: 'category', 68 data: data.XAxis //所有日期读取 69 } 70 ], 71 yAxis: [{ 72 name: '剩余量', 73 type: 'value', 74 scale: true, 75 precision: 2, 76 splitNumber: 12, 77 splitArea: { show: true } 78 }], 79 series: data.SeriesList 80 }; 81 myChart.setOption(option); // 为echarts对象加载数据 82 }); 83 }); 84 }, 85 SetInterval: function(dropText) { //定时执行刷新程序 86 interVal = window.setInterval(function() { 87 Ecarts.EcartsReFresh(); 88 }, readRefreshSecond(dropText)); 89 }, 90 DropDownChange: function() { 91 //下拉列表变化刷新事件 92 $("#dropDownId").change(function() { 93 clearInterval(interVal); 94 Ecarts.SetInterval($(this).find("option:selected").text()); 95 }); 96 }, 97 BtnHandRefresh: function() { //手动刷新 98 Ecarts.EcartsReFresh(); 99 }, 100 BtnStopRefresh: function() { //定制定时程序的执行 101 clearInterval(interVal); 102 }, 103 }; 104 105 function readRefreshSecond(dropDownId) { 106 return dropDownId * 1000; 107 }