Echarts使用笔记--饼图，柱状图

痛定思痛。 2022-01-26 09:35 402阅读 0赞

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

# echart使用 #

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

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]
    							}
    						},
    					},
    				}]
    			}
    		}