test/gauge.html - master - githubmirror/echarts

test/gauge.html
505 строк23 KB
huangyulie
upload example
27 дек 2022, 19:11
27 дек 2022, 19:11c5eb4fa

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/simpleRequire.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: 600;
            }
        </style>
        <div style="position: relative; height: 600px;" id="main"></div>
        <div style="position: relative; height: 500px;" id="main1"></div>
        <div style="position: relative; height: 500px;" id="main2"></div>
        <script>
            require([
                'echarts'
            ], function (echarts) {
                var chart1 = echarts.init(document.getElementById('main1'), 'dark', {});
                var option1 = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '业务指标',
                            type: 'gauge',
                            progress: {
                                show: true
                            },
                            anchor:{
                                showAbove: true,
                                show: true
                            },
                            roundCap: true,
                            detail: {formatter: '{value}%'},
                            data: [{value: 58.46, name: '完成率'}]
                        }
                    ]
                };
                chart1.setOption(option1);
            })
        </script>
        <script>
            require([
                'echarts'
            ], function (echarts) {
                var chart2 = echarts.init(document.getElementById('main2'), 'dark', {});
                var option2 = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '业务指标',
                            type: 'gauge',
                            pointer: {
                                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z'
                            },
                            roundCap: true,
                            progress: {
                                show: true,            // 坐标轴线
                                overlap: false,
                                color: ['#f00', '#0f0']
                            },
                            anchor: {
                                show: true,
                                showAbove: true
                            },
                            detail: {
                                formatter: '{value}%'
                            },
                            data: [
                                {
                                    value: 20,
                                    name: '完成率',
                                    title: {
                                        offsetCenter: ['-40%', '20%']
                                    },
                                    detail: {
                                        offsetCenter: ['-40%', '35%']
                                    }
                                },
                                {
                                    value: 40,
                                    name: '达标率',
                                    title: {
                                        offsetCenter: ['0%', '20%']
                                    },
                                    detail: {
                                        offsetCenter: ['0%', '35%']
                                    }
                                },
                                {
                                    value: 60,
                                    name: '优秀率',
                                    title: {
                                        offsetCenter: ['40%', '20%']
                                    },
                                    detail: {
                                        offsetCenter: ['40%', '35%']
                                    }
                                }
                            ],
                            title: {
                                fontSize: 14
                            },
                            detail: {
                                width: 30,
                                height: 12,
                                fontSize: 12,
                                color: 'inherit',
                                borderColor: 'inherit',
                                borderWidth: 1,
                                borderRadius: 3,
                                formatter: '{value}%',
                            }
                        }
                    ],
                };
                chart2.setOption(option2);
            })
        </script>
        <script>

            require([
                'echarts'
            ], function (echarts) {

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

                });

                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控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'inherit'
                                }
                            },
                            splitLine: {           // 分隔线
                                length :20,         // 属性length控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'inherit'
                                }
                            },
                            axisLabel: {
                                formatter: '{a|{value}} km/h',
                                rich: {
                                    a: {
                                        color: '#222',
                                        textBorderColor: '#fff',
                                        textBorderWidth: 2,
                                        backgroundColor: 'inherit',
                                        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: 'inherit',
                                    },
                                    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控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'inherit'
                                }
                            },
                            splitLine: {           // 分隔线
                                length :20,         // 属性length控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'inherit'
                                }
                            },
                            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控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'inherit'
                                }
                            },
                            axisLabel: {
                                formatter:function(v){
                                    switch (v + '') {
                                        case '0' : return 'E';
                                        case '1' : return 'Gas';
                                        case '2' : return 'F';
                                    }
                                }
                            },
                            splitLine: {           // 分隔线
                                length :15,         // 属性length控制线长
                                distance: 10,
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'inherit'
                                }
                            },
                            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: 'inherit'
                                }
                            },
                            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>