开始做前端了,感觉自己是要变成全栈工程师了。。。
今天使用了echart,用之前觉得好高大上好厉害,肯定很复杂。用了以后才发现,使用起来超简单,当然,精通很难,里面的各种配置太多了,本文记录一下自己用到的东西。

echart使用

现在直接引用js文件就可以了

<script src="echarts.min.js"></script> 

echart组件需要在一个宽高固定的DOM里才能显示。
然后只需要两步即可:

	var option=""; 
	//初始化echart对象 
	assetPercentChart = echarts.init(document.getElementById("demo")); 
	//为echarts赋值 
	assetPercentChart.setOption(option); 

主要关注点在option中。

代码示例

{
    
				tooltip: {
    
					trigger: 'item', 
					formatter: "{b}: {c} ({d}%)" 
				}, 
				legend: {
    
					//截取字段 
					formatter: function (name) {
    
						if (name.length > 7) {
    
							name =  name.slice(0,7) + '...'; 
						} 
						return name; 
					}, 
					tooltip: {
    
						show: true 
					}, 
					//开启图例滚动条 
					type: 'scroll', 
					orient: 'vertical', 
					//图例靠左展示 
					x:'left', 
					//图例文字颜色 
					textStyle:{
    
						color:"#FFF", 
					}, 
					//滚动分页颜色 
					pageTextStyle:{
    
						color:"#FFF" 
					}, 
					bottom: 40, 
					//滚动按钮颜色 
					pageIconColor:"#FFF" 
				}, 
				series : [ 
					{
    
						name: '时间来源分布', 
						type: 'pie', 
						radius: '65%', 
						avoidLabelOverlap: false, 
						label: {
    
							show:false 
						}, 
						itemStyle: {
    
							emphasis: {
    
								shadowBlur: 10, 
								shadowOffsetX: 0, 
								shadowColor: 'rgba(0, 0, 0, 0.5)' 
							} 
						}, 
						data:[{
   "name":"a","value":2824637},{
   "name":"b","value":179},{
   "name":"c","value":1270},{
   "name":"d","value":7},{
   "name":"e","value":14005},{
   "name":"f","value":168067},{
   "name":"g","value":1042442},{
   "name":"h","value":1},{
   "name":"i","value":2338823},{
   "name":"j","value":41422}], 
					} 
				] 
			} 
achieveOption:function(data){
    
			return {
    
				xAxis: {
    
					// show:true, 
					type: 'category', 
					axisLabel: {
    
						interval:0, 
						//文字偏转角度 
						rotate:40, 
						//x坐标文字颜色 
						textStyle:{
    
							color:'#fff' 
						}, 
						formatter:function(name){
    
							if(name.length > 6){
    
								name = name.slice(0,6) + "..."; 
							} 
							return name; 
						} 
					}, 
 
				}, 
				yAxis: {
    
					axisLabel: {
    
						textStyle:{
    
							color:'#fff' 
						}, 
						// formatter:function(value){
    
						// 	if (value > 1000) {
    
						// 		value = value/1000 + 'K'; 
						// 	} 
						// 	if(value > 1000000){
    
						// 		value = value/1000000 + 'M'; 
						// 	} 
						// 	return value; 
						// } 
						formatter: function (value) {
    
							var res = value.toString(); 
							var numN1 = 0; 
							var numN2 = 1; 
							var num1=0; 
							var num2=0; 
							var t1 = 1; 
							for(var k=0;k<res.length;k++){
    
								if(res[k]==".") 
									t1 = 0; 
								if(t1) 
									num1++; 
								else 
									num2++; 
							} 
 
							if(Math.abs(value)<1 && res.length>4) 
							{
    
								for(var i=2; i<res.length; i++){
    
									if(res[i]=="0"){
    
										numN2++; 
									}else if(res[i]==".") 
										continue; 
									else 
										break; 
								} 
								var v = parseFloat(value); 
								v = v * Math.pow(10,numN2); 
								return v.toString() + "e-" + numN2; 
							}else if(num1>4) 
							{
    
								if(res[0]=="-") 
									numN1 = num1 - 2; 
								else 
									numN1 = num1 - 1; 
								var v = parseFloat(value); 
								v = v / Math.pow(10,numN1); 
								if(num2 > 4) 
									v = v.toFixed(4); 
								return v.toString() + "e" + numN1; 
							}else 
								return parseFloat(value); 
						} 
					}, 
 
				}, 
				//数据,格式为[[],[],[]] 
				dataset: {
    
					source: data, 
				}, 
				//开启图例 
				legend: {
   }, 
				tooltip: {
   }, 
				series: [{
    
					// data: [120, 200, 150, 80, 70, 110, 130], 
					type: 'bar', 
					radius:"50%", 
					itemStyle: {
    
						normal: {
    
							// 随机显示 
							// color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);} 
 
							// 定制显示(按顺序) 
							color: function(params) {
    
								var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
								return colorList[params.dataIndex] 
							} 
						}, 
					}, 
				}] 
			} 
		} 
发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

深入拆解 Java 虚拟机 】Exception异常笔记讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。