xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/dat.gui.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
            }
        </style>
        <div id="main"></div>
        <script>

            require([
                'echarts'
                // 'echarts/chart/gauge',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip'
            ], function (echarts) {

                var chart = echarts.init(document.getElementById('main'), null, {

                });

                var option ={
                    aria: {
                        show: true
                    },
                    tooltip : {
                        formatter: '{a} <br/>{c} {b}'
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series : [
                        {
                            name:'速度',
                            type:'gauge',
                            z: 3,
                            min:0,
                            max:220,
                            splitNumber:11,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    width: 10
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                length :15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto'
                                }
                            },
                            splitLine: {           // 分隔线
                                length :20,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'auto'
                                }
                            },
                            axisLabel: {
                                formatter: '{a|{value}} km/h',
                                rich: {
                                    a: {
                                        color: '#222',
                                        textBorderColor: '#fff',
                                        textBorderWidth: 2,
                                        backgroundColor: 'auto',
                                        padding: [2, 4],
                                        borderRadius: 3
                                    }
                                }
                            },
                            title : {
                                textStyle: { // Test compat
                                    fontWeight: 'bolder',
                                    fontSize: 26,
                                },
                                offsetCenter: [0, 0],
                                formatter: '{a|单位：}{value}',
                                backgroundColor: '#aabbcc',
                                padding: 10,
                                borderRadius: 5,
                                fontStyle: 'italic'
                            },
                            detail : {
                                fontSize: 24,
                                fontWeight: 'bold',
                                textStyle: { // Test compat
                                    backgroundColor: '#eeffee',
                                },
                                offsetCenter: [0, '70%'],
                                borderRadius: 10,
                                borderWidth: 2,
                                borderColor: '#33aa33',
                                shadowBlur: 2,
                                shadowColor: '#222',
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                width: 'auto',
                                rotate: 15,
                                textShadowBlur: 2,
                                textShadowColor: '#66eeaa',
                                textShadowOffsetX: 2,
                                textShadowOffsetY: 3,
                                formatter: [
                                    '{a|码表}',
                                    '{b|{value}}{c|km/h}',
                                    '{j|width is this line is 400}',
                                    '{d|left}{lineHeight|}{f|top}{g|bottom}middle{e|right}{e1|右边}'
                                ].join('\n'),
                                rich: {
                                    a: {
                                        fontSize: 34,
                                        color: 'auto',
                                    },
                                    b: {
                                        fontSize: 20,
                                        color: '#12294f',
                                        align: 'center',
                                        padding: [0, 5, 0, 0]
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: '#aa99bb',
                                        rotate: 30,
                                        backgroundColor: '#223344',
                                        borderRadius: 3,
                                        padding: [2, 10]
                                    },
                                    d: {
                                        align: 'left'
                                    },
                                    e: {
                                        align: 'right'
                                    },
                                    e1: {
                                        color: '#33aa99',
                                        fontSize: 16,
                                        align: 'right'
                                    },
                                    f: {
                                        verticalAlign: 'top'
                                    },
                                    g: {
                                        verticalAlign: 'bottom'
                                    },
                                    h: {
                                        align: 'center'
                                    },
                                    i: {
                                        align: 'center'
                                    },
                                    j: {
                                        width: 400,
                                        backgroundColor: '#aabbcc',
                                        color: '#123'
                                    },
                                    lineHeight: {
                                        lineHeight: 46
                                    }
                                }
                            },
                            data:[{value: 40, name: 'km/h'}]
                        },
                        {
                            name:'转速',
                            type:'gauge',
                            center : ['25%', '55%'],    // 默认全局居中
                            radius : '50%',
                            min:0,
                            max:7,
                            endAngle:45,
                            splitNumber:7,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    width: 8
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                length :12,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto'
                                }
                            },
                            splitLine: {           // 分隔线
                                length :20,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'auto'
                                }
                            },
                            pointer: {
                                width:5
                            },
                            title : {
                                // x, y，单位px
                                offsetCenter: [0, '-30%']
                            },
                            detail : {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 12
                                },
                            },
                            data:[{value: 1.5, name: 'x1000 r/min'}]
                        },
                        {
                            name:'油表',
                            type:'gauge',
                            center : ['75%', '50%'],    // 默认全局居中
                            radius : '50%',
                            min:0,
                            max:2,
                            startAngle:135,
                            endAngle:45,
                            splitNumber:2,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
                                    width: 8
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                splitNumber:5,
                                length :10,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto'
                                }
                            },
                            axisLabel: {
                                formatter:function(v){
                                    switch (v + '') {
                                        case '0' : return 'E';
                                        case '1' : return 'Gas';
                                        case '2' : return 'F';
                                    }
                                }
                            },
                            splitLine: {           // 分隔线
                                length :15,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'auto'
                                }
                            },
                            pointer: {
                                width:2
                            },
                            title : {
                                show: false
                            },
                            detail : {
                                show: false
                            },
                            data:[{value: 0.5, name: 'gas'}]
                        },
                        {
                            name:'水表',
                            type:'gauge',
                            center : ['75%', '50%'],    // 默认全局居中
                            radius : '50%',
                            min:0,
                            max:2,
                            startAngle:315,
                            endAngle:225,
                            splitNumber:2,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
                                    width: 8
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                show: false
                            },
                            axisLabel: {
                                formatter:function(v){
                                    switch (v + '') {
                                        case '0' : return 'H';
                                        case '1' : return 'Water';
                                        case '2' : return 'C';
                                    }
                                }
                            },
                            splitLine: {           // 分隔线
                                length :15,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'auto'
                                }
                            },
                            pointer: {
                                width: 2
                            },
                            title : {
                                show: false
                            },
                            detail : {
                                show: false
                            },
                            data:[{value: 0.5, name: 'gas'}]
                        }
                    ]
                };

                chart.setOption(option);

                setInterval(function () {
                    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
                    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
                    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
                    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
                    chart.setOption(option,true);
                }, 2000);
                // var config = {
                //     labelPosition: 'outside',
                //     clockwise: true,
                //     labelLineLen: 20,
                //     labelLineLen2: 5
                // };

                // function update() {
                //     chart.setOption({
                //         series: [{
                //             name: 'pie',
                //             clockwise: config.clockwise,
                //             label: {
                //                 normal: {
                //                     position: config.labelPosition
                //                 }
                //             },
                //             labelLine: {
                //                 length: config.labelLineLen,
                //                 length2: config.labelLineLen2
                //             }
                //         }]
                //     });
                // }

                // var gui = new dat.GUI();
                // gui.add(config, 'clockwise')
                //     .onChange(update);
                // gui.add(config, 'labelPosition', ['inside', 'outside'])
                //     .onChange(update);
                // gui.add(config, 'labelLineLen', 0, 100)
                //     .onChange(update);
                // gui.add(config, 'labelLineLen2', 0, 100)
                //     .onChange(update);
            })

        </script>
    </body>
</html>