CSDN open-source summer camp Baidu data visualization practices ECharts (8), csdnecharts

CSDN open-source summer camp Baidu data visualization practices ECharts (8), csdnecharts
(1) Preface

First of all, I would like to thank Mr. Lin Feng for continuing with the content mentioned in Article 7. The CSS layout is indeed very tired and I feel like I am not able to adjust it. I will not talk much about it. Today, I will explain the content of a page. I will introduce the CSS layout in detail later.
In addition, I wrote with timeline map extended by ECharts, http://echarts.baidu.com/doc/example/map19.html

(2) overall content
The topic includes the following five topics:

1) major naval battles: describes major naval battles in real time

2) Comparison of national strength: comparison of national strength between China and Japan before and after the war

3) equipment comparison: comprehensive comparison of naval strength

4) historical figures: key figures in Sino-Japanese Decision-Making

5) martyrdom generals: commemorating the martyrdom generals of the Beiyang naval forces

The layout is as follows:

(2) Describe the comparison of military power in the comparison of equipment

First:

(3) code details
To make code writing more normative, JavaScript, html, and CSS are completely separated.

The js structure is as follows:

The Code of warship04Test. js is as follows:

Require. config ({paths: {echarts :'. /js/echarts ', 'echarts/chart/bar ':'. /js/echarts-map', 'echarts/chart/line ':'. /js/echarts-map', 'echarts/chart/radar ':'. /js/echarts-map'}); require (['echarts', 'echarts/chart/bar', 'echarts/chart/line ', 'echarts/chart/radar '], function (ec) {// data ', 'artillery qty ', 'average speed'] var myChart1bottom = ec. init (document. getElementById ('warship01 _ bottom '); myChart1bottom. setOption ({tooltip: {trigger: 'axis ', formatter: function (a, B, c) {var res_jiawu = a [0] [0] + '<br/>' + a [0] [3]; for (var I = 0; I <. length; I ++) {switch (a [0] [3]) {case 'total displacement ': res_jiawu + = '<br/>' + a [I] [1] + ':' + a [I] [2] + 'tount'; break; case 'formation horsepower ': res_jiawu + =' <br/> '+ a [I] [1] +': '+ a [I] [2] + 'pi '; break; case 'large caliber artillery number': res_jiawu + = '<br/>' + a [I] [1] + ': '+ a [I] [2] + 'Gateway'; break; case 'artillery: the number of shots in one minute ': res_jiawu + = '<br/>' + a [I] [1] + ':' + a [I] [2] + 'pass'; break; case 'artillery: one-minute projection weight ': res_jiawu + =' <br/> '+ a [I] [1] +': '+ a [I] [2] + 'kg '; break; case 'number of shoes ': res_jiawu + =' <br/> '+ a [I] [1] + ': '+ a [I] [2] + 'Gateway'; break;} return res_jiawu ;}, legend: {orient: 'vertical', x: 'right ', y: 'bottom ', data: ['beiyang fleet', 'Japan joint arms']}, toolbox: {show: true, feature: {mark: {show: true }, dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true }}, polar: [{indicator: [{text: 'Total displacement ', max: 50000 },{ text: 'formation horsepower', max: 70000 },{ text: 'large caliber artillery number', max: 200 },{ text: 'artillery: number of shots per minute ', max: 300 },{ text: 'artillery: Projection weight per minute', max: 6000 },{ text: 'number of shoes ', max: 100}], calculable: true, series: [{name: 'beiyang fleet vs. Japanese Joint Fleet ', type: 'radar', data: [{value: [32100,422 00, 58, 22,186 4, 0], name: 'beiyang fleet '}, {value: [40840,689 00, 104,232,596 5, 89], name: 'Japanese joint Army', itemStyle: {normal: {label: {show: true, textStyle: {color: 'green'}, formatter: function (a, B, c) {switch (B) {case 'total water': var res = c + 'tount'; break; case 'fleet horsepower ': var res = c + 'pi'; break; case 'large caliber artillery number': var res = c + 'Gateway'; break; case 'artillery: quantity of one-minute bombs ': var res = c + 'qak'; break; case 'artillery: one-minute projection weight': var res = c + 'kg '; break; case 'number of shoes': var res = c + 'Gateway'; break ;} return res ;}}}}]});

The military expense comparison page is as follows:

The Code is as follows:
 

Require. config ({paths: {echarts :'. /js/echarts ', 'echarts/chart/bar ':'. /js/echarts-map', 'echarts/chart/line ':'. /js/echarts-map', 'echarts/chart/map ':'. /js/echarts-map'}); require (['echarts', 'echarts/chart/bar', 'echarts/chart/line ', 'echarts/chart/Map', 'echarts/chart/Pie'], function (ec) {var myChart4 = ec. init (document. getElementById ('warship04 '); myChart4.setOption ({tooltip: {trigger: 'axis'}, toolbox: {show: true, feature: {mark: {show: true }, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true }, saveAsImage: {show: true }}, calculable: true, legend: {data: ['overseas fleet military spending ', 'Japanese naval military spending', 'Japanese-Japanese military spending ratio ']}, xAxis: [{type: 'category ', data: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ', 'October ', 'October']}], yAxis: [{type: 'value', name: 'baibai', axisLabel: {formatter: '{value} '}}, {type: 'value', name: 'Japanese military/Beiyang military spending '}], series: [{name: 'North ocean fleet military spending ', 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: 'average'}] },{ name: 'Japanese naval military spending ', type: 'bar', data: [400.0, 401.0, 200.0, 230.4, 600.7, 360.7, 670.6, 830.2, 760.7, 818.8], // data: [1100.0, 760.3, 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: 'average'}] },{ name: 'Japan-China Military overput', 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]}) ;});

Other content will be shared next time. Thank you! This week, we will write it here first.

How can I participate in ACM Programming Competition and CSDN open-source summer camp?

Three college students ?? As far as I know, it seems that two books have scored more than 400 points and nearly 500 points. If you have these three books, don't go to any competition. Just get a job with a diploma!