目前一個圖表項目須要用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);