Echarts在线免费图表

 
            

function detectionData(str) {
    var color = '#5eb95e';
    if (str >= 50 && str <= 60) {
        color = '#F37B1D';
    } else if (str > 60) {
        color = '#dd514c';
    }
    return color;
}
var option = {
    "tooltip": {
        "formatter": "{a} <br/>{b} : {c}%"
    },
    
    "series": [
        //火力调节开始
    {
        "name": "火力调节",
        "type": "gauge",
        "splitNumber": 4,
        //clockwise: false,
        "clockwise": true,
        "startAngle": 50,
        "endAngle": -230,
        "axisLine": {
            "lineStyle": {
                "color": [
                    [0.31, "#F37B1D"],
                    [1, "#e9ecf3"]
                ],
                "width": 15
            }
        },

        "axisTick": {
        	show:false
        },
        
       "pointer": {
           length: '120%',
            width:120,
            height:120,
       },
        "axisLabel": {
        	distance: -60,
            formatter: function(e) {
                switch (e + "") {
                    case "0":
                        return "低";
                    case "50":
                        return "中";
                    case "100":
                        return "高";
                    default:
                        return ""
                }
            },
            textStyle: {
                color: "#fff",
                fontSize: 16,
            },
        },
        "splitLine": {
            "show": false
        },
        
        "detail": {
            "formatter": "{value}%",
            "offsetCenter": [0, 0],
            "textStyle": {
            "fontSize": 30,
            "color": "#fff"
            }
        },
        "title": {
            "offsetCenter": [0, "100%"],
        },
        "data": [{
            "name": "",
            "value": 31
        }]
    },
    //火力调节结束
    /*火力显示*/
/*    {
            name: '火力显示',
            type: 'gauge',
            radius: '40%',
            startAngle: 359.9,
            endAngle: 0,
            splitNumber: 4,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [1, '#F5A623']
                    ],
                    width: '100%',
                    shadowColor: '#F5A623', //默认透明
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 40,
                    opacity: .7,
                }

            },
            splitLine: { //分隔线样式
                show: false,
            },
            axisLabel: { //刻度标签
                show: false,
            },
            axisTick: { //刻度样式
                show: false,
            },
            detail:{
            	show: false,
            },
            data: [{
            	show: false,
            }]
        },*/
        //火力显示结束
    ]
}

myChart.setOption(option);
setInterval(function() {
    var value = (Math.random() * 100).toFixed(2) - 0;
    option.series[0].data[0].value = value;
    option.series[0].axisLine.lineStyle.color[0][0] = value / 100;
    option.series[0].axisLine.lineStyle.color[0][1] = detectionData(value);
    myChart.setOption(option, true);
}, 500);