echarts按需修改

目录

饼图不显示指示线和指示文字

设置饼图在父元素的位置，举例居中，按需调整

调整legend

---

option = {
    grid: {  //解决echarts图标未铺满容器
	    left: "3%",
	    right: "4%",
	    bottom: "3%",
	    width: "900px",
	    height: "168px",
	    containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00'],
        axisLabel: {  //设置横轴字体颜色
           show: true,
           textStyle: {
               color: '#678592'
           }
        }
    },
    yAxis: {
        min:0,
        max:4,
        axisLabel:{  //自定义Y轴
            formatter: function (value) {
                var texts = [];
        	    if(value==0){
        	    	texts.push('0');
        	    }
        	    else if (value <=1) {
        	        texts.push('2.0e+2');
        	    }
        	    else if (value<= 2) {
        	        texts.push('4.0e+2');
        	    }
        	    else if(value<= 3){
        	    	texts.push('8.0e+2');
        	    }
        	    else{
        	    	texts.push('10.0e+2');
        	    }
        	    return texts;
            }
        }
    },
    series: [{
        data: [2, 2, 2, 2, 2, 2, 2],
        type: 'line',
        symbol: 'none',  //取消折线的折点圆圈
        itemStyle : {  
            normal : {  
                color:"rgba(0,0,0,0)",  //修改折点颜色
                lineStyle:{   //修改折线颜色
                    color:'rgba(249, 109, 26, 1)'  
                }  
            }  
        }  
    },{
        data: [1, 1, 1, 1,  1, 1, 3],
        type: 'line',
        itemStyle : { 
            normal : {  
                lineStyle:{  
                    color:'rgba(2, 206, 160, 1)'  
                }  
            }  
        }  
    }]
};

饼图不显示指示线和指示文字

series: [
	{
		label: {
			show: false,
		},
		labelLine:{  //删除指示线
			show:false
		},
	}
]

设置饼图在父元素的位置，举例居中，按需调整

series: [
	{
		center: ['50%', '50%'],
	}
]

调整legend

legend: {
    // top: '5%',
    left: 'center',
	bottom: 30,		//具体像素值或百分比
},

legend: {
	x:'center',
	y:'bottom',
	padding:[0,0,30,0],
},

legend:{
    itemGap: 15,  //图例之间的间隔
    textStyle: {
        color: '#666'  // 图例文字颜色
    },
    itemWidth: 24,   // 设置图例图形的宽
    itemHeight: 18,  // 设置图例图形的高
    backgroundColor: '#eee',  // 设置整个图例区域背景颜色
}