Echars 羅錶盤

//調用

setInterval(function (){//計時器 每10秒刷新一次數據；data.va,data.vb,data.vc 是三個儀表的數據集合
            $.post("${ctx}/eelect/meter/ybpEchars",
                    {},
                    function(data) {
                        yibiaopan(data.va,data.vb,data.vc)
                    });
        },10000)

//標籤

<div id="yibiao" style="width: 50%;height: 50%"></div>

//JS

function yibiaopan(va,vb,vc){
        var myChart = echarts.init(document.getElementById('yibiao'));
        option = {
                backgroundColor: '#1b1b1b',
                tooltip : {
                    formatter: "{a} <br/>{c} {b}"
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name:'B相',
                        type:'gauge',
                        min:0,
                        max:240,
                        splitNumber:12,
                        radius: '40%',
                        axisLine: {            // 座標軸線
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: [[0.3, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                                width: 5,
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 座標軸小標記
                            textStyle: {       // 屬性lineStyle控制線條樣式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 座標軸小標記
                            length :15,        // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: 'auto',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {           // 分隔線
                            length :25,         // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                                width:3,
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {           // 分隔線
                            shadowColor : '#fff', //默認透明
                            shadowBlur: 5
                        },
                        title : {
                            offsetCenter: [-50, '80%'],  
                                textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic',
                              
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        detail : {
                            backgroundColor: '',
                            shadowBlur: 1,
                            offsetCenter: [20, '80%'],       // x, y，單位px
                            textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data:[{value: vb, name: 'B相'}]
                    },
                    {
                        name:'A相',
                        type:'gauge',
                        center : ['28%', '55%'],    // 默認全局居中
                        radius : '30%',
                        min:0,
                        max:240,
                       
                        splitNumber:12,
                        axisLine: {            // 座標軸線
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: [[0.19, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
                                width: 2,
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 座標軸小標記
                            textStyle: {       // 屬性lineStyle控制線條樣式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 座標軸小標記
                            length :12,        // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: 'auto',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {           // 分隔線
                            length :20,         // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                                width:3,
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {
                            width:5,
                            shadowColor : '#fff', //默認透明
                            shadowBlur: 5
                        },
                        title : {
                            offsetCenter: [-50, '80%'],       // x, y，單位px
                            textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                fontStyle: 'italic',
                                color: '#fff',
                                fontSize: 20,
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        detail : {
                            //backgroundColor: 'rgba(30,144,255,0.8)',
                           // borderWidth: 1,
                            borderColor: '#fff',
                            shadowColor : '#fff', //默認透明
                            shadowBlur: 5,
                            width: 80,
                            height:30,
                            offsetCenter: [25, '80%'],       // x, y，單位px
                            textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data:[{value: va, name: 'A相'}]
                    },
                     {
                        name:'C相',
                        type:'gauge',
                        center : ['72%', '55%'],    // 默認全局居中
                        radius : '30%',
                        min:0,
                        max:240,
                       
                        splitNumber:12,
                        axisLine: {            // 座標軸線
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: [[0.19, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
                                width: 2,
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 座標軸小標記
                            textStyle: {       // 屬性lineStyle控制線條樣式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 座標軸小標記
                            length :12,        // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: 'auto',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {           // 分隔線
                            length :20,         // 屬性length控制線長
                            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                                width:3,
                                color: '#fff',
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {
                            width:5,
                            shadowColor : '#fff', //默認透明
                            shadowBlur: 5
                        },
                        title : {
                            offsetCenter: [-50, '80%'],       // x, y，單位px
                            textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                fontStyle: 'italic',
                                color: '#fff',
                                fontSize: 20,
                                shadowColor : '#fff', //默認透明
                                shadowBlur: 10
                            }
                        },
                        detail : {
                            //backgroundColor: 'rgba(30,144,255,0.8)',
                           // borderWidth: 1,
                            borderColor: '#fff',
                            shadowColor : '#fff', //默認透明
                            shadowBlur: 5,
                            width: 80,
                            height:30,
                            offsetCenter: [25, '80%'],       // x, y，單位px
                            textStyle: {       // 其餘屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data:[{value: vc, name: 'C相'}]
                    }
                 
                ]
            };
         myChart.setOption(option);
//         
    }