eachrt 雷达图背景颜色填充，线条颜色自定义【在线调试】

关注

原创最新推荐文章于 2026-02-09 13:01:28 发布 2.1w 阅读 AI 写同款· GEO 优化 ›

雷达图 自定义点样式渐变背景色雷达图的自定义点样式与渐变背景色 1、首先通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <script src="echarts.min.js"></script> </head> </html> 2、然后准备一个具备高阅读详情

效果
这里写图片描述


option = {
    title : {
        text: '预算 vs 开销（Budget vs spending）',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'bottom',
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    polar : [
       {
           indicator : [
               { text: '销售（sales）', max: 6000},
               { text: '管理（Administration）', max: 16000},
               { text: '信息技术（Information Techology）', max: 30000},
               { text: '客服（Customer Support）', max: 38000},
               { text: '研发（Development）', max: 52000},
               { text: '市场（Marketing）', max: 25000}
            ],
         splitArea : {
                 show : true,   
                  areaStyle : {
                       color: ['#d72941', '#f1c35b','#99c736', '#75813b', '#4e3829',]  
                       // 图表背景网格的颜色
                   }
         },
         splitLine : {
               show : true,
               lineStyle : {
                   width : 1,
                   color : ['#7954a1','#ef91ab']  
                   // 图表背景网格线的颜色
                }
            }
        }
    ],
    calculable : true,
    series : [
        {
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '预算分配（Allocated Budget）'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        }
    ]
};