Echars基本使用方法

Echars基本使用方法

ECharts是一款由百度前端技術部開發的，基於Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。
Echars官網鏈接： https://www.echartsjs.com/zh/index.html

· Echars提供大量常用的數據可視化圖表，底層基於ZRender（一個全新的輕量級canvas類庫），創建了座標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、餅圖（環形圖）、K線圖、地圖、力導向佈局圖以及和絃圖，同時支持任意維度的堆積和多圖表混合展現。

標題的設置

title: {
       	text: 'xxxxxxx',         <!--設置標題內容-->
       	subtext:'xxxxxx',        <!--設置副標題內容-->
      	x:'center',              <!--設置標題位置，center，left，right-->
		textStyle: {
           color:'#000000',      <!--字體顏色，詳細參考html顏色庫-->
           fontFamily: '宋體',   <!--字體樣式，詳細參考html字體庫-->
           fontSize:24,          <!--字體大小，自定義-->
           fontStyle: 'normal',  <!--字體風格，normal,italic,oblique-->
           fontWeight: 'normal', <!--字體粗細，normal,bold,bolder,lighter-->
    	},
    	subtextStyle:{},         <!--副標題的字體樣式-->
	},

圖表大小的設置

grid:{
   		top:'20%',           <!--距離容器頂部的位置-->
		left: '20%',         <!--距離容器左側的位置-->
		right: '20%',        <!--距離容器右側的位置-->
		bottom: '15%',       <!--距離容器底部的位置-->
		containLabel: true   <!--grid 區域是否包含座標軸的刻度標籤-->
      },

圖例的設置

legend: {
      	data:['xxx','xxx'],            <!--圖例的內容-->
      	padding:[300,100,200,100],     <!--內邊距，上，右，下，左邊距-->
      	textStyle: {
        	color: '#000000',          <!--圖例文字的顏色-->
        	fontSize: 14               <!--圖例文字的大小-->
      	},
},

交互方式的設置

tooltip: {
	     trigger: 'item',           <!--觸發類型，item,axis-->
	     showDelay: 10,             <!--顯示延遲，單位ms-->
	     borderColor: '#333',       <!--提示邊框顏色-->
	     axisPointer : {                
         			   type : 'line',       <!--觸發座標軸，line,shadow-->
        			   lineStyle : {        <!--直線指示器樣式設置-->
			            		   color: '#48b',
			                       width: 2,
			                       type: 'solid'
                                   },
      				  shadowStyle : {      <!--陰影指示器樣式設置-->
			            		    width: 'auto',      
			                        color: '#333',          
                                     }
    					},
    	textStyle: {color: '#333'}         <!--參考標題的字體設置-->    
},

工具箱的設置

toolbox: {
		 feature: {
				   magicType: { show: true, type: ['line', 'bar'] },   <!--轉換成柱狀圖、折線圖-->
		   		   restore: {show: true},       <!--刷新圖表-->
		   		   saveAsImage: {show: true}    <!--保存圖表-->
				   },
		 },

應用實例——柱狀圖

option = {
		title:{
			text:'2009年-2017年中國水資源總量變化',
			textStyle: {fontSize:20,fontFamily:'宋體'},
			x:'center'
		 },
		color: ['#87CEFF'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		toolbox: {
			feature: {
				magicType: {show: true, type: ['line', 'bar']},
				restore: {show: true},
				saveAsImage: {show: true}
			}
		},
		legend: {
			data:['']
		},
			grid: {
			left: '10%',
			right: '10%',
			top:'15%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [
			{
				name: '年份',
				type: 'category',
				data: ['2009年','2010年','2011年','2012年','2013年','2014年','2015年','2016年','2017年'],
				axisPointer: {
					type: 'shadow'
				}
			}
		],
		yAxis: [
			{
				max: 35000,
				min: 20000,
				interval:2500,
				type: 'value',
				name: '總量',
				boundaryGap: 'ture',
				axisLabel: {
					formatter: '{value} 億立方米'
				}
			},
		],
		series: [
			{
				type:'bar',
				barWidth: '50%',
				data:[24180.20,30906.41,23256.70,29528.79,27957.86,27266.90,27962.60,32466.40,28761.20]
			},
		]
	};

應用實例——折線圖

option = {
			title:{
				text:'2009年-2017年中國地表水資源量變化',
				textStyle: {fontSize:20,fontFamily:'宋體'},
				x:'center'
			 },
			color: ['#6495ED'],
			tooltip: {trigger: 'axis',},
			toolbox: {
				feature: {
					magicType: {show: true, type: ['line', 'bar']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			grid: {
			left: '10%',
			right: '10%',
			top:'15%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [
			{
				name: '年份',
				type: 'category',
				data: ['2009年','2010年','2011年','2012年','2013年','2014年','2015年','2016年','2017年'],
		}
		],
		yAxis: 
			{
				name: '水資源量',
				type: 'value',
				max:35000,
				min:20000,
				interval:2500,
				axisLabel: {formatter: '{value} 億立方米'},
				data:'dataList,'
			},
		series: [
			{
				type:'line',
				barWidth: '50%',
				data:[23125.21,29797.62,22213.60,28373.26,26839.47,26263.91,26900.80,31273.90,27746.30]
			},
		]
	};