风速/风向模拟echarts gauge配置项内容和展示

风速风向表盘模拟

      var option = {
    title: {
        x: "center",
        top: 0,
        text: '风速/风向模拟',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 18,
            color: "#333"
        }
    },
    tooltip: {
        show: true,
        backgroundColor: '#fff',
        borderColor: '#f60',
        borderWidth: '1px',
        textStyle: {
            color: '#333'
        },
        formatter: function(param) {
            if(param.seriesIndex == 2){
               return '<em style="color:' + param.color + ';">当前风向:' + param.value + '</em> °' 
            }
            if(param.seriesIndex == 3){
               return '<em style="color:' + param.color + ';">当前风速:' + param.value + '</em> m/s' 
            }
        }
    },
    series: [{
        name: '',
        type: 'gauge',
        radius: '83%',
        min: 0,
        max: 360,
        startAngle: 90,
        endAngle: 449.9,
        splitNumber: 0,
        axisLine: {
            lineStyle: {
                color: [
                    [0.5, '#ccc'],
                    [1, '#ccc']
                ],
                width: 4
            }
        },
        axisLabel: {
            show: false
        },
        detail: {
            show: false
        }
    }, {
        type: 'gauge',
        radius: '80%',
        splitNumber: 1,
        min: 0,
        max: 360,
        startAngle: 90,
        endAngle: 449.9,
        axisLine: {
            show: false,
            lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [
                    [1, '#8f8f8f']
                ]
            }
        },
        axisTick: {
            show: true,
            lineStyle: {
                color: '#8f8f8f',
                width: 1
            },
            length: '-2%',
            splitNumber: 60
        },
        splitLine: {
            show: true,
            length: 12,
            lineStyle: {
                color: '#8f8f8f',
            }
        },
        axisLabel: {
            show: false
        },
        detail: {
            show: false
        }
    }, {
        name: '',
        type: 'gauge',
        min: 0,
        max: 360,
        startAngle: 90,
        endAngle: -269.9999,
        radius: '80%',
        splitNumber: 12,
        axisLine: {
            lineStyle: {
                width: 5,
                shadowBlur: 0,
                color: [
                    [0.25, '#DDBD4D'],
                    [0.5, '#E43F3D'],
                    [0.75, '#7CBB55'],
                    [1, '#9CD6CE']
                ]
            }
        },
        axisTick: {
            show: true,
            splitNumber: 1
        },
        splitLine: {
            length: 10,
            lineStyle: {
                width: 2
            }
        },
        axisLabel: {
            formatter: function(e) {
                switch (e + "") {
                    case "0":
                        return "正北";
                    case "360":
                        return "正北";
                    case "180":
                        return "正南";
                    case "90":
                        return "正东";
                    case "270":
                        return "正西";
                    default:
                        return e;
                }
            },
            textStyle: {
                fontSize: 12,
                fontWeight: ""
            }
        },
        pointer: {
            show: true,
        },
        detail: {
            formatter: function(param) {
                var level = '';
                if (param > 0 && param < 90) {
                    level = '东北'
                } else if (param > 90 && param < 180) {
                    level = '东南'
                } else if (param > 180 && param < 270) {
                    level = '西南'
                } else if (param > 270 && param < 360) {
                    level = '西北'
                } else if (param == 360) {
                    level = '正北'
                } else if (param == 270) {
                    level = '正西'
                } else if (param == 90) {
                    level = '正东'
                } else if (param == 180) {
                    level = '正南'
                }
                return "当前风向:"+level + "(" + param + "°)";
            },
            offsetCenter: [0, 140],
            textStyle: {
                fontSize: 40
            }
        },
        data: [{
            value: 279,
            name: ''
        }]
    }, { 
        name: '风速',
        type: 'gauge',
        center: ['60%', '35%'],
        radius: '22%',
        min: 0,
        max: 60,
        startAngle: 90,
        endAngle: -269.9999,
        splitNumber: 12,
        animation: 0,
        pointer: { 
            show: 1,
            length: '60%',
            width: 3
        },
        itemStyle: {
            normal: {
                color: '#00b0b0',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        },
        axisLine: {
            lineStyle: {
                color: [
                    [1, '#337ab7']
                ],
                width: 6
            }
        },
        splitLine: {
            show: 1,
            length: 6,
            lineStyle: {
                width: 1
            }
        },
        axisTick: {
            show: false
        }, 
        axisLabel: { 
            show: 1,
            distance: 1, 
            textStyle: {
                color: '#0000ff'
            },
            formatter: function(t) {
                switch (t + '') {
                    case '10':
                        return '10';
                    case '20':
                        return '20';
                    case '30':
                        return '30';
                    case '40':
                        return '40';
                    case '50':
                        return '50';
                    case '60':
                        return '60';
                }
            }
        },
        detail: {
            formatter: function(param) {
                return "当前风速:" + param + "m/s";
            },
            offsetCenter: [0, 60],
            textStyle: {
                fontSize: 12
            }
        },
        data: [{
            value: 3.2,
            name: ''
        }]
    }]
};

setInterval(function() {
    var datavalue = (Math.random() * 360).toFixed(2);
    var datavalue2 = (Math.random() * 60).toFixed(2);
    option.series[2].data[0].value = datavalue;
    option.series[3].data[0].value = datavalue2;
    myChart.setOption(option, true);
}, 1000);