ECharts——雷达图(五边形)

var option = {
            radar: [{
                indicator: [{
                    text: 'a频率 \n (高于60%的用户)',
                    max: 1000
                    },
                    {
                        name: 'b成功率 \n (高于65%的用户)',
                        max:1000
                    },
                    {
                        name: 'c率 \n (低于40%的用户)',
                        max:1000
                    },
                    {
                        name: 'd能力 \n (低于10%的用户)',
                        max:1000
                    },
                    {
                        name: 'e能力 \n (低于30%的用户)',
                        max:1000
                    }
                ],
                center: ['46%', '50%'], // 位置
                radius: 70, //大小
                startAngle: 90,  // 雷达图的旋转偏移量
                splitNumber: 5,  // 分层5层,当前最大1000,可理解为每层200
                shape: 'line',
                name: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#595959', // 文字颜色
                        fontSize: 13
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#FFFFFF','#EEEEEE', '#FFFFFF','#EEEEEE', '#FFFFFF']
                        //圆环颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(128, 128, 128, 0.1)' // 五角内部的连接线颜色
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#595959' // 每个区域的边框颜色
                    }
                }
            }],
            series: [{
                name: '雷达图',
                type: 'radar',
                itemStyle: {
                    emphasis: {
                        // color: 各异,
                        lineStyle: {
                            width: 4
                        }
                    }
                },
                data: [{
                    value: [200, 400, 600, 800, 1000],   // 排序从顶部→左→左下角→右下角→右侧
                    lineStyle: { // 五点连接线的样式。
                        normal: {
                            opacity: 1, // 图形透明度,
                            color: '#1F6AFB'
                        }
                    },
                    itemStyle: { // 单个拐点标志的样式设置。
                        normal: {
                            borderColor: '#1F6AFB',
                            // 拐点的描边颜色。[ default: '#000' ]
                            borderWidth: 3,
                            // 拐点的描边宽度,默认不描边。[ default: 0 ]
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0.1)' // 五点连接后形成的区域颜色: 透明色
                        }
                    }
                }]
            }]
        }

效果图:

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java中可以用JavaFX库来绘制五边形雷达图。以下是一个简单的示例代码: ``` import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.paint.Color; import javafx.stage.Stage; public class RadarChart extends Application { @Override public void start(Stage primaryStage) throws Exception { Group root = new Group(); Canvas canvas = new Canvas(600, 600); root.getChildren().add(canvas); Scene scene = new Scene(root, 600, 600, Color.WHITE); GraphicsContext gc = canvas.getGraphicsContext2D(); gc.setStroke(Color.BLACK); gc.setLineWidth(1); int centerX = 300; int centerY = 300; int radius = 200; int sides = 5; double angle = Math.toRadians(360.0 / sides); double[] values = {0.8, 0.6, 0.4, 0.2, 0.7}; // 绘制五边形 for (int i = 0; i < sides; i++) { double x = centerX + radius * Math.sin(i * angle); double y = centerY - radius * Math.cos(i * angle); gc.strokeLine(centerX, centerY, x, y); } gc.strokeLine(centerX + radius, centerY, centerX - radius, centerY); // 绘制数据区域 gc.setFill(Color.BLUE); gc.setGlobalAlpha(0.5); for (int i = 0; i < sides; i++) { double x = centerX + values[i] * radius * Math.sin(i * angle); double y = centerY - values[i] * radius * Math.cos(i * angle); if (i == 0) { gc.beginPath(); gc.moveTo(x, y); } else { gc.lineTo(x, y); } } gc.closePath(); gc.fill(); primaryStage.setTitle("Radar Chart"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 运行结果如下: ![Radar Chart](https://i.imgur.com/DxgWVX7.png)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值