首页 > 代码库 > 百度EChart3初体验
百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图，经过多方查找，体验，感觉ECharts不错，封装的很细，我们只需要看自己需要那种类型的图表，搞定好自己的json数据就OK。至于说如何体现出来，官网的教程很详细。大家可以去看下。大概了解下用法就OK。
百度ECharts 3：http://echarts.baidu.com/index.html
其实还有很多，可以到官网中找。
下面是我进行操作的步奏，大家可以看下，做个参考。
ECharts初体验—01...
需要到官网下载最新的版本的js文件(完整版)，其实只有一个，但是你要想出来一些好看的效果就应该把主题也下载好。
地址：http://echarts.baidu.com/download.html
其实只需要4步就OK。
1：划分一块区域用来显示图形；
2：初始化echart插件；
3：填充option中的数据data;
4：加载，装配数据到echart。
这样就OK了。其实最难的不是使用，而是如何将这个插件和自己的后台联系起来，比如数据应该展示那些，如何将数据json化之后传递过来。如何实现异步等……
ECharts初体验—02...
下面是MVC中一个简单的页面,只是为了将图表先展示出来。
1 /// <summary>2 /// 折线图3 /// </summary>4 /// <returns></returns>5 public ActionResult Index()6 {7 return View();8 }
1 <h2>Index</h2> 2 3 <div id="main" style="width: 600px;height:400px;"></div> 4 @*引人外部JS文件，下面的vintage,dark是主题。*@ 5 <script src=http://www.mamicode.com/"~/Scripts/echarts/echarts.js"></script> 6 <script src=http://www.mamicode.com/"~/Scripts/echarts/vintage.js"></script> 7 <script src=http://www.mamicode.com/"~/Scripts/echarts/dark.js"></script> 8 <script> 9 //第一步；10 var myChart = echarts.init(document.getElementById(‘main‘), ‘dark‘); //这就样11 //第二步；12 var option = {13 title: {14 text: ‘堆叠区域图‘15 },16 //气泡提示框，呈现更详细的数据。17 tooltip: {18 trigger: ‘axis‘19 },20 //图例，表述数据和图表的关联21 legend: {22 data: [‘邮件营销‘]23 },24 //辅助工具箱，如添加标线，框选缩放.25 toolbox: {26 feature: {27 saveAsImage: {}28 }29 },30 //用于定义直角系的布局。31 grid: {32 left: ‘3%‘,33 right: ‘4%‘,34 bottom: ‘3%‘,35 containLabel: true36 },37 //坐标系中的X轴--类目录38 xAxis: [39 {40 type: ‘category‘,41 boundaryGap: false,42 data: ["2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-23", "2016-10-24", "2016-10-25", "2016-10-26"]43 }44 ],45 //坐标系中的Y轴--数据值46 yAxis: [47 {48 type: ‘value‘49 }50 ],51 //数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。52 series: [53 {54 name: ‘邮件营销‘,55 type: ‘line‘,56 stack: ‘总量‘,57 areaStyle: { normal: {} },58 label: {59 normal: {60 show: true,61 position: ‘top‘62 }63 },64 data: [23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222]65 } 66 ]67 };68 //第三步 使用刚指定的配置项和数据显示图表。69 myChart.setOption(option);70 </script>
其中的每一步都有解释，每一个名词都有各自的意义，大家可以了解下。至于每一个data，都是使用静态的json，后面会从后台传递数据。下面是这个的效果。
ECharts初体验—03...
其实上面的数据都是静态的，很好的实现。但是对于我们实际的项目中都是从数据库中取到的数据，不可能是静态的，此时我们就需要将其json化，进行一定的转换。把数据从后面传递到前台，在进行操作。
dataList类
1 public class DateList2 {3 4 public IList<string> datetime { get; set; }5 6 public IList<int> ordernumber { get; set; }7 }
控制器Controller
1 [HttpGet] 2 public ActionResult ZhiXian() 3 { 4 return View(); 5 } 6 [HttpPost, ActionName("ZhiXian")] 7 public ActionResult ZhiXianPost() 8 { 9 var listData = http://www.mamicode.com/new List<string>();10 var datetimes = DateTime.Now.AddDays(1);11 for (int i = 1; i <=15; i++)12 {13 listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));14 }15 listData.Reverse();16 var aa = new int[] { 23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222 };17 var data = http://www.mamicode.com/new DateList()18 {19 datetime = listData,20 ordernumber = aa,21 };22 return Json(new{status=1,result=data});23 }
视图View
1 <h2>ZhiXian</h2> 2 <div id="main" style="width: 800px;height:400px;"></div> 3 @*引人外部JS文件*@ 4 <script src=http://www.mamicode.com/"~/Scripts/echarts/echarts.js"></script> 5 <script src=http://www.mamicode.com/"~/Scripts/jquery-2.1.4.js"></script> 6 <script src=http://www.mamicode.com/"~/Scripts/echarts/vintage.js"></script> 7 <script src=http://www.mamicode.com/"~/Scripts/echarts/roma.js"></script> 8 <script> 9 // 基于准备好的dom，初始化echarts实例10 var myChart = echarts.init(document.getElementById(‘main‘), ‘roma‘); //这就11 $.post("/Home/ZhiXian", function (response) {12 if (response.status == 1) {13 console.log(response.result.datetime);14 console.log(response.result.ordernumber);15 var option = {16 title: {17 text: ‘近10天订单数量分析图‘18 },19 //气泡提示框，呈现更详细的数据。20 tooltip: {21 trigger: ‘axis‘22 },23 //图例，表述数据和图表的关联24 legend: {25 data: [‘订单总量‘]26 },27 //辅助工具箱，如添加标线，框选缩放.28 toolbox: {29 feature: {30 saveAsImage: {}31 }32 },33 //用于定义直角系的布局。34 grid: {35 left: ‘3%‘,36 right: ‘4%‘,37 bottom: ‘3%‘,38 containLabel: true39 },40 //坐标系中的X轴--类目录41 xAxis: [42 {43 type: ‘category‘,44 boundaryGap: false,45 data: response.result.datetime46 }47 ],48 //坐标系中的Y轴--数据值49 yAxis: [50 {51 type: ‘value‘52 }53 ],54 //数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。55 series: [56 {57 name: ‘订单总量‘,58 type: ‘line‘,59 stack: ‘总量‘,60 label: {61 normal: {62 show: true,63 position: ‘top‘64 }65 },66 areaStyle: { normal: {} },67 data: response.result.ordernumber68 }69 ]70 };71 myChart.clear();72 myChart.hideLoading();73 //// 使用刚指定的配置项和数据显示图表。74 myChart.setOption(option);75 } else {76 alert("图表请求不成功，请重新请求。");77 } 78 });79 </script>
效果如下：
我们可以发现颜色和第二个的不一样，这个就是我们使用了主题，这个在获取dom元素的时候标记的。如下所示。
下面是一个饼状图的主要option,其余的不变；
1 myChart.setOption({ 2 series: [ 3 { 4 name: ‘访问来源‘, 5 type: ‘pie‘, 6 radius: ‘55%‘, 7 data: [ 8 { value: 400, name: ‘搜索引擎‘ }, 9 { value: 335, name: ‘直接访问‘ },10 { value: 310, name: ‘邮件营销‘ },11 { value: 274, name: ‘联盟广告‘ },12 { value: 235, name: ‘视频广告‘ }13 ]14 }15 ]16 });
我一直相信，只要我一直走，就一定可以到达。虽然我不知道要到那里去...
百度EChart3初体验
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。