EChart-gauge

image.png

image.png

chartOne("chart1","设施运行正常率", facility.toFixed(2)*100, "15%", "98%", "10px", '正常率');
chartOne("chart2","第三方质检验达标率", ${waterThird}, "-2%", "98%", "10px", '达标率');
chartOne("chart3","主管单位质抽检达标率", ${waterMain}, "-2%", "98%", "10px", '达标率');

function chartOne(divChart, name, data, left, radius, bottom, seriesName) {
    var myChart = echarts.init(document.getElementById(divChart));

    option = {
        title:{
            text:name,
            bottom:bottom,
            left:left,
            textStyle:{
                fontSize: 12,
                align:'center',
                color:'blue'
            }
        },
        tooltip : {
            formatter: "{a}: {c}%",
            position: 'top'
        },
        toolbox: {
            feature: {
                restore: {show: false},
                saveAsImage: {show: false}
            }
        },
        series: [
            {
                name: seriesName,
                animation: false,
                radius: radius,
                type: 'gauge',
                min: 0,
                max: 100,
                splitNumber: 4,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.1, '#d9534f'], [0.3, '#f0ad4e'],[0.8, '#5bc0de'],[1, '#5cb85c']],
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                detail: {formatter:'{value}%', fontSize:12, offsetCenter:[0,'65%']},
                data: [{value: data, name: ''}]
            }
        ]
    };

    myChart.setOption(option);
}