ECharts 图表常用属性参考 -- 雷达图Radar

最新推荐文章于 2025-03-26 16:04:21 发布

_格鲁特宝宝

最新推荐文章于 2025-03-26 16:04:21 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web FrontEnd ECharts 文章标签：雷达图 radar echart echarts

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/103202982

Web FrontEnd 同时被 2 个专栏收录

227 篇文章

订阅专栏

ECharts

13 篇文章

订阅专栏

本文详细介绍了ECharts中雷达图（Radar）的各种配置选项和使用方法，包括数据项设置、轴线样式、标记点、图例以及交互等特性，帮助开发者创建出丰富多样的雷达图。

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

color: ['#29C0F3', '#AA5BF2', '#F5C333', '#26C372', '#4474F5'],
tooltip: {},
legend: {
    top: 48,
    // 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    icon: "rect",
    data: ['系列1', '系列2', '系列3', '系列4', '系列5'],
    textStyle: {
        fontSize: 22,
        color: '#FFF',
        padding: [4, 0, 0, 0],
    },
    itemWidth: 31,
    itemHeight: 17,
    itemGap: 34,
},
radar: {
    // shape: 'circle',
    name: {
        textStyle: {
            color: '#439DD7',
            fontSize: 24,
        }
    },
    center: ['52%', '54%'],
    radius: '60%',
    splitNumber: 4,
    axisLine: {
        show: true,
        lineStyle: {
            // 坐标轴轴线
            color: '#3E9AD7',
        }
    },
    splitLine: {
        lineStyle: {
            // 坐标轴在 grid 区域中的分隔线
            color: '#3E9AD7',
        }
    },
    splitArea: {
        areaStyle: {
            // 坐标轴在 grid 区域中的分隔区域
            color: 'rgba(0, 0, 0, 0)',
        }
    },
    indicator: [
        { name: '小修',},
        { name: '材料费',},
        { name: '油耗',},
        { name: '电耗',},
    ]
},
series: [{
    name: '小修 vs 材料费 vs 油耗 vs 电耗',
    type: 'radar',
    areaStyle: {
        opacity: 0.3,
    },
    symbolSize: 6,
    // 高亮样式
    emphasis: {
        itemStyle: {
            borderWidth: 2,
        },
        label: {
            show: true,
            fontWeight: 'normal',
            fontFamily: 'Arial',
            fontSize: 24,
        },
        lineStyle: {
            width: 2,
        },
        areaStyle: {
            opacity: 0.5,
        },
    },
    data : [
        {
            value : [4300, 10000, 28000, 35000],
            name : '系列1'
        },
        {
            value : [5000, 14000, 26000, 31000],
            name : '系列2'
        },
        {
            value : [3500, 1480, 2580, 3400],
            name : '系列3'
        },
        {
            value : [580, 1400, 2800, 3100],
            name : '系列4'
        },
        {
            value : [500, 140, 280, 310],
            name : '系列5'
        }
    ]
}]