Echarts多个雷达图

花不似盛⁠开

已于 2023-06-03 20:41:05 修改

阅读量405

点赞数

文章标签： echarts 前端 javascript

于 2023-06-03 20:09:17 首次发布

本文链接：https://blog.csdn.net/Runce_/article/details/131025046

版权

本文介绍了如何使用Echarts设置多个雷达图，并通过radarIndex指定显示的雷达图，同时展示了如何调整雷达图在画布中的位置，如center属性用于设定雷达图相对于容器的上下左右偏移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

radar: [
        {
            startAngle: 120,//改变雷达图整体形状
            indicator: [
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 }
            ],
            center: ['17%', '50%'],
            axisLine: {
                show: false,
            },//是否显示坐标轴线
            splitLine: {
                show: false
            },//是否显示区域分隔线
            splitArea: {
                areaStyle: {
                    color: ['#0F3367', '#060C2C', '#02021A', '#02021A', '#02021A'].reverse(),
                },
            },
        },
        {
            startAngle: 120,//改变雷达图整体形状
            indicator: [
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 },
                { name: '', max: 10 }
            ],
            axisLine: {
                show: false
            },//是否显示坐标轴线
            splitLine: {
                show: false
            },//是否显示区域分隔线
            splitArea: {
                areaStyle: {
                    color: ['#0F3367', '#060C2C', '#02021A', '#02021A', '#02021A'].reverse(),
                },
            },
        },]
 series: [
        {
            type: 'radar',
            symbol: 'none',//拐点样式
            symbolSize: 10,
            itemStyle:{
                color:"#0C2657"
            },
            data: [
                {
                    value: [10, 10, 10, 10, 10, 10],
                }
            ]
        },
        {
            type: 'radar',
            symbol: 'none',
            radarIndex: 1,//第二个图
            symbolSize: 10,
            itemStyle:{
                color:"#0C2657"
            },
            data: [
                {
                    value: [10, 10, 10, 10, 10, 10],
                }
            ]
        },]

radarIndex：1，设置第几个雷达图

center:['17%','50%']，设置雷达图左右上下距离

效果如下：