Echarts雷达图自定义设置

1.首先使用echarts,这里是echarts官网，引用和使用，不多说了。 (Apache ECharts)

 

---

2. echarts雷达图的配置

echarts.init(document.getElementById('zbLeiDa')); // 引入元素 初始化生成对象

3.获取到元素生成对象，之后就可以进行配置；但是之前先造一些数据。

let data = [582, 421.2, 622.1, 625.3, 265]; // 显示在雷达图上面的数据
let indicator = [ 
   {
       name: '需求(辆/小时)',
       max: 1000,
       color: '#02FF85',
    },
    {
       name: '供给',
       max: 1000,
       color: '#1CB6FF',
     },
     {
       name: '饱和度',
       max: 1000,
       color: '#ffcd00',
     },
     {
        name: '延误(秒)',
        max: 1000,
        color: '#FF5458',
      },
      {
        name: '排队长度(米)',
        max: 1000,
        color: '#02E3E5',
      },
];

4.配置

let option = {
    radar: {
        center: ['46%', '54%'], // 中心点设置
        radius: '86%', // 直径
        nameGap: 0, //  周围拐点名字和 角的距离
        indicator: indicator, // 设置周围拐点的名称和最大值颜色等
        splitLine: {
            show: false, // 每一层渐进色线 是否显示分割线
        },
        axisName: {
            show: true,
            color: 'red',
        },
        splitArea: {
            show: false,
        },
        axisLine: {
            show: false,
        },
    }, 
    series: [
    {
        type: 'radar', // 类型
        data: [data],  // 要显示的数据 最终显示的数据
        label: {
        show: true,
        formatter: function(params) {
            return params.value;
        },
        color: '#00e5ff', // 数据的颜色
        },
        lineStyle: {
            //边缘颜色
            width: 1,
            color: '#13F1FF',
        },
        itemStyle: {
            borderWidth: 1,
            color: '#fff',
            borderColor: '#F2F063',
        },
        areaStyle: {
            color: '#13F1FF',
            opacity: 0.2,
        },
    },
    {
        type: 'radar',
        data: [[1000, 1000, 1000, 1000, 1000, 1000]], // 最外层 依此向里
        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.06,
        },
    },
    {
        type: 'radar',
        data: [[900, 900, 900, 900, 900, 900]],

        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#2C72C8',
        },

        areaStyle: {
        color: '#2C72C8',
        opacity: 0.12,
        },
    },
    {
        type: 'radar',
        data: [[800, 800, 800, 800, 800, 800]],
        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.18,
        },
    },
    {
        type: 'radar',
        data: [[700, 700, 700, 700, 700, 700]],

        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.19,
        },
    },
    {
        type: 'radar',
        data: [[600, 600, 600, 600, 600, 600]],

        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.17,
        },
    },
    {
        type: 'radar',
        data: [[500, 500, 500, 500, 500, 500]],
        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.16,
        },
    },
    {
        type: 'radar',
        data: [[400, 400, 400, 400, 400, 400]],

        symbol: 'none',
        lineStyle: {
        width: 0,
        },
        itemStyle: {
        color: '#4175F5',
        },

        areaStyle: {
        color: '#4175F5',
        opacity: 0.13,
        },
    },
], 

}

myCharts.setOption(option);

6.最终显示的样子

这部分还是有点问题，里面文字颜色如何跟随外面一直，是怎么设置？欢迎大家来讨论！

Echarts雷达图自定义设置(2)_蚕食我的耐心的博客-CSDN博客