【echarts】echarts実現疫情地図(見るとすぐ編)

echarts実現疫情地図(見るとすぐ編)
echartsはhighchartsよりも簡単なので、個人的にはechartsの利用者はhighchartsより多いと思いますが、前にhighchartsが疫情地図を実現する方法を紹介したので、今日はechartsの使い方を補足します
一.echartsの紹介
EChartsは、JavaScriptを使用して実装されたオープンソースのビジュアル化ライブラリであり、PCとモバイルデバイス上でスムーズに実行でき、現在のほとんどのブラウザ(IE 8/9/10/11、Chrome、Firefox、Safariなど)と互換性があり、最下位のベクトルグラフィックライブラリZRenderに依存し、直感的で、インタラクティブで豊富で、高度にカスタマイズ可能なデータビジュアル化グラフを提供します.
二.echarts使用
1.まず、公式サイトでソースコードをダウンロードする必要があります.公式サイトのダウンロードアドレス:https://echarts.apache.org/zh/download.html2.以下に示すように、必要なものを導入するだけでいいです.

"js/echarts.min.js"</span> type=<span class="token string">"text/javascript"</span> charset=<span class="token string">"utf-8"</span>>
"js/china.js"</span> type=<span class="token string">"text/javascript"</span> charset=<span class="token string">"utf-8"</span>>

上の2つを引用するだけでいいです.もしあなたが世界地図を実現するなら、worldを導入します.jsでいいです.補足:echartsの地図データはincubator-echarts-4.6.0incubator-echarts-4.6.0mapというフォルダにありますが、中国だけです.世界と中国の各省・市のデータは、他の地域のデータを自分で探す必要があります.
3.実際の幅の広いdom要素を作成する

	
"map" style="width: 200px; height: 300px;">

4.それからechartsを初期化して、データを書き込んで、そしてそれを配置して、直接完成品のコードに行って、みんなで中に入れておけばいいです

var map = echarts.init(document.getElementById('map'));//   
			
var COLORS = ["#ffffff", "#faebd2", "#e9a188", "#d56355", "#bb3937", "#772526", "#480f10"];//      
var dataList=[//  
			    {name:"    ",value:0},
			    {name: '  ', value: 97},
			    {name: '  ', value: 5},
			    {name: '  ', value: 30},
			    {name: '  ', value: 2},
			    {name: '  ', value: 2},
			    {name: '  ', value: 1},
			    {name: '  ', value: 2},
			    {name: '  ', value: 4},
			    {name: '   ', value: 13},
			    {name: '  ', value: 0},
			    {name: '  ', value: 0},
			    {name: '  ', value: 9},
			    {name: '  ', value: 0},
			    {name: '  ', value: 5},
			    {name: '  ', value: 15},
			    {name: '  ', value: 1},
			    {name: '  ', value: 8685},
			    {name: '  ', value: 3},
			    {name: '  ', value: 40},
			    {name: '  ', value: 1},
			    {name: '   ', value: 1},
			    {name: '  ', value: 7},
			    {name: '  ', value: 0},
			    {name: '  ', value: 0},
			    {name: '  ', value: 0},
			    {name: '  ', value: 49},
			    {name: '  ', value: 0},
			    {name: '  ', value: 0},
			    {name: '  ', value: 17},
			    {name: '  ', value: 0},
			    {name: '  ', value: 1},
			    {name: '  ', value: 54},
			    {name: '  ', value: 70},
			    {name: '  ', value: 2}
			]
			
	var option={//   （  ）
		
				tooltip: {//     
						formatter:function(params,ticket, callback){//          ，                。
							return params.seriesName+'
'+params.name+'：'+params.value
						}//     
					},
				backgroundColor:'#eeeeee',//   
				visualMap: {//visualMap        ，    『    』，             （    ）。
					type: 'piecewise',//         
					orient: 'horizontal',//  

					left: 'left',//  
					top: 'bottom',//  
	
					pieces: [{//   『         』       ，        ，           。
						value: 0, color: COLORS[0]
					}, {
						min: 1, max: 9, color: COLORS[1]
					}, {
						min: 10, max: 99, color: COLORS[2]
					}, {
						min: 100, max: 499, color: COLORS[3]
					}, {
						min: 500, max: 999, color: COLORS[4]
					}, {
						min: 1000, max: 10000, color: COLORS[5]
					}, {
						min: 10000, color: COLORS[6]
					}],
					inRange: {
						color:COLORS //       
					},
					
					show:true//  
				},
				geo: {//              
					map: 'china',
					roam: false,//        
					zoom:1.23,//      
					label: {
						normal: {
							show: true,
							fontSize:'10',
							color: 'rgba(0,0,0,0.7)'
						}
					},
					itemStyle: {
						normal:{
							borderColor: 'rgba(0, 0, 0, 0.2)'
						},
						emphasis:{
							areaColor: '#F3B329',//        
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							shadowBlur: 20,
							borderWidth: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				series : [//    。（  ）
					{
						name: '   ',
						type: 'map',//    
						geoIndex: 0,
						data:dataList//     
					}
				]
			}
			
			map.setOption(option);//      （  ）echarts

全体的にやって、最後の効果は丁香園と似ていて、興味のある学生は試してみることができます!下一篇:【highcharts】highcharts(highmaps)実現疫情地図皆さんの読書に感謝します.