SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="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, {
                    renderer: 'canvas'
                });

                var option ={
                    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'
                                }
                            },
                            title : {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic'
                                }
                            },
                            detail : {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder'
                                }
                            },
                            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'
                                }
                            },
                            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>