echarts 儀表盤設定
阿新 • • 發佈:2020-10-28
option = { backgroundColor:"#293c55", series : [ { name: '速度', type: 'gauge', center:["50%","50%"], //儀表盤在畫布中的位置 min: 0, max:100, splitNumber: 10, //儀表盤分割段數 radius: '50%', axisLine: { // 座標軸線 show:true, lineStyle: { // 屬性lineStyle控制線條樣式 width: 30, //錶盤寬度 color:[[1, '#3fa7dc']] //設定儀表盤顏色和指標顏色 } }, axisTick: { // 座標軸小標記 length: -15, // 屬性length控制線長 刻度長度 負值刻度朝外,正值刻度朝內 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length: -36, // 屬性length控制線長 負值刻度朝外,正值刻度朝內 lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式 color: '#ccc' // 分割線顏色 } }, axisLabel: { // backgroundColor: 'auto', //設定刻度數值的背景顏色 // borderRadius: 2, //設定圓角 color: '#eee', // padding: 3, textShadowBlur: 2, textShadowOffsetX: 1, textShadowOffsetY: 0, textShadowColor: '#222' }, detail: { // 其餘屬性預設使用全域性文字樣式,詳見TEXTSTYLE formatter: function (value) { value = (value + '').split('.'); value.length< 2 && (value.push('00')); return ('00' + value[0]).slice(-2) + '.' + (value[1] + '00').slice(0, 2)+"%"; }, fontSize:24, //文字大小 // fontWeight: 'bolder', //字型粗細 // borderRadius: 3, //文字邊框圓角 // backgroundColor: '#444', // 文字背景顏色 // borderColor: '#aaa', //文字邊框顏色 shadowBlur: 5, //文字背景陰影長度 shadowColor: '#0ff', //文字背景顏色 shadowOffsetX: 0, //文字背景陰影x偏移 shadowOffsetY:3, //文字背景y偏移// borderWidth: 2, //邊框粗細 textBorderColor: '#000', //文字描邊顏色 textBorderWidth: 2, // 文字描邊寬度 textShadowBlur: 2, //文字背景陰影長度 textShadowColor: '#fff', //文字本身陰影顏色 textShadowOffsetX: 0, //文字陰影x偏移 textShadowOffsetY: 0, //文字陰影y偏移 fontFamily: 'Arial', width: 100, //文字塊寬度 color: '#fff', //文字塊顏色 rich: {} },data: [{value: 91.3}], // data: [{value: 40, name: 'km/h'}] }, ] }; myChart.setOption(option,true); // 定時改變數值 // setInterval(function (){ // option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0; // myChart.setOption(option,true); // },2000);