标签：echarts zrender 数据可视化 百度 javascript
CSDN开源夏令营 百度数据可视化实践 ECharts 11 （期末总结）
致谢：
CSDN开源夏令营马上就要结束了，随着ECharts专题列入百度ECharts官网，任务就算是基本完成了。再次谢谢林峰老师！回想两个月前听到CSDN要举办这个活动，第一感觉是非常棒，所有就积极看了看所有的项目，项目总体质量很棒，涉及的方面也很广，有云与大数据方面的、有前端与移动方面的、嵌入式与智能硬件方面的、其中linux方面的也很多，总之项目很丰富，也都很有挑战。CSDN是第一年举办这样的活动，虽然时间准备上有些仓促外，总体上组织的很好，在做项目的过程中CSDN的工作人员的服务态度也很好，积极帮忙解决问题，在这里感谢为开源夏令营付出心血和汗水的CSDN工作人员，希望CSDN开源夏令营能越办越好，能为中国的开源事业做出更大的贡献！
开源夏令营感想博客请看：开源夏令营是一段共同成长的人生经历，我会记住的（点个赞哦！呵呵）
专题系类：
（1）专题内容（包括五块）
1）大东沟海战全程，时间轴和散点图的结合。
2）中日国力对比篇
国力对比包含：战争前、战争中和战争后三个方面，从人口数、国土面积、政府财政收入、动员总兵力、死伤总数、战舰数量、战舰总吨位、水雷艇、炮舰数量等方面对比。
使用柱状图突出中日对比。
3）中日装备对比篇
包含5个方面：体制对比、军力对比、军舰对比、造价对比、军费对比。
散点图、雷达图、柱状图、折线图、等等。
4）中日历史人物篇
中日关键人物、中日决策你模式对比。
使用力导向图理清中日关键人物之间的联系。
5）北洋舰队殉国将领篇
祭奠北洋舰队殉国将领，使用散点图。
（2）项目结构（主要包含五部分）
文件名称：Sino-Japanese-war-1895
以上文件必须放在ECharts文件中的topic子文件中，因为还有很多ECharts本身的很多库要用。
js子文件夹：
fonts子文件夹：
CSS子文件夹：
代码系列：
这里的CSS文件比较多，大家有兴趣的可以到CODE中下载源代码，我已经全部上传，地址在最后给出。这里主要讲主页面和主要的js文件。
index.html 主页面
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts 甲午之殇：纪念甲午战争120周年专题</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="the Sino-Japanese War">
<meta name="author" content="linzhifeng@baidu.com">
<link href="../../../asset/css/bootstrap.min.css" rel="stylesheet">
<script src="../../../asset/js/esl/esl.js"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/jiawu_misc.css">
<link type="text/css" rel="stylesheet" href="css/easy-responsive-tabs.css" />
<link href="css/jiawu_style.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/jiawu_custom.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
</script>
</head>
<body>
<!-- HEADER start -->
<!--
<div class="logocontainer">
-->
<div class="container">
<div class="row" style="margin-left:0px;margin-right:0px;">
<h1 style="margin-left:0px">甲午之殇：纪念甲午战争120周年</h1>
<div class="clear"></div>
<div class="templatemo_smalltitle" style="margin-left:10px">中日实力全面对比：让数据说话</div>
</div>
</div>
<!-- HEADER end -->
<div id="menu-container" class="main_menu">
<!-- homepage start -->
<div class="content homepage" id="menu-1">
<div class="container">
<div class="col-md-3 col-sm-6 templatemo_leftgap">
<div class="templatemo_mainservice templatemo_botgap">
<div class="templatemo_link"><a class="show-2 templatemo_page2" href="#" onclick="setOptionBigwar();">大海战全程</a></div>
</div>
<div class="templatemo_mainimg"><img src="images/jiawu01.jpg" alt="home img 01" style="height: 314px;"></div>
</div>
<div class="col-md-3 col-sm-6 templatemo_leftgap">
<div class="templatemo_mainimg templatemo_botgap templatemo_portfotopgap"><img src="images/jiawu02.jpg" alt="home img 02" style="height: 314px;"></div>
<div class="templatemo_mainportfolio">
<div class="templatemo_link"><a class="show-3 templatemo_page3" href="#" onclick="setOptionNation00();">国力对比篇</a></div>
</div>
</div>
<div class="col-md-3 col-sm-6 templatemo_leftgap">
<div class="templatemo_maintesti templatemo_botgap templatemo_topgap">
<div class="templatemo_link"><a class="show-4 templatemo_page4" href="#" onclick="setOptionWarship00();">装备对比篇</a></div>
</div>
<div class="templatemo_mainimg"><img src="images/jiawu03.jpg" alt="home img 03" style="height: 314px;"></div>
</div>
<div class="col-md-3 col-sm-6 templatemo_leftgap">
<div class="templatemo_mainimg templatemo_botgap templatemo_topgap">
<img src="images/jiawu04.jpg" alt="home img 04" style="height: 150px;">
</div>
<div class="templatemo_mainabout templatemo_botgap">
<div class="templatemo_link"><a class="show-5 templatemo_page5" href="#" onclick="setOptionRelation00();">历史人物篇</a></div>
</div>
<div class="templatemo_maincontact">
<div class="templatemo_link"><a class="show-6 templatemo_page6" href="#" onclick="setOptionScatter00();">殉国将领篇</a></div>
</div>
</div>
</div>
</div>
<!-- homepage end -->
<!--大海战全程 start -->
<div class="content services" id="menu-2">
<div class="container">
<div class="row templatemo_bordergapborder" style="padding-left:0px;padding-right:0px;">
<div class="col-md-3 col-sm-12 templatemo_leftgap">
<!--第一层框架 -->
<div class="templatemo_mainimg templatemo_botgap">
<img src="images/jiawu201.jpg" alt="service image">
</div>
<div class="templatemo_mainimg templatemo_botgap">
<div class="templatemo_jiawu01">
<div class="templatemo_frame">
<h2 style="text-align:center" ><font style="font-family:'隶书'">中日-大东沟海战</font></h2>
<p><br>
大东沟海战是中日甲午战争中双方海军主力在黄海北部海域进行的一场战役规模的海战。
亦称中日甲午海战、黄海海战。此役北洋水师失利，自此退入威海卫，使黄海制海权落入日本联合舰队之手，决定了甲午战争的中方的战败。
</p>
</div>
</div>
</div>
<!--第二层框架 -->
<div class="templatemo_mainservice templatemo_botgap">
<div class="templatemo_linkservice"><a class="show-1 templatemo_homeservice" href="#" onclick="disposeBigwar();">返回</a></div>
</div>
</div>
<div class="templatemo_col75 col-sm-12 templatemo_leftgap" style="padding-right:0px;">
<div class="templatemo_graybg01" style="height:655px;">
<div class="templatemo_frame"id="bigwarship00" style="height:610px;width:810px;">
<h2>大东沟海战全程</h2>
<div class="clear"></div>
<p>历史背景：1894年7月25日，日本联合舰队第一游击队在丰岛海域突然袭击北洋水师的济远和广甲两艘巡洋舰，即丰岛海战，甲午战争爆发。北洋水师和联合舰队面临著相同的任务：护送援军、争夺朝鲜半岛附近海域的制海权。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 大海战全程 end -->
<!-- 国力对比篇 start -->
<div class="portfolio" id="menu-3" style="display: none;" >
<div class="container">
<div class="col-md-3 col-sm-6 templatemo_leftgap"style="padding-left:10px;">
<div class="templatemo_insideportfolio templatemo_botgap">
<div class="templatemo_portfoliotext">
<h2>大清：没落的王朝</h2>
<div class="clear"></div>
<br>
两次鸦片战争失败之后，清政府中的洋务派开始着手进行改革，以“自强”和“求富”为口号进行了一场大规模学习西方工业化的运动。但这是一场在维护封建皇权的前提下进行的改良运动，没有触及政治体制。
</div>
</div>
<div class="templatemo_insideportfolio templatemo_botgap">
<div class="templatemo_portfoliotext">
<h2>日本：崛起的帝国</h2>
<div class="clear"></div>
<br>
在大清进行洋务运动的同时，邻邦日本也开启了一场学习西方之路。维新人士以“富国强兵”、“殖产兴业”、“文明开化”为理念进行改革。明治维新将一个被迫与西方签订不平等条约的日本从被殖民的边缘拉回来，走上富强之路。
</div>
</div>
<div class="templatemo_portfolioback">
<div class="templatemo_link"><a class="show-1 templatemo_homeportfolio" href="#" onclick="disposeNation00();">返回</a></div>
</div>
</div>
<div class="templatemo_col75 col-sm-6 templatemo_botgap" style="height:814px;padding-right:8px;">
<div class="templatemo_jiawu01">
<div class="templatemo_frame" id="national00" style="height:300px;width:800px;">
</div>
</div>
<div class="templatemo_graybg"style="height:494px;">
<div class="templatemo_frame" id="national00Test" style="height:400px;width:810px;">
</div>
</div>
</div>
</div>
</div>
<!-- 国力对比篇 end -->
<div class="copyrights">Collect from <a href="#" >ECharts@baidu</a></div>
<!-- 装备对比篇 start -->
<div class="content testimonial" id="menu-4">
<div class="container">
<div class="row templatemo_bordergapborder" style="padding-left:6px;padding-right:0px;">
<div id="cmt">
<div class="col-md-3 col-sm-12 templatemo_leftgap_about">
<ul class="resp-tabs-list templatemo_testitab">
<li>体制对比</li>
<li>军力对比</li>
<li>军舰对比</li>
<li>造价对比</li>
<li>军费对比</li>
</ul>
<div class="templatemo_aboutlinkwrapper" style="width:263px;">
<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="index.html" onclick="disposeWarship00();">返回</a></div>
</div>
</div>
<div class="resp-tabs-container templatemo_testicontainer">
<div >
<div class="templatemo_col100 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap">
<div class="templatemo_frame" id="warship00" style="height:300px;width:810px;">
<h2>中日海军体制对比</h2>
<p></p>
</div>
<div class="templatemo_mainimg templatemo_botgap">
<div class="templatemo_jiawu01">
<div class="templatemo_frame">
<h2 style="text-align:center" >甲午海战-体制问题是首因</h2>
<p><br>
清朝海军属于分属节制，实际上仍是一种“绿营水师”体制，分散了国家本就有限的财力，与现代海军集中建设使用的要求格格不入。
日本海军有海军省统一管辖，并且改革兵役制度，培养造就军事人才，对领导指挥体制进行全面改造。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div id="mainPie" class="templatemo_col10 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap">
<div class="templatemo_frame" id="warship01" style="height:300px;width:810px;">
<h2>军力对比</h2>
<p></p>
</div>
<div class="templatemo_mainimg templatemo_botgap">
<div class="templatemo_jiawu01">
<div class="templatemo_frame" id="warship01_bottom" style="height:295px;width:810px;">
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="templatemo_col100 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap">
<div class="templatemo_frame" id="warship02" style="height:600px;width:810px;">
<h2>军舰差距</h2>
<p> </p>
</div>
</div>
</div>
</div>
<div>
<div class="templatemo_col100 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap">
<div class="templatemo_frame" id="warship03" style="height:350px;width:810px;">
<h2>造价对比</h2>
</div>
<div class="templatemo_mainimg templatemo_botgap">
<div class="templatemo_jiawu01">
<div class="templatemo_frame">
<h2 style="text-align:center" >为何会败？-缺乏长远规划和持续投入</h2>
<p><br>
北洋海军自1888年正式建军后，就再没有增添任何舰只，舰龄渐渐老化，与日本新添的战舰相比之下，火力弱，行动迟缓。1891年以后，连枪炮弹药都停止购买了。
1890年后，日本以国家财政收入的60％来发展海、陆军，1893年起，明治天皇决定每年从自己的宫廷经费中拨出三十万元，再从文武百官的薪金中抽出十分之一，
补充造船费用。举国上下士气高昂，以赶超中国为奋斗目标，准备进行一场以“国运相赌”的战争。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="templatemo_col100 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap">
<div class="templatemo_frame" id="warship04" style="height:300px;width:810px;">
<h2>军费对比</h2>
<p></p>
</div>
<div class="templatemo_mainimg templatemo_botgap">
<div class="templatemo_jiawu01">
<div class="templatemo_frame" id="warship04_bottom" style="height:310px;width:810px;">
<h2 style="text-align:center" ><font style="font-family:'隶书'">中日-大东沟海战</font></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 templatemo_leftgap templatemo_aboutlinkwrapper1">
<div class="templatemo_aboutback templatemo_botgap">
<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="#">返回</a></div>
</div>
</div>
</div>
</div>
<!-- 装备对比篇 end -->
<!-- 历史人物篇 start -->
<div class="content about" id="menu-5">
<div class="container">
<div class="row templatemo_bordergapborder" style="padding-left:4px;padding-right:0px;">
<div id="ab">
<div class="col-md-3 col-sm-12 templatemo_leftgap_about">
<ul class="resp-tabs-list templatemo_tab">
<li>大清关键人物</li>
<li>日本关键人物</li>
<li>中日决策模式对比</li>
</ul>
<div class="templatemo_aboutlinkwrapper" style="width:264px;">
<div class="templatemo_link"><a class="show-1 templatemo_homeabout" href="#">返回</a></div>
</div>
</div>
<div class="resp-tabs-container templatemo_aboutcontainer">
<div>
<div class="templatemo_col80 templatemo_rightgap_about">
<div class="templatemo_graybg templatemo_botgap">
<div class="templatemo_frame" id="relation00" style="height:400px;width:810px;">
<h2>大清关键人物</h2>
<p>李鸿章、邓世昌</p>
</div>
</div>
</div>
</div>
<div>
<div class="templatemo_col80 templatemo_rightgap_about">
<div class="templatemo_graybg templatemo_botgap">
<div class="templatemo_frame" id="relation01" style="height:400px;width:810px;">
<h2>日本关键人物</h2>
<p> 伊藤博文、日本明治天皇睦仁</p>
</div>
</div>
</div>
</div>
<div>
<div class="templatemo_col80 templatemo_rightgap_about">
<div class="templatemo_graybg templatemo_botgap">
<div class="templatemo_frame">
<h2>战争爆发：中日决策模式对比</h2><br>
<p><b>日本：即使找不到正当借口也誓要兴战</b></p>
<p>陆奥宗光《蹇蹇录》：川上的出兵主张得到了外相陆奥宗光、首相伊藤博文及天皇的一致认同。
但在如何挑起战争这一问题上，伊藤博文与陆奥宗光等均深感为难。如陆奥宗光后来回忆，当时“既无迫切的原因，又无表面上的适当借口”，故自6月2日秘密决定对清开战，
至7月25日丰岛海战爆发，“之所以需要大约两个月的时间，说穿了就是为了寻找直接开战的理由。”</p><br>
<p><b>清朝：内部深陷党争，无论主战、主和，均无法有效贯彻</b></p>
<p>
清国高层，其情形与日本迥然不同，和、战争执始终未休。驻朝清军将领叶志超曾向李鸿章献上中下三策：“派军增援”、“撤军回国”、“守此不动”。李鸿章欲取中策，但遭光绪反对，理由是：“彼顿兵不动，我先行撤退，既嫌示弱，且将来进剿，徒劳往返，殊属非计”。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 templatemo_leftgap templatemo_aboutlinkwrapper1">
<div class="templatemo_aboutback templatemo_botgap">
<div class="templatemo_link"><a class="show-1 templatemo_homeabout" href="#" onclick="disposeRelation00();">返回</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- 历史人物篇 end -->
<!-- 殉国将领篇 start -->
<div class="content contact" id="menu-6">
<div class="container">
<div class="row templatemo_bordergapborder" style="padding-left:4px;padding-right:0px;">
<div class="col-md-3 col-sm-12 templatemo_leftgap">
<div class="templatemo_mainimg templatemo_botgap">
<img src="images/jiawubeiyang.jpg" alt="contact image">
</div>
<div class="templatemo_insideportfolio templatemo_botgap">
<div class="templatemo_portfoliotext">
<h2>纪念北洋舰队:<br>殉国将领</h2>
<div class="clear"></div>
最初参加黄海海战的北洋水师11位高级将领中有7位是通过自杀方式“殉国”的，自杀率竟高达60%以上,其中3位将领邓世昌、黄建勋、林履中是在黄海海战中与舰同沉，其余将领多是吞鸦片自杀。
</div>
</div>
<div class="templatemo_maincontact templatemo_botgap">
<div class="templatemo_linkcontact"><a class="show-1 templatemo_homecontact" href="#" onclick="disposeScatter00();">返回</a></div>
</div>
</div>
<div class="templatemo_col75 templatemo_rightgap_about">
<div class="templatemo_graybg03 templatemo_botgap" style="height: 678px;">
<div class="templatemo_frame" id="scatter00" style="height:610px;width:810px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 殉国将领篇 end -->
<!-- footer end -->
</div>
<div class="container">
<div class="row">
<div class="templatemo_footer" style="margin-right:12px;" >
Copyright © 2014 <a href="http://weibo.com/u/3798120772" target="_blank" >付建海 </a>(ECharts夏令营) · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）
<p style="text-align:center" ><a href="http://echarts.baidu.com" target="_blank">Data Visualization by ECharts</a></p>
</div>
</div>
</div>
<!-- footer end -->
<!--core start -->
<script language="JavaScript" src="js/warship01.js" charset="gbk"></script>
<script language="JavaScript" src="js/relation00.js" charset="gbk"></script>
<script language="JavaScript" src="js/national00.js" charset="gbk"></script>
<script language="JavaScript" src="js/bigwarship00.js" charset="gbk"></script>
<script language="JavaScript" src="js/scatter00.js" charset="gbk"></script>
<script language="JavaScript" src="js/ready.js" charset="gbk"></script>
<!--core end -->
</body>
</html>
bigwarship00.js 代码比较长，大家可以下载下来看，实现功能大海战。
national00.js 代码 实现功能：国力对比篇
var fileLocation = '../../www/js/echarts-map';
require.config({
paths:{
echarts:fileLocation,
'echarts/chart/bar' : fileLocation,
'echarts/chart/line': fileLocation
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
]
);
//(1) national
var national ;
function disposeNation00(){
//setTimeout(disposeNation00(),5000);
if(national)
{
national.dispose();
national=false;
}
disposeNation00Test();
}
function setOptionNation00() {
setOptionNation00Test();
var ec = require('echarts');
national = ec.init(document.getElementById('national00'));
national.setOption({
title : {
text: '中日战前国力对比',
subtext: '数据来自新浪军事、腾讯军事'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['大清', '日本']
},
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,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['人口总数','国土面积','年政府财政收入']
}
],
series : [
{
name:'大清',
type:'bar',
barMinHeight:5,
itemStyle : { normal: {
label : {
formatter:function(a,b,c)
{
switch(b)
{
case '人口总数':
var res_value=c+'万人口';
break;
case '国土面积':
var res_value=c+'万平方公里';
break;
case '年政府财政收入':
var res_value=c+'万两白银';
break;
}
return res_value;
},show: true,textStyle:{color:'#704214'}}}},
data:[40000,1000, 8867]
//itemStyle : { normal: {label : {position: 'inside'}}}
},
{
name:'日本',
type:'bar',
barMinHeight:5,
itemStyle : { normal: {
label : {
formatter:function(a,b,c)
{
switch(b)
{
case '人口总数':
var res_value=c+'万人口';
break;
case '国土面积':
var res_value=c+'万平方公里';
break;
case '年政府财政收入':
var res_value=c+'万两白银';
break;
}
return res_value;
},
show: true,textStyle:{color:'#008B8B'}}}},
data:[4000, 37, 7885]
}
]
});
}
//(2) national_Test
var national_Test;
function disposeNation00Test(){
//setTimeout(disposeNation00Test(),5000);
if(national_Test)
{
national_Test.dispose();
national_Test=false;
}
}
function setOptionNation00Test() {
var ec = require('echarts');
national_Test = ec.init(document.getElementById('national00Test'));
national_Test.setOption({
title :{
text : '战中、战后对比'
},
tooltip : {
//trigger: 'axis'
trigger: 'item'
},
legend: {
show:false,
x : 'center',
y : 'bottom',
data:['大清', '日本']
},
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,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['动员兵力','炮舰数量','水雷艇','战舰总吨位','死伤总数']
}
],
series : [
{
name:'大清',
type:'bar',
barMinHeight:5,
itemStyle : { normal: {
label : {
formatter:function(a,b,c)
{
switch(b)
{
case '动员兵力':
var res_value=c*10000+'人';
break;
case '炮舰数量':
var res_value=c+'艘';
break;
case '水雷艇':
var res_value=c+'艘';
break;
case '战舰总吨位':
var res_value=c+'万吨';
break;
case '死伤总数':
var res_value=c+'万人';
break;
}
return res_value;
},
show: true,textStyle:{color:'#008B8B'}}}},
data:[96.2463,82,25,8.5000,3.5000]
//itemStyle : { normal: {label : {position: 'inside'}}}
},
{
name:'日本',
type:'bar',
barMinHeight:5,
itemStyle : { normal: {
label : {
formatter:function(a,b,c)
{
switch(b)
{
case '动员兵力':
var res_value=c*10000+'人';
break;
case '炮舰数量':
var res_value=c+'艘';
break;
case '水雷艇':
var res_value=c+'艘';
break;
case '战舰总吨位':
var res_value=c+'万吨';
break;
case '死伤总数':
var res_value=c*10000+'人';
break;
}
return res_value;
},show: true,textStyle:{color:'#704214'}}}},
data:[24.0616,28,24,5.9106,1.3488]
}
]
});
}
var fileLocation = '../../www/js/echarts-map';
require.config({
paths:{
echarts:fileLocation,
'echarts/chart/bar' : fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/scatter':fileLocation
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/scatter'
]
);
var scatter0 ;
function disposeScatter00(){
//setTimeout(disposeScatter00(),5000);
if(scatter0)
{
scatter0.dispose();
scatter0=false;
}
}
function setOptionScatter00() {
var ec = require('echarts');
scatter0 = ec.init(document.getElementById('scatter00'));
scatter0.setOption({
title : {
text: '北洋舰队殉国将领'
},
tooltip : {
trigger: 'item',
showDelay : 0,
axisPointer:{
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (value) {
return '北洋水师:'+value[0]+'<br/>'+value[1];
}
},
legend: {
data:['水师提督','水师管带']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
power: 1,
precision: 2,
scale:true,
splitNumber:10,
min:0,
max:800,
axisLabel:false,
axisLine:false
}
],
yAxis : [
{
type : 'value',
power: 1,
precision: 2,
scale:true,
min:0,
max:600,
splitNumber:10,
axisLabel:false,
axisLine:false
}
],
series : [
{
name:'水师提督',
type:'scatter',
symbolSize:50,
itemStyle: {
normal : {
label : {
show: true,
formatter : function(a,b,c)
{
switch(b)
{
case '丁汝昌':
var res_name=b+'\n'+'['+a+']\n\n'+'在威海保卫战中弹尽\n粮绝后自杀殉国。';
break;
case '刘步蟾':
var res_name=b+'\n'+'['+a+']\n\n'+'远舰舰管带，在\n威海保卫战中弹尽\n粮绝后自杀殉国。';
break;
case '林泰曾':
var res_name=b+'\n'+'['+a+']\n\n'+'镇远舰管带，镇\n远号入港时触礁受\n损，自认失职后自杀。';
break;
case '林永升':
var res_name=b+'\n'+'['+a+']\n\n'+'经远舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '林履中':
var res_name=b+'\n'+'['+a+']\n\n'+'扬威舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '黄建勋':
var res_name=b+'\n'+'['+a+']\n\n'+'超勇舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '邓世昌':
var res_name=b+'\n'+'['+a+']\n\n'+'致远舰管带，大\n东沟海战中壮烈牺牲。';
break;
}
return res_name;
},
textStyle:{color:'#FF4D00'}
}
}
},
data: [
{name: '丁汝昌',symbol: 'image://./images/12001.png',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [138.53,400.38]}
]
},
{
name:'水师管带',
type:'scatter',
symbolSize:50,
itemStyle: {
normal : {
color:'#27727B',
label : {
show: true,
formatter : function(a,b,c)
{
switch(b)
{
case '丁汝昌':
var res_name=b+'\n'+'['+a+']\n\n'+'在威海保卫战中弹尽\n粮绝后自杀殉国。';
break;
case '刘步蟾':
var res_name=b+'\n'+'['+a+']\n\n'+'远舰舰管带，在\n威海保卫战中弹尽\n粮绝后自杀殉国。';
break;
case '林泰曾':
var res_name=b+'\n'+'['+a+']\n\n'+'镇远舰管带，镇\n远号入港时触礁受\n损，自认失职后自杀。';
break;
case '林永升':
var res_name=b+'\n'+'['+a+']\n\n'+'经远舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '林履中':
var res_name=b+'\n'+'['+a+']\n\n'+'扬威舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '黄建勋':
var res_name=b+'\n'+'['+a+']\n\n'+'超勇舰管带，大\n东沟海战中壮烈牺牲。';
break;
case '邓世昌':
var res_name=b+'\n'+'['+a+']\n\n'+'致远舰管带，大\n东沟海战中壮烈牺牲。';
break;
}
return res_name;
},
textStyle:{ fontFamily:'sans-serif',color:'#27727B'}
}
}
},
data: [
{name: '刘步蟾',symbol: 'image://./images/12004.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [420.9, 400.38]},
{name: '邓世昌',symbol: 'image://./images/12002.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [704,400.38]},
{name: '林泰曾',symbol: 'image://./images/12006.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [138.53,100]},
{name: '林永升',symbol: 'image://./images/12007.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [738.9,100]},
{name: '林履中',symbol: 'image://./images/12005.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [538.8,100]},
{name: '黄建勋',symbol: 'image://./images/12003.png', itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'14'}}}},
value: [338.53,100]}
]
}
]
});
}
var fileLocation = '../../www/js/echarts-map';
require.config({
paths:{
echarts:fileLocation,
'echarts/chart/bar' : fileLocation,
'echarts/chart/line': fileLocation
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
]
);
// (1) 体制对比
var myChart0 ;
function disposeWarship00(){
//setTimeout(disposeWarship00(),5000);
if(myChart0)
{
myChart0.dispose();
myChart0=false;
}
// 02
disposeWarship01();
disposeWarship01Test();
// 03
disposeWarship02();
// 04
disposeWarship03();
// 05
disposeWarship04();
disposeWarship04Test();
}
function setOptionWarship00() {
//01
var ec = require('echarts');
myChart0 = ec.init(document.getElementById('warship00'));
myChart0.setOption({
title : {
text: '中日海军体制对比',
subtext: '消息来自腾讯军事、搜狐军事'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data : ['北洋舰队','南阳舰队','福建舰队','广东舰队']
},
calculable : true,
series : [
{
name:'清朝海军分属节制',
type:'funnel',
x:'20%',
width: '40%',
itemStyle: {
normal: {
// color: 各异,
label: {
position: 'left'
}
}
},
data:[
{value:80, name:'直隶总督：北洋舰队'},
{value:40, name:'两江总督：南阳舰队'},
{value:20, name:'船政大臣：福建舰队'},
{value:60, name:'两广总督：广东舰队'}
]
},
{
name:'日本海军统一管辖',
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
normal: {
// color: 各异,
label: {
position: 'right'
}
}
},
data:[
{value:60, name:'日本联合舰队'}
]
}
]
});
//02
setOptionWarship01();
setOptionWarship01Test();
//03
setOptionWarship02();
//04
setOptionWarship03();
//05
setOptionWarship04();
setOptionWarship04Test();
}
// (2) 军力对比
var myChart1 ;
function disposeWarship01(){
//setTimeout(disposeWarship01(),5000);
if(myChart1)
{
myChart1.dispose();
myChart1=false;
}
}
function setOptionWarship01() {
var ec = require('echarts');
//data : ['总排水量','总兵力','鱼雷发射管','编队马力','火炮数量','平均航速']
var myChart1 = ec.init(document.getElementById('warship01'));
myChart1.setOption({
title: {
text: '中日海军军力对比',
subtext: '北洋舰队整体实力不及日本',
sublink: ''
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
data:['北洋舰队','日本海军']
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['总兵力/人','鱼雷发射管/架','火炮数量/门','平均航速/节']
}
],
yAxis : [
{
axisLine:false,
axisLabel:false
}
],
series : [
{
name:'北洋舰队',
type:'bar',
barMinHeight:5,
itemStyle: {normal: {
label:{show:true,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;
}
return res;
}}
}},
data:[ 2126, 556, 195, 10.2]
//data:[32100, 2126, 556, 42200, 195, 10.2]
},
{
name:'日本海军',
type:'bar',
barMinHeight:5,
//stack: '总量',
//itemStyle : { normal: { color:'#B399FF',
itemStyle : { normal: {
label : {show: true, 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;
}
return res;
},position: 'top'}}},
data:[ 3916, 568, 268, 14.5]
//data:[40840, 3916, 568, 68900, 268, 14.5]
}
]
});
}
// (2) 军力对比 Test部分
var myChart1bottom ;
function disposeWarship01Test(){
//setTimeout(disposeWarship01Test(),5000);
if(myChart1bottom)
{
myChart1bottom.dispose();
myChart1bottom=false;
}
}
function setOptionWarship01Test() {
var ec = require('echarts');
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;
}
}
}
}
}
]
}
]
});
}
// (3) 军舰对比
var myChart2 ;
function disposeWarship02(){
//setTimeout(disposeWarship02(),5000);
if(myChart2)
{
myChart2.dispose();
myChart2=false;
}
}
function setOptionWarship02() {
var ec = require('echarts');
myChart2 = ec.init(document.getElementById('warship02'));
myChart2.setOption({
title : {
text: '中日海军参战军舰对比'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (value) {
if (value[2].length > 1) {
return value[0] + ' :<br/>'
+ '排水量：'+value[2][0] + '吨 ' +'<br/>'
+ '船速：'+value[2][1] + '节 ';
}
else {
return value[0] + ' :<br/>'
+
value[1] + ' : '
+ value[2] + '节 ';
}
}
},
legend: {
data:['北洋舰队','日本联合舰队']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
name:'排水量/吨',
power: 1,
precision: 2,
scale:true,
splitNumber:10,
min:400,
max:8000,
axisLabel : {
formatter: '{value} '
}
}
],
yAxis : [
{
type : 'value',
name:'速度/节',
power: 1,
precision: 2,
scale:true,
min:10,
max:26,
splitNumber:10,
axisLabel : {
formatter: '{value} '
}
}
],
series : [
{
name:'北洋舰队',
type:'scatter',
symbolSize:10,
itemStyle: {
normal : {
label : {
show: true,
formatter : '{b}',
textStyle:{color:'#FF4D00'}
}
}
},
//北洋舰队 主要舰队有13艘
//1广丙 2广甲 3超勇 4平远 5济远 6经远 7致远 8定远旗舰
data: [
{name: '广丙舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [1000, 17]},
{name: '广甲舰',symbolSize:10,itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [1209,15]},
{name: '超勇与扬威舰',symbolSize:10,itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [1350,15]},
{name: '平远舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [ 2100,14.5]},
{name: '济远舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [2300,15]},
{name: '经远与来远舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [2900,15.5]},
{name: '致远与靖远舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [2300,18]},
{name: '定远旗舰与镇远旗舰',itemStyle:{normal:{label:{show:true,textStyle:{fontSize:'12'}}}},
value: [7335,14.5]}
],
markLine : {
data : [
{type : 'average', name: '平均航速'}
]
}
},
{
name:'日本联合舰队',
type:'scatter',
symbolSize:10,
itemStyle: {
normal : {
label : {
show: true,
formatter : '{b}',
textStyle:{color:'#27727B'}
}
}
},
//日本联合舰队有13艘 型号相同的归为同一类（主炮、排水、速度）
//1赤城 2比睿 3扶桑 4西京丸 5松岛 6桥立 7高千惠 8千代田 9吉野 10秋津洲
data: [
{name: '赤城舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [622, 10.25]},
{name: '比睿舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [2284,13.2]},
{name: '扶桑舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [3777,13]},
{name: '西京丸舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [4100,15]},
{name: '松岛与严岛舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [4278,16]},
{name: '桥立舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [4278,17.5]},
{name: '高千惠与浪速舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [3709,18]},
{name: '千代田舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [2439,19]},
{name: '吉野舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [4216,22.5]},
{name: '秋津洲舰',itemStyle:{normal:{label:{show:true,textStyle:{color:'#27727B',fontSize:'12'}}}},
value: [3150,26]}
],
markLine : {
data : [
{type : 'average', name: '平均航速'}
]
}
}
]
});
}
// (4) 军舰造价对比
var myChart03 ;
function disposeWarship03(){
//setTimeout(disposeWarship03(),5000);
if(myChart03)
{
myChart03.dispose();
myChart03=false;
}
}
function setOptionWarship03() {
var ec = require('echarts');
myChart03 = ec.init(document.getElementById('warship03'));
myChart03.setOption({
title: {
text: '中日主力战舰造价对比',
x:'left',
y:'top'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['北洋舰队','日本联合舰队']
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['定远 vs 吉野','镇远 vs 松岛','致远 vs 严岛','靖远 vs 桥力','经远 vs 秋津洲']
}
],
yAxis : [
{
axisLine:false,
axisLabel:false
}
],
series : [
{
name:'北洋舰队',
type:'bar',
barMinHeight:5,
itemStyle: {normal: {
label:{show:true,formatter:function(a,b,c){
switch(b)
{
case '定远 vs 吉野':
var res= c ;
break;
case '镇远 vs 松岛':
var res= c ;
break;
case '致远 vs 严岛':
var res= c ;
break;
case '靖远 vs 桥力':
var res= c;
break;
case '经远 vs 秋津洲':
var res= c;
break;
}
return res+'万两';
}}
//},textStyle:{color:'#27727B'}}
}},
data:[ 141, 141, 83, 83, 84]
},
{
name:'日本联合舰队',
type:'bar',
barMinHeight:5,
itemStyle : { normal: { color:'#00BFFF',
label : {show: true, formatter:function(a,b,c){
switch(b)
{
case '定远 vs 吉野':
var res= c ;
break;
case '镇远 vs 松岛':
var res= c ;
break;
case '致远 vs 严岛':
var res= c ;
break;
case '靖远 vs 桥力':
var res= c;
break;
case '经远 vs 秋津洲':
var res= c;
break;
}
return res+'\n'+'万两';
},position: 'inside'}}},
data:[ 182, 160, 160, 160,137]
}
]
});
}
// (5) 军费对比
var myChart4 ;
function disposeWarship04(){
//setTimeout(disposeWarship04(),5000);
if(myChart4)
{
myChart4.dispose();
myChart4=false;
}
}
function setOptionWarship04() {
var ec = require('echarts');
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]
}
]
});
}
// (5) Test部分
var myChartbottom04 ;
function disposeWarship04Test(){
//setTimeout(disposeWarship04Test(),5000);
if(myChartbottom04)
{
myChartbottom04.dispose();
myChartbottom04=false;
}
}
function setOptionWarship04Test(){
var ec = require('echarts');
myChartbottom04 = ec.init(document.getElementById('warship04_bottom'));
myChartbottom04.setOption({
tooltip : {
show: true,
trigger: 'item'
},
legend: {
data:['北洋舰队','日本海军']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['舰队军费总投入']
}
],
yAxis : [
{
type : 'value',
name : '白银',
axisLabel : {
formatter: '{value} 万两'
}
}
],
series : [
{
name:'北洋舰队',
type:'bar',
barWidth: 80,
itemStyle: {
normal: {
borderRadius: 5,
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'green'],[1, '#FF8033']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '15',
fontFamily : '微软雅黑',
fontWeight : 'bold'
},
formatter:function(a,b,c){
var spendmony= c + '\n'+'万两';
return spendmony;
}
}
}
},
data:[{value:3300,
itemStyle : { normal: {label : {position: 'inside'}}}}
]
},
{
name:'日本海军',
type:'bar',
barWidth: 80,
itemStyle: {
normal: {
borderRadius: 5,
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(30,144,255,0.8)'],[1, '#00BFFF']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '15',
fontFamily : '微软雅黑',
fontWeight : 'bold'
},
formatter:function(a,b,c){
var spendmony= c + '\n'+'万两';
return spendmony;
}
}
}
},
data:[{value:8800,
itemStyle : { normal: {label : {position: 'inside'}}}}
]
}
]
});
}
relation00.js 代码 实现功能：历史人物篇
var fileLocation = '../../www/js/echarts-map';
require.config({
paths:{
echarts:fileLocation,
'echarts/chart/bar' : fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/force' : fileLocation
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/force'
]
);
// load function
//(1) relations 秦朝
var relation0;
function disposeRelation00(){
//setTimeout(disposeRelation00(),5000);
if(relation0)
{
relation0.dispose();
relation0=false;
}
disposeRelation01();// dispose
}
function setOptionRelation00() {
setOptionRelation01();
var ec = require('echarts');
relation0 = ec.init(document.getElementById('relation00'));
relation0.setOption({
title : {
text: '清廷内部，深陷“党”争',
subtext: '数据来自戚其章：《甲午战争史》',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
x: 'left',
data:['主战派','主和派']
},
series : [
{
type:'force',
name : "人物关系",
categories : [
{
name: '决策人物'
},
{
name: '主战派'
},
{
name:'主和派'
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 1
}
},
emphasis: {
label: {
show: false
},
nodeStyle : {
//r: 30
},
linkStyle : {}
}
},
useWorker: false,
minRadius : 15,
maxRadius : 25,
gravity: 1.1,
scaling: 1.1,
linkSymbol: 'arrow',
nodes:[
{category:0, name: '慈禧太后', value : 10},
{category:1, name: '光绪帝',value : 8},
{category:1, name: '裕绂',value : 3},
{category:1, name: '叶应增',value : 3},
{category:1, name: '翁同龢',value : 7},
{category:1, name: '志锐',value : 5},
{category:2, name: '李鸿章',value : 8},
{category:2, name: '奕昕',value : 6},
{category:2, name: '陈京莹',value : 4},
{category:2, name: '聂士成',value : 4},
{category:2, name: '叶志超',value : 1},
],
links : [
{source : '光绪帝', target : '慈禧太后', weight : 1},
{source : '裕绂', target : '慈禧太后', weight : 2},
{source : '叶应增', target : '慈禧太后', weight : 1},
{source : '翁同龢', target : '慈禧太后', weight : 2},
{source : '光绪帝', target : '翁同龢', weight : 5},
{source : '志锐', target : '慈禧太后', weight : 3},
{source : '李鸿章', target : '慈禧太后', weight : 6},
{source : '奕昕', target : '慈禧太后', weight : 6},
{source : '陈京莹', target : '慈禧太后', weight : 2},
{source : '聂士成', target : '慈禧太后', weight : 1},
{source : '叶志超', target : '慈禧太后', weight : 1},
{source : '叶应增', target : '翁同龢', weight : 1},
{source : '李鸿章', target : '光绪帝', weight : 1},
{source : '李鸿章', target : '翁同龢', weight : 1},
{source : '聂士成', target : '李鸿章', weight : 1},
{source : '奕昕', target : '李鸿章', weight : 6}
]
}
]
});
}
// relation (2) 日本人物
var relation1;
function disposeRelation01(){
setTimeout(disposeRelation01(),5000);
if(relation1)
{
relation1.dispose();
relation1=false;
}
}
function setOptionRelation01() {
var ec = require('echarts');
relation1 = ec.init(document.getElementById('relation01'));
relation1.setOption({
title : {
text: '日本：即使找不到正当借口也誓要兴战',
subtext: '数据来自日本外务省编：《日本外交文书》',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
x: 'left',
data:['关键人物']
},
series : [
{
type:'force',
name : "人物关系",
categories : [
{
name: '决策人物'
},
{
name: '关键人物'
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#333'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 1
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
//r: 30
},
linkStyle : {}
}
},
useWorker: false,
minRadius : 15,
maxRadius : 25,
gravity: 1.1,
scaling: 1.1,
linkSymbol: 'arrow',
nodes:[
{category:0, name: '日本天皇', value : 10},
{category:1, name: '坪井航三',value : 2},
{category:1, name: '上村彦之丞',value : 3},
{category:1, name: '东乡平八郎',value : 3},
{category:1, name: '桦山资纪',value : 6},
{category:1, name: '陆奥宗光',value : 5},
{category:1, name: '伊东祐亨',value : 7},
{category:1, name: '伊藤博文',value : 9},
{category:1, name: '山县有朋',value : 6}
],
links : [
{source : '坪井航三', target : '日本天皇', weight : 1},
{source : '上村彦之丞', target : '日本天皇', weight : 2},
{source : '东乡平八郎', target : '日本天皇', weight : 1},
{source : '桦山资纪', target : '日本天皇', weight : 2},
{source : '陆奥宗光', target : '日本天皇', weight : 3},
{source : '伊东祐亨', target : '日本天皇', weight : 6},
{source : '伊藤博文', target : '日本天皇', weight : 6},
{source : '东乡平八郎', target : '上村彦之丞', weight : 1},
{source : '伊东祐亨', target : '上村彦之丞', weight : 1},
{source : '伊东祐亨', target : '东乡平八郎', weight : 1},
{source : '伊东祐亨', target : '桦山资纪', weight : 1},
{source : '山县有朋', target : '日本天皇', weight : 1},
{source : '伊藤博文', target : '陆奥宗光', weight : 6},
{source : '伊藤博文', target : '东乡平八郎', weight : 1},
{source : '山县有朋', target : '伊藤博文', weight : 5}
]
}
]
});
}
以上就是专题的主要内容，详细代码可以到ECharts官网和我的CSDN code 下载，谢谢！欢迎大家讨论，再次感谢CSDN组织这次活动，感谢林峰老师给我这次机会，祝愿开源夏令营越办越好，ECharts功能越来越完善！
我的CSDN code 地址：https://code.csdn.net/u013476464/baidu_data_visualization
Echarts官网：http://echarts.baidu.com/
ZRender：http://ecomfe.github.io/zrender/
CSDN开源夏令营 百度数据可视化实践 ECharts 11 （期末总结）
标签：echarts zrender 数据可视化 百度 javascript
原文地址：http://blog.csdn.net/u013476464/article/details/39103633
