CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)

CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)


CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第1张图片

致谢:

CSDN开源夏令营马上就要结束了,随着ECharts专题列入百度ECharts官网,任务就算是基本完成了。再次谢谢林峰老师!回想两个月前听到CSDN要举办这个活动,第一感觉是非常棒,所有就积极看了看所有的项目,项目总体质量很棒,涉及的方面也很广,有云与大数据方面的、有前端与移动方面的、嵌入式与智能硬件方面的、其中linux方面的也很多,总之项目很丰富,也都很有挑战。CSDN是第一年举办这样的活动,虽然时间准备上有些仓促外,总体上组织的很好,在做项目的过程中CSDN的工作人员的服务态度也很好,积极帮忙解决问题,在这里感谢为开源夏令营付出心血和汗水的CSDN工作人员,希望CSDN开源夏令营能越办越好,能为中国的开源事业做出更大的贡献!


开源夏令营感想博客请看:开源夏令营是一段共同成长的人生经历,我会记住的(点个赞哦!呵呵)


专题系类:

(1)专题内容(包括五块)

 

    1)大东沟海战全程,时间轴和散点图的结合。

    2)中日国力对比篇

     国力对比包含:战争前、战争中和战争后三个方面,从人口数、国土面积、政府财政收入、动员总兵力、死伤总数、战舰数量、战舰总吨位、水雷艇、炮舰数量等方面对比。

     使用柱状图突出中日对比。

   3)中日装备对比篇

     包含5个方面:体制对比、军力对比、军舰对比、造价对比、军费对比。

   散点图、雷达图、柱状图、折线图、等等。

   4)中日历史人物篇

     中日关键人物、中日决策你模式对比。

      使用力导向图理清中日关键人物之间的联系。

   5)北洋舰队殉国将领篇

   祭奠北洋舰队殉国将领,使用散点图。



(2)项目结构(主要包含五部分)

 文件名称:Sino-Japanese-war-1895

 以上文件必须放在ECharts文件中的topic子文件中,因为还有很多ECharts本身的很多库要用。

 CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第2张图片


   js子文件夹:

  CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第3张图片


  fonts子文件夹:

  CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第4张图片


 CSS子文件夹:

 CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第5张图片

代码系列:

这里的CSS文件比较多,大家有兴趣的可以到CODE中下载源代码,我已经全部上传,地址在最后给出。这里主要讲主页面和主要的js文件。

index.html 主页面

CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第6张图片



  
    
    ECharts 甲午之殇:纪念甲午战争120周年专题
	
	
    
    
	
	
    
    
   	
     
        
	 
	
	
    
    
  
  
  
    
	
	

甲午之殇:纪念甲午战争120周年

中日实力全面对比:让数据说话


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]+'
'+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} 
{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]+'
'+a[0][3]; for(var i=0;i 1) { return value[0] + ' :
' + '排水量:'+value[2][0] + '吨 ' +'
' + '船速:'+value[2][1] + '节 '; } else { return value[0] + ' :
' + 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开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)_第7张图片


以上就是专题的主要内容,详细代码可以到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/


你可能感兴趣的:(【开源夏令营】,ECharts开发)