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

开始做前端了，感觉自己是要变成全栈工程师了。。。
今天使用了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]
							}
						},
					},
				}]
			}
		}