ECharts案例简单介绍

ECharts使用心得

前言

上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。

1.    插件的下载

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址： http://echarts.baidu.com/

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

下载之后解压各自的文件目录结构如下：

ECharts：

ZRender:

2.    插件的引用

首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：

这里有以下几点需要说明：

l  所有的跟ECharts有关的文件全部都在echarts文件夹下

l  echarts文件夹的内容分为两部分

1)       一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：

2)       另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：

3.    在页面中的具体使用

按照上边的步骤配置过之后，我们就可以在页面中引用了，这里我主要是演示地图控件的使用方式，因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。

3.1          MapChart

首先在跟2中的echarts文件夹同一个目录（也就是Modules文件夹）下添加一个aspx页或html页，需要注意的是，如果是在aspx页中使用echarts时，需要把要渲染的div放在form标签之外，否则图形是显示不出来的。

3.1.1 在head标签中添加对echarts的引用如下：

[csharp] view
plain copy

  1. <head runat="server">
  2. <title></title>
  3. <script src="echarts/esl.js" type="text/javascript"></script>
  4. </head>

3.1.2 在body标记中，form标记之外，添加一个div，用来做图表渲染的容器。如下：

[csharp] view
plain copy

  1. <body>
  2. <div id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  3. ……………
  4. ……………
  5. </body>

3.1.3 在3.1.3中添加的div标记下，添加如下的js代码段，如下：

 

