1. 程式人生 > >echarts儀表盤樣式設定

echarts儀表盤樣式設定

function fillpan(obj){
	var myChart1 = echarts.init($(obj.id)[0]);
	var option = {
		    backgroundColor: "#ffffff",
		    title: {
		        text: obj.text,
		        left:'center', //標題位置
		        bottom:'10%',
		        textStyle:{
		        	color:"#999",
		        	fontSize:18
		        },
		    },
		    color : defaultColor,
		    tooltip:{
	            formatter: obj.data.value
	        },
		    series: [{
		        name: obj.text,
		        type: 'gauge',
		        max:obj.max,
		        min:obj.min,
		        detail: {
		           /* formatter: '{value}',*/
		        	formatter:function(value){
	            			return value  +"\n"+"("+obj.danwei+")";//實際資料顯示加單位並且換行
	            	},
		            textStyle: { 
	                    color: 'auto',
	                    fontSize : 19,
	                },
	                offsetCenter:["0","55%"] //實際值位置
		        },
		        axisLine: {            // 座標軸線
	                show: true,        // 預設顯示,屬性show控制顯示與否
	                lineStyle: {       // 屬性lineStyle控制線條樣式
	                    /*color: [[0.2, 'lightgreen'],[0.65, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']],*/
	                	color:obj.color,//根據資料分層顏色
	                    width: 22
	                }
	            },
		        pointer: {
		        	width: 5, //指標的寬度
		        	length: "70%", //指標長度,按照半圓半徑的百分比
		        },
		        splitLine: { //分割線樣式
		        	 length: 20
		        },
		        data: obj.data

		    }]
		};
	myChart1.setOption(option);
	window.addEventListener("resize",function(){
		$("#paitable").datagrid("resize",{
			height:$("#paitable_").height()+"px"
		});
		myChart1.resize();
	});
}