儀表盤

目前一個圖表項目須要用echarts畫一個簡易儀表盤,找了半天,沒有找到想要的,通過修改最後畫了出來javascript


代碼以下:java

//儀表板
        option = {
			series: [
				{
			        name: '1刻度',
			        type: 'gauge',
			        // radius: '45%',
			        // center: ['50%', '50%'],
			        // startAngle: 212,
			        // endAngle: -32,
			        axisLine: {
			            lineStyle: {
			                width:1,
			                color:[[1,'#3a9cf9']]
			            },
			        },
			        splitLine: {
						show: false,
			        },
			        axisLabel: {
			            show:false
			        },
			        axisTick:{
			            show:false
			        },
			        detail:{
			            show:false
			        },
			        pointer:{
						show: false
			        }
			    },
				{
					name: '2刻度',
					type: 'gauge',//儀表盤
					radius: '100%',//儀表盤半徑
					center: ['50%', '50%'],//儀表盤位置
					splitNumber: 6,
					// startAngle:208,//起始角度
					// endAngle: -28,//結束角度
					// data: [{value: 10, name: ''}],
					axisLine: {
						lineStyle: {//儀表盤軸線相關配置。
							color: [ //錶盤顏色
								[ 0.16, "#78243E" ],//0-50%處的顏色
								[ 0.33, "#ca3947" ],//51%-70%處的顏色
								[ 0.5, "#3a9cf9" ],//70%-90%處的顏色
								[ 0.8,"#3a9cf9" ],//90%-100%處的顏色
								[ 0.9,"#3a9cf9" ],//90%-100%處的顏色
								[ 1,"#3a9cf9" ]//90%-100%處的顏色
							],
							width : 1//錶盤寬度
						}
					},
					splitLine: {//分隔線樣式相關
							length: 4,//分割線的長度
							lineStyle: {
									width:1,
									color:'auto'
							}
					},
					axisLabel: {//大刻度標籤。
						show: false,
					},
					axisTick:{//小刻度相關
							show:false
					},
					detail: {//儀表盤詳情數據相關
						show: false,
						textStyle: {
							color: '#5bdbff',
							fontSize:8,
							offsetCenter: [0,'80%']
						}
					},
					itemStyle:{//指針樣式
						normal: {
							lineStyle: {
								shadowColor : 'rgba(0,0,0,0.4)',
							}
						}
					},
					pointer:{//指針長度與寬度
							width: 2,
							length: '66%',
							color : 'auto'
					},
					data: [{
							value: 3.1
					}]
			    }
        	]
    	};

        var chart= echarts.init(document.getElementById('option'));
     chart.setOption(InOptionCH4, true);
相關文章
相關標籤/搜索