ECharts图表常用属性参考

版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/82379902

option = {
	    title: {
	        text: '周转率',  //图表标题
	        textStyle : {
	            color : '#eaba2c',
	            fontSize : 24,
	            fontWeight : 'normal',
	        },
	    },
	    tooltip: {
	        trigger: 'axis',  //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
	    },
	    legend: {  //图例
	        data:['周转率'],  //和series.name值一样才会显示
	        orient: 'vertical',
	        left: 'right',  //当组件的 left 值为 'right' 以及纵向布局（orient为'vertical'）的时候为右对齐
	        top: '0%',  //图例距离容器顶部的距离
	        textStyle : {  //图例样式
	            color : '#000',
	            fontSize : 16,
	        },
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true  //grid 区域是否包含坐标轴的刻度标签
	    },
	    xAxis: {
	        name: '名称',
	        type: 'category',
	        // boundaryGap: false,  //x轴是否从0刻度开始
	        data: ['一季度','二季度','三季度','四季度'],

			axisLine: {  //轴线
				symbol:['none','arrow'],
				symbolSize:[6, 10],
				lineStyle: {  //轴线样式
					type: 'solid',
					color: '#000',
				},
			},
			splitLine: {  //刻度线
				lineStyle: {  //刻度线样式
					type: 'dotted',
					color: '#000',
				}
			},
			axisLabel : {  //轴线上数据样式
			    interval: 0, //坐标轴刻度标签的显示间隔
			    textStyle : {
			        color : '#000',
			        fontSize : 16,
			    },
			    // formatter:function(value){ //坐标轴竖排显示
			        // 	return value.split("").join("\n");
			    // },
			},
            axisTick:{
                show:false,  //是否显示刻度线
            },
	    },
	    yAxis: {
	        type: 'value',
	        // splitNumber: 3,  //坐标轴的分割段数[ default: 5 ]
	        minInterval: 5,  //坐标轴最小间隔大小[ default: 0 ]

			axisLine: {  //轴线
				symbol:['none','arrow'],
				symbolSize:[6, 10],
				lineStyle: {  //轴线样式
					type: 'solid',
					color: '#000',
				}
			},
			splitLine: {  //刻度线
				lineStyle: {  //刻度线样式
					type: 'dotted',
					color: '#000',
				}
			},
			axisLabel : {  //轴线上数据样式
			    formatter : '{value} %',  //为y轴数值添加百分号%
			    textStyle : {
			        color : '#000',
			        fontSize : 16,
			    },
			},
            axisTick:{
                show:false,  //是否显示刻度线
            },
	    },
	    series: [
	        {
	            name:'周转率',
	            type:'line',
	            //type:'bar',  
	            //barWidth: '30%',  //type值为'bar'(柱状图)时使用，表示柱状图宽度
	            data:[20, 16, 38, 30],
	            symbolSize : 6,  //折线图上圆点的大小
	            itemStyle : {
	                normal : {
	                    color : '#d87f20',  //折线图圆点颜色
	                    lineStyle : {
	                        color : '#d87f20',  //折线图折线颜色
	                        width : 2,  //折线图折线粗细
	                    }
	                }
	            },
	        },
	    ]
	};