欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-19 23:15:16
...

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


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)'
                }
            ]
        }
    ]
};
相关标签: echart