首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts 11 （期末总结）
CSDN开源夏令营 百度数据可视化实践 ECharts 11 （期末总结）
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=http://www.mamicode.com/asset/css/bootstrap.min.css" rel="stylesheet">>
js文件
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]
}
]
});
}
scatter00.js 代码 实现功能：殉国将领篇 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]}
]
}
]
});
}
warship01.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) 体制对比
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官网：
以上就是专题的主要内容，详细代码可以到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 （期末总结）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。