首先谢谢林峰老师,继续接着第七篇提到的内容,CSS布局确实很累,感觉不好看了就的调整,总的看起来的高大上嘛,好了废话不再多说。今天主要就先讲解一个页面的内容,对于CSS布局后面讲会详细的介绍给大家。
另外我写的搭配时间轴地图扩展被ECharts采用,http://echarts.baidu.com/doc/example/map19.html
(2)总体内容
专题包含有如下五块:
1)大海战全程: 实时描述大海战
2)国力对比篇: 中日战前、战后国力对比
3)装备对比篇: 海军实力全方位对比
4)历史人物篇: 中日决策关键人物
5)殉国将领篇: 纪念北洋海军殉国将领
(2)详细讲述装备对比篇中的-军力对比
(3)代码详解
为了让代码书写的更加有规范性,js和html以及CSS全面分离。
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]+'
'+a[0][3];
for(var i=0;i " +a[i][1]+':'+a[i][2]+'吨';="" break;="" '编队马力':="" +a[i][1]+':'+a[i][2]+'匹';="" '大口径火炮数':="" +a[i][1]+':'+a[i][2]+'门';="" '火炮:一分钟投弹数量':="" +a[i][1]+':'+a[i][2]+'发';="" '火炮:一分钟投射重量':="" +a[i][1]+':'+a[i][2]+'千克';="" '速射炮数量':="" }="" return="" res_jiawu;="" },="" legend:="" orient="" :="" 'vertical',="" x="" 'right',="" y="" 'bottom',="" data:['北洋舰队','日本联合舰队']="" toolbox:="" show="" true,="" feature="" mark="" {show:="" true},="" dataview="" readonly:="" false},="" restore="" saveasimage="" true}="" polar="" [="" indicator="" text:="" '总排水量',="" max:="" 50000},="" '编队马力',="" 70000},="" '大口径火炮数',="" 200},="" '火炮:一分钟投弹数量',="" 300},="" '火炮:一分钟投射重量',="" 6000},="" '速射炮数量',="" 100}="" ]="" ],="" calculable="" series="" name:="" '北洋舰队="" vs="" 日本联合舰队',="" type:="" 'radar',="" data="" value="" [32100,="" 42200,="" 58,="" 22,="" 1864,="" 0],="" name="" '北洋舰队'="" [40840,="" 68900,="" 104,="" 232,5965,="" 89],="" '日本联合舰队',="" itemstyle:{="" normal:{="" label:{="" show:true,="" textstyle:{color:'green'},="" formatter:function(a,b,c){="" switch(b)="" var="" res="c" +'吨';="" +'匹';="" +'门';="" +="" '发';="" +'千克';="" res;="" });="" );<="" code="">
代码如下:
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]
}
]
});
}
);
其它更多内容下次继续分享,谢谢大家!本周就先写到这里。
你可能感兴趣的:(【开源夏令营】,ECharts开发,百度,ZRender,数据可视化,Echarts,javascript)