前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

echarts 为雷达图设置极坐标

ECharts 雷达图可以使用 series[i]-radar设置 ,雷达图主要用于表现多变量的数据,例如玩”和平精英”战况的各个属性分析,雷达图依赖radar组件。 关于雷达图其他的一些属性自行去查看官网,我们在这里讲的是在雷达图上设置极坐标。 首先要了解极坐标系,因为实现极坐标需要一个系列三个属性完成,分别是polar:{}极坐标系、radiusAxis:{}极坐标系的径向轴、angleAxis:{}极坐标系的角度轴完成,查看示例 如何把极坐标系和雷达图合并呢,下面我们就来说说如何设置,还是需要用到radar组件,radar组件下面有一个indicator属性, 它是雷达图的指示器,用来指定雷达图中的多个变量(维度)。 然后我们它的最大值radar.indicator[i].max和最小值radar.indicator[i].min设为统一的值,要注意它的这里的最大值要大于或等于你的数据的最大值,最小值要小于或等于你的数据的最小值。 下面是用雷达图表现的示例。

See the Pen echarts 雷达图设置极坐标 by w3cbest.com (@w3cbest) on CodePen.

var max = 4, min = -4;
option = {
    ...
    radar: {
        ...
        indicator: [{
                name: '销售',
                max: max,
                min: min
            },
            {
                name: '管理',
                max: max,
                min: min
            },
            {
                name: '技术',
                max: max,
                min: min
            }
        ],
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    polar: {},
    angleAxis: {
        min: 0,
        max: 360,
        interval: 5,
        clockwise: false,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    radiusAxis: {
        min: min,
        max: max,
        interval: 2,
        splitArea: {
            show: true
        }
    },
    series: [{
        ...
        data: [{
            value: [4, -4, 1]
        }]
    }]
};
坚持技术创作分享,您的支持将鼓励我继续创作!