test/radar-clockwise-interactive.html - master - githubmirror/echarts

test/radar-clockwise-interactive.html
330 строк12 KB
Dai Xuezhou
test(radar): add radar chart direction test case
29 июл 2025, 14:40
29 июл 2025, 14:40f27e1e3
<!--
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>
</head>

<body>
    <style>
        html,
        body,
        #main {
            width: 100%;
            height: 100%;
        }

        #switchBtn {
            position: fixed;
            top: 20px;
            left: 20px;
        }

        #startAngle {
            position: fixed;
            top: 60px;
            left: 20px;
        }

        #startAngleLabel {
            position: fixed;
            top: 40px;
            left: 20px;
        }
    </style>
    <div id="main"></div>
    <button id="switchBtn">Switch to clockwise</button>
    <input id="startAngle" type="range" min="0" max="360" value="90" />
    <label for="startAngle" id="startAngleLabel">Start Angle: 90</label>
    <script>

        require([
            'echarts'
        ], function (echarts) {
            var currentDirection = 'anti-clockwise';
            var startAngle = 90;
            var switchBtn = document.getElementById('switchBtn');
            var startAngleInput = document.getElementById('startAngle');
            var startAngleLabel = document.getElementById('startAngleLabel');

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

            chart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    x: 'left',
                    data: ['图一', '图二', '图三']
                },
                radar: [
                    {
                        id: 'radar1',
                        indicator: [
                            { text: '指标一' },
                            { text: '指标二' },
                            { text: '指标三' },
                            { text: '指标四' },
                            { text: '指标五' }
                        ],
                        center: ['25%', 210],
                        radius: 150,
                        startAngle: 90,
                        splitNumber: 8,
                        name: {
                            formatter: '【{value}】',
                            textStyle: { color: 'red' }
                        },
                        scale: true
                    },
                    {
                        id: 'radar2',
                        indicator: [
                            {
                                text: '语文', max: 150, nameTextStyle: {
                                    color: '#000000', fontSize: 5
                                }
                            },
                            {
                                text: '数学', max: 150, axisLine: {
                                    lineStyle: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                text: '英语', max: 150, axisLine: {
                                    lineStyle: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                text: '物理', max: 120, axisLine: {
                                    lineStyle: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                text: '化学', max: 108, axisLine: {
                                    lineStyle: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                text: '生物', max: 72, axisLine: {
                                    lineStyle: {
                                        color: 'red'
                                    }
                                }
                            }
                        ],
                        center: ['75%', 210],
                        radius: 150
                    },
                    {
                        id: 'radar3',
                        indicator: [{
                            name: 'a',
                            max: 13
                        },
                        {
                            name: 'b',
                            max: 1,
                            min: 0
                        },
                        {
                            name: 'c',
                            max: 16000
                        },
                        {
                            name: 'd',
                            max: 30000
                        },
                        {
                            name: 'e',
                            max: 38000
                        },
                        {
                            name: 'f',
                            max: 52000
                        },
                        {
                            name: 'g',
                            max: 25000
                        }],
                        radius: 150
                    }
                ],
                series: [
                    {
                        name: '雷达图',
                        type: 'radar',
                        itemStyle: {
                            emphasis: {
                                // color: 各异,
                                lineStyle: {
                                    width: 4
                                }
                            }
                        },
                        data: [
                            {
                                value: [100, 8, 0.40, -80, 2000],
                                name: '图一',
                                symbol: 'diamond',
                                symbolSize: 20,
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    }
                                }
                            },
                            {
                                value: [10, 3, 0.20, -100, 1000],
                                name: '图二',
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: 'default'
                                        }
                                    }
                                }
                            },
                            {
                                value: [20, 3, 0.3, -13.5, 3000],
                                name: '图三',
                                symbol: 'none',         // 拐点图形类型，非标准参数
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            type: 'dotted'
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '成绩单',
                        type: 'radar',
                        polarIndex: 1,
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [
                            {
                                value: [120, 118, 130, 100, 99, 70],
                                name: '张三',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                value: [90, 113, 140, 30, 70, 60],
                                name: '李四',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            type: 'dashed'
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: 'join',
                        polarIndex: 2,
                        type: 'radar',
                        data: [{
                            value: [
                                3,
                                1,
                                1,
                                53,
                                66,
                                18,
                                0.0121
                            ]
                        }]
                    }
                ]
            });

            switchBtn.addEventListener('click', function () {
                switchBtn.textContent = 'Switch to ' + currentDirection;
                currentDirection = currentDirection === 'clockwise' ? 'anti-clockwise' : 'clockwise';
                chart.setOption({
                    radar: [{
                        id: 'radar1',
                        clockwise: currentDirection === 'clockwise'
                    }, {
                        id: 'radar2',
                        clockwise: currentDirection === 'clockwise'
                    }, {
                        id: 'radar3',
                        clockwise: currentDirection === 'clockwise'
                    }]
                });
            });

            startAngleInput.addEventListener('input', function () {
                startAngle = parseInt(startAngleInput.value);
                startAngleLabel.textContent = 'Start Angle: ' + startAngle;
                chart.setOption({
                    radar: [{
                        id: 'radar1',
                        startAngle: startAngle
                    }, {
                        id: 'radar2',
                        startAngle: startAngle
                    }, {
                        id: 'radar3',
                        startAngle: startAngle
                    }]
                }, {
                    slient: true
                });
            });
        });

    </script>
</body>

</html>