Echarts学习笔记

var myChart = echarts.init(document.getElementById('main'));
option = {
	title : {  //标题组件
		show: true,   //是否显示标题组件：true/false
        text: '920',  //主标题文本
        textStyle: {  //主标题样式
	        color: '#000',  //文字颜色
	        fontStyle: 'normal',  //字体风格：'normal','italic','oblique'
	        fontWeight: 'normal', //字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
	        fontFamily: 'sans-serif',//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
	　　　　 	fontSize: 24, //字体大小
	    },
	    subtext: '', //副标题
	    subtextStyle: {  //副标题样式
	    	
	    },
	    textAlign:'center', //整体（包括 text 和 subtext）的水平对齐：'auto'、'left'、'right'、'center'
	    textVerticalAlign: 'middle', //整体（包括 text 和 subtext）的垂直对齐：'auto'、'top'、'bottom'、'middle'
        itemGap: '',  	//主副标题之间的间距
        left: '',  		//离容器的距离，比如：20,20%,'left', 'center', 'right'
        top:'',   		//'top', 'middle', 'bottom'
        right:'',  		//'left', 'center', 'right'
        bottom:0, 		//'top', 'middle', 'bottom'
//			        x:'center',
//			        backgroundColor:'',  //标题背景色
//			        borderColor: '', //标题的边框颜色
    },
    legend: {  //图例组件
    	type:'',  //图例的类型:'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
    	show:false,
        left: 'left',
        top:'',
        right:'',
        bottom:'',
        orient: 'vertical',  //图例列表的布局朝向：'horizontal'，'vertical'
        align: '',  //图例标记和文本的对齐：'auto'，'left'，'right'，默认自动。根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'
        textStyle: {  //图例的公用文本样式
	        
	    },
	    tooltip: {  //图例的 tooltip 配置，配置项同 tooltip
	        show: false, //默认不显示
	    },
        data: [{
        	name:'',
        	icon:'',
        	textStyle: {  //图例项的文本样式
		        
		    },
        }],
        backgroundColor:'',  //图例背景色，默认透明。
    },
    grid: { //直角坐标系内绘图网格
    	show:false,
    	left:'2%',
        top: '2%',
        right:'',
        bottom:'',
        tooltip: {  //本坐标系特定的 tooltip设定。
	        show: false, //默认不显示
	    },
    },
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
    },
    xAxis: {
    	show:true,
        type: 'value',
	        //'value' 数值轴，适用于连续数据。
			//'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。					
			//'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。					
			//'log' 对数轴。适用于对数数据。
		name:'',  //坐标轴名称
		nameLocation:'',  //坐标轴名称显示位置
			//'start'
			//'middle' 或者 'center'
			//'end'
		nameTextStyle:{   //坐标轴名称的文字样式
			
		},
		nameGap:'', 	//坐标轴名称与轴线之间的距离
		nameRotate:'',  //坐标轴名字旋转，角度值
		inverse:'',     //是否是反向坐标轴，ECharts 3 中新加
        boundaryGap: [0, 0.01],  //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        axisLine: {  //坐标轴轴线相关设置
            show: false,
            lineStyle:{  //坐标轴线样式
            	color:'',
            	width:'',
            	type:'', //'solid','dashed','dotted'
            },
        },
        axisTick: { //坐标轴刻度相关设置
            show: false,
            alignWithLabel:false, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
        	interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
        	inside:false, //坐标轴刻度是否朝内，默认朝外。
        	length:5,     //坐标轴刻度的长度。
        	lineStyle:{   //刻度线样式
        		
        	}
        },
        axisLabel: {  //坐标轴刻度标签的相关设置
            show: false,
        },
        splitLine: {//坐标轴在 grid 区域中的分隔线
            show: false,
            interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
            lineStyle:{   //分割线样式
        		
        	}
        },
        splitArea:{  //坐标轴在 grid 区域中的分隔区域，默认不显示。
        	interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
        	show:false,
        	areaStyle:{  //分隔区域的样式设置
        		
        	}
        },
        data:[{
        	value:'',  //单个类目名称
        	textStyle:{  //类目标签的文字样式。
        		
        	}
        }]
    },
    yAxis: {
    	show:true,
        type: 'category',
        name:'',  //坐标轴名称
		nameLocation:'',  //坐标轴名称显示位置
			//'start'
			//'middle' 或者 'center'
			//'end'
		nameTextStyle:{   //坐标轴名称的文字样式
			
		},
		nameGap:'', 	//坐标轴名称与轴线之间的距离
		nameRotate:'',  //坐标轴名字旋转，角度值
		inverse:'',     //是否是反向坐标轴，ECharts 3 中新加
        boundaryGap: '',  //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        axisLine: {  //坐标轴轴线相关设置
            show: false,
            lineStyle:{  //坐标轴线样式
            	color:'',
            	width:'',
            	type:'', //'solid','dashed','dotted'
            },
        },
        axisTick: { //坐标轴刻度相关设置
            show: false,
            alignWithLabel:false, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
        	interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
        	inside:false, //坐标轴刻度是否朝内，默认朝外。
        	length:5,     //坐标轴刻度的长度。
        	lineStyle:{   //刻度线样式
        		
        	}
        },
        axisLabel: {  //坐标轴刻度标签的相关设置
            show: false,
        },
        splitLine: {//坐标轴在 grid 区域中的分隔线
            show: false,
            interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
            lineStyle:{   //分割线样式
        		
        	}
        },
        splitArea:{  //坐标轴在 grid 区域中的分隔区域，默认不显示。
        	interval:0,   //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
        	show:false,
        	areaStyle:{  //分隔区域的样式设置
        		
        	}
        },
        data: [],
    	axisLabel: {
            rotate:30,
        },
    },
    series: [
        {
        	
        }
    ]
};
myChart.setOption(option, true);