[csharp] view
plain copy

  1. <script type="text/javascript">
  2. //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。
  3. 这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。
  4. require.config({
  5. paths: {
  6. echarts:‘./echarts/echarts‘,
  7. ‘echarts/chart/map‘:‘./echarts/echarts-map‘
  8. }
  9. });
  10. //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径
  11. require(
  12. [
  13. ‘echarts‘,
  14. ‘echarts/chart/map‘
  15. ],
  16. function (ec) {
  17. varmyChart=ec.init(document.getElementById(‘main‘));
  18. //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
  19. option= {
  20. title: {
  21. text:‘iphone销¨2量￠?‘,
  22. subtext:‘纯??属o?虚¨|构1‘,
  23. x:‘center‘
  24. },
  25. tooltip: {
  26. trigger:‘item‘
  27. },
  28. legend: {
  29. orient:‘vertical‘,
  30. x:‘left‘,
  31. data: [‘iphone3‘,‘iphone4‘,‘iphone5‘]
  32. },
  33. dataRange: {
  34. min:0,
  35. max:2500,
  36. text: [‘高?‘,‘低ì¨a‘],           // 文?本à?，ê?默?认¨?为a数oy值|ì文?本à?
  37. calculable:true,
  38. textStyle: {
  39. color:‘orange‘
  40. }
  41. },
  42. toolbox: {
  43. show:true,
  44. orient:‘vertical‘,
  45. x:‘right‘,
  46. y:‘center‘,
  47. feature: {
  48. mark:true,
  49. dataView: { readOnly:false },
  50. restore:true,
  51. saveAsImage:true
  52. }
  53. },
  54. series: [
  55. {
  56. name:‘iphone3‘,
  57. type:‘map‘,
  58. mapType:‘china‘,
  59. selectedMode: ‘single‘,
  60. itemStyle: {
  61. normal: { label: { show:true },color:‘#ffd700‘ },// for legend
  62. emphasis: { label: { show:true} }
  63. },
  64. data: [
  65. { name:‘北à?à京?‘,value:Math.round(Math.random() *1000) },
  66. { name:‘天?¨?津¨°‘,value:Math.round(Math.random() *1000) },
  67. { name:‘上|?海?ê‘,value:Math.round(Math.random() *1000) },
  68. { name:‘重?庆¨?‘,value:Math.round(Math.random() *1000) },
  69. { name:‘河¨?北à?à‘,value:Math.round(Math.random() *1000) },
  70. { name:‘河¨?南?‘,value:Math.round(Math.random() *1000) },
  71. { name:‘云?南?‘,value:Math.round(Math.random() *1000) },
  72. { name:‘辽￠¨|宁t‘,value:Math.round(Math.random() *1000) },
  73. { name:‘黑¨2龙￠¨2江-‘,value:Math.round(Math.random() *1000) },
  74. { name:‘湖t南?‘,value:Math.round(Math.random() *1000) },
  75. { name:‘安?2徽?‘,value:Math.round(Math.random() *1000) },
  76. { name:‘山|?东?‘,value:Math.round(Math.random() *1000) },
  77. { name:‘新?疆?‘,value:Math.round(Math.random() *1000) },
  78. { name:‘江-苏?‘,value:Math.round(Math.random() *1000) },
  79. { name:‘浙?江-‘,value:Math.round(Math.random() *1000) },
  80. { name:‘江-西??‘,value:Math.round(Math.random() *1000) },
  81. { name:‘湖t北à?à‘,value:Math.round(Math.random() *1000) },
  82. { name:‘广?西??‘,value:Math.round(Math.random() *1000) },
  83. { name:‘甘¨o肃¨¤‘,value:Math.round(Math.random() *1000) },
  84. { name:‘山|?西??‘,value:Math.round(Math.random() *1000) },
  85. { name:‘内¨2蒙¨|古?‘,value:Math.round(Math.random() *1000) },
  86. { name:‘陕|?西??‘,value:Math.round(Math.random() *1000) },
  87. { name:‘吉a林￠?‘,value:Math.round(Math.random() *1000) },
  88. { name:‘福?ê建?§‘,value:Math.round(Math.random() *1000) },
  89. { name:‘贵¨?州Y‘,value:Math.round(Math.random() *1000) },
  90. { name:‘广?东?‘,value:Math.round(Math.random() *1000) },
  91. { name:‘青¨¤海?ê‘,value:Math.round(Math.random() *1000) },
  92. { name:‘西??藏?‘,value:Math.round(Math.random() *1000) },
  93. { name:‘四?川??§‘,value:Math.round(Math.random() *1000) },
  94. { name:‘宁t夏?‘,value:Math.round(Math.random() *1000) },
  95. { name:‘海?ê南?‘,value:Math.round(Math.random() *1000) },
  96. { name:‘台??§湾a?‘,value:Math.round(Math.random() *1000) },
  97. { name:‘香?港?‘,value:Math.round(Math.random() *1000) },
  98. { name:‘澳??门?‘,value:Math.round(Math.random() *1000) }
  99. ]
  100. },
  101. {
  102. name:‘iphone4‘,
  103. type:‘map‘,
  104. mapType:‘china‘,
  105. selectedMode: ‘single‘,
  106. itemStyle: {
  107. normal: { label: { show:true },color:‘#ff8c00‘ },// for legend
  108. emphasis: { label: { show:true} }
  109. },
  110. data: [
  111. { name:‘北à?à京?‘,value:Math.round(Math.random() *1000) },
  112. { name:‘天?¨?津¨°‘,value:Math.round(Math.random() *1000) },
  113. { name:‘上|?海?ê‘,value:Math.round(Math.random() *1000) },
  114. { name:‘重?庆¨?‘,value:Math.round(Math.random() *1000) },
  115. { name:‘河¨?北à?à‘,value:Math.round(Math.random() *1000) },
  116. { name:‘安?2徽?‘,value:Math.round(Math.random() *1000) },
  117. { name:‘新?疆?‘,value:Math.round(Math.random() *1000) },
  118. { name:‘浙?江-‘,value:Math.round(Math.random() *1000) },
  119. { name:‘江-西??‘,value:Math.round(Math.random() *1000) },
  120. { name:‘山|?西??‘,value:Math.round(Math.random() *1000) },
  121. { name:‘内¨2蒙¨|古?‘,value:Math.round(Math.random() *1000) },
  122. { name:‘吉a林￠?‘,value:Math.round(Math.random() *1000) },
  123. { name:‘福?ê建?§‘,value:Math.round(Math.random() *1000) },
  124. { name:‘广?东?‘,value:Math.round(Math.random() *1000) },
  125. { name:‘西??藏?‘,value:Math.round(Math.random() *1000) },
  126. { name:‘四?川??§‘,value:Math.round(Math.random() *1000) },
  127. { name:‘宁t夏?‘,value:Math.round(Math.random() *1000) },
  128. { name:‘香?港?‘,value:Math.round(Math.random() *1000) },
  129. { name:‘澳??门?‘,value:Math.round(Math.random() *1000) }
  130. ]
  131. },
  132. {
  133. name:‘iphone5‘,
  134. type:‘map‘,
  135. mapType:‘china‘,
  136. selectedMode: ‘single‘,
  137. itemStyle: {
  138. normal: { label: { show:true },color:‘#da70d6‘ },// for legend
  139. emphasis: { label: { show:true} }
  140. },
  141. data: [
  142. { name:‘北à?à京?‘,value:Math.round(Math.random() *1000) },
  143. { name:‘天?¨?津¨°‘,value:Math.round(Math.random() *1000) },
  144. { name:‘上|?海?ê‘,value:Math.round(Math.random() *1000) },
  145. { name:‘广?东?‘,value:Math.round(Math.random() *1000) },
  146. { name:‘台??§湾a?‘,value:Math.round(Math.random() *1000) },
  147. { name:‘香?港?‘,value:Math.round(Math.random() *1000) },
  148. { name:‘澳??门?‘,value:Math.round(Math.random() *1000) }
  149. ]
  150. }
  151. ]
  152. };
  153. //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。
  154. //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 ‘single‘即单选，也可多选
  155. varecConfig= require(‘echarts/config‘);
  156. myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
  157. varselected=param.selected;
  158. varmapSeries=option.series[0];
  159. vardata= [];
  160. varlegendData= [];
  161. varname;
  162. for (varp=0,len=mapSeries.data.length; p<len; p++) {
  163. name=mapSeries.data[p].name;
  164. mapSeries.data[p].selected=selected[name];
  165. if (selected[name]) {
  166. alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作
  167. }
  168. }
  169. });
  170. myChart.setOption(option);
  171. }
  172. );
  173. </script>

3.1.4  完成以上操作之后，效果如下图所示：

3.2 LineChart

除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例，其它的示例都是一样的。

3.2.1 跟3.1.1一样，引入echarts脚本

3.2.2 跟3.2.2一样，添加渲染图表的div容器

3.2.3 在3.2.2添加的div下添加如下js代码块

[csharp] view
plain copy

  1. <scripttype="text/javascript">
  2. require.config({
  3. paths: {
  4. echarts:‘./echarts/echarts‘,
  5. ‘echarts/chart/bar‘:‘./echarts/echarts‘,//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，
  6. 其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别
  7. ‘echarts/chart/line‘:‘./echarts/echarts‘
  8. }
  9. });
  10. require(
  11. [
  12. ‘echarts‘,
  13. ‘echarts/chart/bar‘,
  14. ‘echarts/chart/line‘
  15. ],
  16. function (ec) {
  17. varmyChart=ec.init(document.getElementById(‘main‘));
  18. option= {
  19. tooltip: {
  20. trigger:‘axis‘
  21. },
  22. legend: {
  23. data: [‘邮?¨o件t营?a销¨2‘,‘联￠a盟?广?告?‘,‘视o¨?频|ì广?告?‘,‘直?à接¨?访¤?问¨o‘,‘搜?索??引°y擎?‘]
  24. },
  25. toolbox: {
  26. show:true,
  27. feature: {
  28. mark:true,
  29. dataView: { readOnly:false },
  30. magicType: [‘line‘,‘bar‘],
  31. restore:true,
  32. saveAsImage:true
  33. }
  34. },
  35. calculable:true,
  36. xAxis: [
  37. {
  38. type:‘category‘,
  39. boundaryGap:false,
  40. data: [‘周¨1一°?‘,‘周¨1二t‘,‘周¨1三¨y‘,‘周¨1四?‘,‘周¨1五?‘,‘周¨1六￠¨′‘,‘周¨1日¨?‘]
  41. }
  42. ],
  43. yAxis: [
  44. {
  45. type:‘value‘,
  46. splitArea: { show:true }
  47. }
  48. ],
  49. series: [
  50. {
  51. name:‘邮?¨o件t营?a销¨2‘,
  52. type:‘line‘,
  53. stack:‘总á¨1量￠?‘,
  54. data: [120,132,101,134,90,230,210]
  55. },
  56. {
  57. name:‘联￠a盟?广?告?‘,
  58. type:‘line‘,
  59. stack:‘总á¨1量￠?‘,
  60. data: [220,182,191,234,290,330,310]
  61. },
  62. {
  63. name:‘视o¨?频|ì广?告?‘,
  64. type:‘line‘,
  65. stack:‘总á¨1量￠?‘,
  66. data: [150,232,201,154,190,330,410]
  67. },
  68. {
  69. name:‘直?à接¨?访¤?问¨o‘,
  70. type:‘line‘,
  71. stack:‘总á¨1量￠?‘,
  72. data: [320,332,301,334,390,330,320]
  73. },
  74. {
  75. name:‘搜?索??引°y擎?‘,
  76. type:‘line‘,
  77. stack:‘总á¨1量￠?‘,
  78. data: [820,932,901,934,1290,1330,1320]
  79. }
  80. ]
  81. };
  82. myChart.setOption(option);
  83. }
  84. );
  85. </script>
  86. <divid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  87. <scripttype="text/javascript">
  88. require.config({
  89. paths: {
  90. echarts:‘./echarts/echarts‘,
  91. ‘echarts/chart/bar‘:‘./echarts/echarts‘,
  92. ‘echarts/chart/line‘:‘./echarts/echarts‘
  93. }
  94. });
  95. require(
  96. [
  97. ‘echarts‘,
  98. ‘echarts/chart/bar‘,
  99. ‘echarts/chart/line‘
  100. ],
  101. function (ec) {
  102. varmyChart=ec.init(document.getElementById(‘main1‘));
  103. option= {
  104. title: {
  105. text:‘未??来¤??一°?周¨1气?温?变à?化?￥‘,
  106. subtext:‘纯??属o?虚¨|构1‘
  107. },
  108. tooltip: {
  109. trigger:‘axis‘
  110. },
  111. legend: {
  112. data: [‘最á?高?气?温?‘,‘最á?低ì¨a气?温?‘]
  113. },
  114. toolbox: {
  115. show:true,
  116. feature: {
  117. mark:true,
  118. dataView: { readOnly:false },
  119. magicType: [‘line‘,‘bar‘],
  120. restore:true,
  121. saveAsImage:true
  122. }
  123. },
  124. calculable:true,
  125. xAxis: [
  126. {
  127. type:‘category‘,
  128. boundaryGap:false,
  129. data: [‘周¨1一°?‘,‘周¨1二t‘,‘周¨1三¨y‘,‘周¨1四?‘,‘周¨1五?‘,‘周¨1六￠¨′‘,‘周¨1日¨?‘]
  130. }
  131. ],
  132. yAxis: [
  133. {
  134. type:‘value‘,
  135. axisLabel: {
  136. formatter:‘{value} °?C‘
  137. },
  138. splitArea: { show:true }
  139. }
  140. ],
  141. series: [
  142. {
  143. name:‘最á?高?气?温?‘,
  144. type:‘line‘,
  145. itemStyle: {
  146. normal: {
  147. lineStyle: {
  148. shadowColor:‘rgba(0,0,0,0.4)‘
  149. }
  150. }
  151. },
  152. data: [11,11,15,13,12,13,10]
  153. },
  154. {
  155. name:‘最á?低ì¨a气?温?‘,
  156. type:‘line‘,
  157. itemStyle: {
  158. normal: {
  159. lineStyle: {
  160. shadowColor:‘rgba(0,0,0,0.4)‘
  161. }
  162. }
  163. },
  164. data: [-2,1,2,5,3,2,0]
  165. }
  166. ]
  167. };
  168. myChart.setOption(option);
  169. }
  170. );
  171. </script>
  172. <divid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  173. <scripttype="text/javascript">
  174. require.config({
  175. paths: {
  176. echarts:‘./echarts/echarts‘,
  177. ‘echarts/chart/bar‘:‘./echarts/echarts‘,
  178. ‘echarts/chart/line‘:‘./echarts/echarts‘
  179. }
  180. });
  181. require(
  182. [
  183. ‘echarts‘,
  184. ‘echarts/chart/bar‘,
  185. ‘echarts/chart/line‘
  186. ],
  187. function (ec) {
  188. varmyChart=ec.init(document.getElementById(‘main2‘));
  189. option= {
  190. title: {
  191. text:‘某3楼￡¤盘¨?销¨2售o?情¨|况?‘,
  192. subtext:‘纯??属o?虚¨|构1‘
  193. },
  194. tooltip: {
  195. trigger:‘axis‘
  196. },
  197. legend: {
  198. data: [‘意°a向¨°‘,‘预?è购o‘,‘成¨|交?‘]
  199. },
  200. toolbox: {
  201. show:true,
  202. feature: {
  203. mark:true,
  204. dataView: { readOnly:false },
  205. magicType: [‘line‘,‘bar‘],
  206. restore:true,
  207. saveAsImage:true
  208. }
  209. },
  210. calculable:true,
  211. xAxis: [
  212. {
  213. type:‘category‘,
  214. boundaryGap:false,
  215. data: [‘周¨1一°?‘,‘周¨1二t‘,‘周¨1三¨y‘,‘周¨1四?‘,‘周¨1五?‘,‘周¨1六￠¨′‘,‘周¨1日¨?‘]
  216. }
  217. ],
  218. yAxis: [
  219. {
  220. type:‘value‘
  221. }
  222. ],
  223. series: [
  224. {
  225. name:‘成¨|交?‘,
  226. type:‘line‘,
  227. smooth:true,
  228. itemStyle: { normal: { areaStyle: { type:‘default‘}} },
  229. data: [10,12,21,54,260,830,710]
  230. },
  231. {
  232. name:‘预?è购o‘,
  233. type:‘line‘,
  234. smooth:true,
  235. itemStyle: { normal: { areaStyle: { type:‘default‘}} },
  236. data: [30,182,434,791,390,30,10]
  237. },
  238. {
  239. name:‘意°a向¨°‘,
  240. type:‘line‘,
  241. smooth:true,
  242. itemStyle: { normal: { areaStyle: { type:‘default‘}} },
  243. data: [1320,1132,601,234,120,90,20]
  244. }
  245. ]
  246. };
  247. myChart.setOption(option);
  248. }
  249. );
  250. </script>

3.2.4 完成以上操作之后效果图如下：

好了，今天就总结到这里了，希望能给大家带来一些帮助。这里主要是介绍地图控件的使用，因为其官方文档上关于路径的配置写的很不清楚，所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单，大家可以参考官方的文档。http://echarts.baidu.com/doc/doc.html

时间： 2024-11-07 07:31:27

ECharts案例简单介绍的相关文章

ECharts案例教程2

p{text-indent:2em;}th,td{border:1px solid #333;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 ECharts案例教程系列文章,试图通过案例从入门到精通的方式学习数据可视化工具ECharts,第1篇我们通过简单的条形图.条形图和折线图的混搭两个案例描述ECharts的使用流程,数据配置框架等.本博文为第2篇,研究时间轴在数据图中的应用. ------------------------------------------------

JSF简单介绍

JSF简单介绍 一. 什么是 JSF: JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架.它提供了一种以组件为中心来开发 Java Web 用户界面的方法,从而简化了开发. JavaServer Faces于2004年三月1.0版正式提出,清楚的将Web应用程序的开发者划分了三个角色:网页设计人员.应用程序设计人员以及UI组件开发者. 从使用的角度来看,网页设计人员与应用程序设计人员能够他们所熟悉的方式开发程序,而不用侵入彼此的工作范围,而U

xml简单介绍及libmxml编程

今天我们来简单介绍一下,关于xml的一些内容,包括自己编写一些程序进行生成和解析. 首先我们我们还是从xml的演化历史来了解一下它吧. 历史演化 GML: 在20世纪60年代为了促进数据交换和操作,通过IBM公司研究人员的杰出工作,得出了重要的结论:要提高系统的移植性,必须采用一种通用的文档格式,这种文档的格式必须遵守特定的规则.这也就是创建通用标记语言(外语全称:Generalized Markup Language.外语缩写:GML)的指导原则,从人们所产生的将文件结构化为标准的格式的动机出

linux简单介绍，helloworld，vi使用，用户管理

linux特点1.免费的.开源的2.支持多线程.多用户的3.安全性好4.对内存和文件管理优越 缺点:操作相对困难 linux最小只需要4m -> 嵌入式开发 我们使用 vm[虚拟机] 虚拟了一个 linux startx 进入图形化界面图形界面注销回到命令行 linux命令 shutdown -h now 立刻进行关机shotdown -r now 重启计算机reboot 重启计算机 su - 登陆时尽量少用root登陆,因为它是系统管理员,最大的权限,避免操作失误,可以利用普通用户登录,登陆后

为什么我要用 Node.js? 案例逐一介绍

介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScript ,从前端跨越到后端,这样巨大的反差让人难以想象,因为仅仅在几年前 Javascript 还如同 Flash 或者 Java applet 那样嵌入网页在沙箱环境中运行. 在深入Node.js之前,你可能需要阅读和了解使用跨栈式JavaScript(JavaScript across the stack)带来的好处,它统

《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言

http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn.net/download/hdzn0603/7421803 内容简单介绍 <HTML 5网页开发实例具体解释>从实际的应用场景出发.结合当下的热门技术.深入浅出地介绍了 HTML 5所包括的各项新技术. 本书分为 14章.第 1~4章介绍了 HTML 5和浏览器的发展史. HTML 5新特性的使用

《PHP 5.5从零開始学（视频教学版）》内容简单介绍、文件夹

<PHP 5.5从零開始学(视频教学版)>当当网购买地址: http://product.dangdang.com/23586810.html <PHP 5.5从零開始学(视频教学版)>源码.教学视频下载地址: http://pan.baidu.com/s/1zt9hW 内 容 简 介 本书循序渐进地介绍了PHP 5.5开发动态站点的主要知识和技能,提供了大量的PHP应用实例供读者实践.每一章节都清晰讲述了代码作用及其编写思路,使读者能在最短时间内迅速掌握PHP的应用开发技能. 全

iOS开发——实用技术OC篇&amp;?Invocation简单介绍

Invocation简单介绍 方法一:运行时方法:(这里在之前的文章定时器的几种方法中说过:www.cnblogs.com/iCocos/p/4694581.html) 1:创建一个签名: NSMethodSignature *singature = [NSMethodSignature signatureWithObjCTypes:"[email protected]:"]; 这里我想如果你仔细的话肯定注意到了:后面的“[email protected]:”,这里是运行时的语法在这里

Cisco VPP(1) 简单介绍

一.简单介绍 VPP全称Vector Packet Processing.是Cisco2002年开发的商用代码. 2016年2月11号,Linux基金会创建FD.io项目.Cisco将VPP代码的开源版本号加入该项目.眼下已成为该项目的核心. VPP执行于用户空间,支持多种收包方式,经常使用的是DPDK. VPP主要有两个主要功能:框架可扩展:成熟的交换/路由功能. 二.扩展性 1.结点操作 VPP平台是通过graphnode串联起来处理数据包.相似于freebsd的netgraph. 通过插件