1. 程式人生 > 實用技巧 >echarts 儀表盤設定

echarts 儀表盤設定

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);