CSDN開源夏令營 百度資料視覺效果實踐 ECharts（8），csdnecharts

CSDN開源夏令營 百度資料視覺效果實踐 ECharts（8），csdnecharts
（1）前言

首先謝謝林峰老師，繼續接著第七篇提到的內容，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]        }    ]});        }    );

其它更多內容下次繼續分享，謝謝大家！本周就先寫到這裡。

要有怎的基礎才可以參加ACM編程大賽與CSDN開源夏令營

三本大學生？？據我瞭解2本好像得400多分將近500分吧，你這3本，就別去比什麼賽了吧，混個文憑找個工作就算了！