首先谢谢林峰老师，继续接着第七篇提到的内容。CSS布局确实非常累，感觉不好看了就的调整，总的看起来的高大上嘛。好了废话不再多说。今天主要就先解说一个页面的内容，对于CSS布局后面讲会具体的介绍给大家。
另外我写的搭配时间轴地图扩展被ECharts採用，http://echarts.baidu.com/doc/example/map19.html

（2）整体内容
    专题包括有例如以下五块：

1）大海战全程： 实时描写叙述大海战

2）国力对照篇： 中日战前、战后国力对照

3）装备对照篇： 海军实力全方位对照

4）历史人物篇： 中日决策关键人物

5）殉国将领篇： 纪念北洋海军殉国将领

布局例如以下：
    

（2）具体讲述装备对照篇中的-军力对照

首先上图：

（3）代码具体解释
  为了让代码书写的更加有规范性，js和html以及CSS全面分离。

js部分结构例如以下：
  

warship04Test.js代码例如以下：

  require.config({paths:{ echarts:'./js/echarts','echarts/chart/bar' : './js/echarts-map','echarts/chart/line': './js/echarts-map','echarts/chart/radar':'./js/echarts-map'}});require(['echarts','echarts/chart/bar','echarts/chart/line','echarts/chart/radar'],function (ec) {//data : ['总排水量','总兵力','鱼雷发射管','编队马力','火炮数量','平均航速']var myChart1bottom = ec.init(document.getElementById('warship01_bottom'));myChart1bottom.setOption({tooltip : {trigger: 'axis',formatter:function(a,b,c){var res_jiawu= a[0][0]+'<br/>'+a[0][3];for(var i=0;i<a.length;i++){     switch(a[0][3]){case '总排水量':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'吨'; break;case '编队马力':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'匹';break;case '大口径火炮数':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'门';break;case '火炮：一分钟投弹数量':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'发';break;case '火炮：一分钟投射重量':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'千克';break;case '速射炮数量':res_jiawu+='<br/>'+a[i][1]+':'+a[i][2]+'门';break;}  }return res_jiawu;}},legend: {orient : 'vertical',x : 'right',y : 'bottom',data:['北洋舰队','日本联合舰队']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},polar : [{indicator : [{ text: '总排水量', max: 50000},{ text: '编队马力', max: 70000},{ text: '大口径火炮数', max: 200},{ text: '火炮：一分钟投弹数量', max: 300},{ text: '火炮：一分钟投射重量', max: 6000},{ text: '速射炮数量', max: 100}]}],calculable : true,series : [{name: '北洋舰队 vs 日本联合舰队',type: 'radar',data : [{value : [32100, 42200, 58, 22, 1864, 0],name : '北洋舰队'},{value : [40840, 68900, 104, 232,5965, 89],name : '日本联合舰队',itemStyle:{normal:{label:{show:true,textStyle:{color:'green'},formatter:function(a,b,c){switch(b){case '总排水量':var res= c +'吨';break;case '编队马力':var res= c +'匹';break;case '大口径火炮数':var res= c +'门';break;case '火炮：一分钟投弹数量':var res= c + '发';break;case '火炮：一分钟投射重量':var res= c +'千克';break;case '速射炮数量':var res= c +'门';break;}return res;}}}}}]}]});});

军费对照页面例如以下：

代码例如以下：

    require.config({paths:{ echarts:'./js/echarts','echarts/chart/bar' : './js/echarts-map','echarts/chart/line': './js/echarts-map','echarts/chart/map' : './js/echarts-map'}});require(['echarts','echarts/chart/bar','echarts/chart/line','echarts/chart/map','echarts/chart/pie'],function (ec) {var myChart4 = ec.init(document.getElementById('warship04'));myChart4.setOption({tooltip : {trigger: 'axis'},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,legend: {data:['北洋舰队军费','日本海军军费','日中军费比值']},xAxis : [{type : 'category',data : ['1876年','1877年','1878年','1880年','1881年','1882年','1884年','1885年','1886年','1888年','1889年','1893年']}],yAxis : [{type : 'value',name : '白银',axisLabel : {formatter: '{value} 万两'}},{type : 'value',name : '日本军费/北洋军费'}],series : [{name:'北洋舰队军费',type:'bar',data:[200.0, 200.0, 57.0, 57.2, 410.6, 160.7, 210.6, 600.2, 198.6, 200.0, 200.4, 210.3],markLine:{data:[{type : 'average', name: '平均值'}]}},{name:'日本海军军费',type:'bar',data:[400.0, 401.0, 200.0, 230.4, 600.7, 360.7, 670.6, 830.2, 760.7, 818.8, 1100.0, 760.3],// data:[200.0, 200.0, 57.0, 57.2, 410.6, 160.7, 210.6, 600.2, 198.6, 200.0, 200.4, 210.3]markLine:{data:[{type : 'average', name: '平均值'}]}},{name:'日中军费比值',type:'line',yAxisIndex: 1,data:[2.0, 2.005, 3.5, 4.03, 1.462, 2.245, 3.184, 1.383, 3.830,4.094, 5.49, 3.62]}]});});

其他很多其他内容下次继续分享。谢谢大家。本周就先写到这里。