您的位置:

详解echarts雷达图

一、echarts雷达图使用

echarts雷达图可以展示多维度数据之间的关系,可以使用在各种领域的数据展示,例如业绩展示、投资分析等。首先,需要引入echarts的js库文件和所需的主题文件,以及一个DOM容器

    
        
        <script src="./echarts.min.js"></script>

        
        <div id="chart"></div>
        <script>
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));
        </script>
    

接下来,需要配置雷达图的数据信息

    
        // 配置雷达图的数据
        var option = {
            title: {
                text: 'echarts雷达图示例'
            },
            tooltip: {},
            legend: {
                data:['预算分配','实际开销']
            },
            radar: {
                // 雷达图坐标系组件
                indicator: [
                    { name: '销售', max: 6500},
                    { name: '管理', max: 16000},
                    { name: '信息技术', max: 30000},
                    { name: '客服', max: 38000},
                    { name: '研发', max: 52000},
                    { name: '市场', max: 25000}
                ]
            },
            series: [{
                name: '预算 vs 开销(Allocated Budget vs Actual Spending)',
                type: 'radar',
                // 数据
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000, 19000],
                        name: '预算分配',
                        // 单个数据项的样式配置
                        itemStyle: {color: '#104E8B'}
                    },
                    {
                        value: [5000, 14000, 28000, 31000, 42000, 21000],
                        name: '实际开销',
                        // 单个数据项的样式配置
                        itemStyle: {color: '#00FF00'}
                    }
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    

这样我们就成功创建了一个雷达图,可以根据所需的数据进行修改配置,以展现不同效果。

二、echarts雷达图怎么放大缩小

echarts提供了一个组件dataZoom,可以进行放大缩小。dataZoom会默认出现在图表的底部,可以通过修改show属性控制其关闭或开启。除此之外,也可以设置其具体的位置、样式等属性。

    
        var option = {
            ...
            dataZoom: {
                // 控制缩放的范围
                rangeMode: ['percent', 'percent'],
                // 默认的起始范围是50%到100%
                start: 50,
                end: 100
            },
            ...
        };
    

三、echarts雷达图样式修改

echarts雷达图可以通过在样式中配置series进行样式修改

    
        var option = {
            ...
            series: [{
                // 填充样式
                areaStyle: {color: '#FFFFFF'},
                // 样式深度
                emphasis: {
                    focus: 'self',  // 当前的系列和数据项本身都会被强调
                    itemStyle: {color: '#FFFFFF'},
                    lineStyle: {color: '#FFFFFF'}
                },
                // 文本样式
                label: {
                    fontSize: 14
                },
                // 折线图的样式设置
                lineStyle: {
                    width: 1,
                    type: 'dotted'
                }
            }]
            ...
        };
    

四、echarts雷达图超出圆盘

当数据项过多,超出了雷达图的圆盘范围,可以通过修改grid下的left、right、top、bottom实现圆盘范围的扩大。或者可以通过调整雷达图坐标系组件radar项中的center值,控制图表的半径,使得图表格局更为紧凑。

    
        var option = {
            ...
            grid: {
                // 控制整个图表所占的位置
                left: '10%',
                right: '20%',
                top: '10%',
                bottom: '10%'
            },
            radar: {
                center: ['50%', '50%'],  // 修改center进行半径控制
                ...
            },
            ...
        };
    

五、echarts雷达图上下限设置

可以设置雷达图的最大和最小刻度,使得数据不会超过设定范围,可以通过修改radar中indicator中的max、min控制。

    
        var option = {
            ...
            radar: {
                indicator: [
                    { name: '销售', max: 6500, min: 0},
                    ...
                ]
                ...
            },
            ...
        };
    

六、echarts雷达图好看的配置

可以通过样式配置和图表元素的显示和隐藏控制实现一些炫酷的展现效果,以下为理想的echarts雷达图的配置

    
        var option = {
            title: {
                text: 'ecs展示'
            },
            tooltip: {},
            legend: {
                data: ['预算分配', '实际开销']
            },
            radar: {
                center: ['50%', '50%'],
                indicator: [
                    { name: '综合评价', max: 100},
                    { name: '成本控制', max: 100},
                    { name: '效率绩效', max: 100},
                    { name: '技术能力', max: 100},
                    { name: '品质服务', max: 100},
                    { name: '销售占比', max: 100}
                ],
                radius: '65%',
                splitNumber: 8,
                name: {
                    textStyle: {
                        color: '#999',
                        fontSize: 14
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#989898','#B4B4B4','#CDCDCD','#E1E1E1','#F5F5F5','#F7F7F7','#FFFFFF']
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: [70, 80, 85, 90, 85, 80],
                        name: '预算分配',
                        itemStyle: {color: '#f28c00'},
                        lineStyle: {color: '#f28c00'}
                    },
                    {
                        value: [60, 70, 80, 90, 75, 95],
                        name: '实际开销',
                        itemStyle: {color: '#0070c0'},
                        lineStyle: {color: '#0070c0'},
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value;
                            }
                        }
                    }
                ]
            }]
        };

        myChart.setOption(option);
    

七、echarts雷达图取消默认线条

echarts雷达图的默认显示了样式较为复杂的线条,可以通过设置lineStyle项为null取消其默认显示的线条。样式可以通过itemStyle项进行控制,或者通过修改起始和结束颜色实现样式颜色渐变。

    
        var option = {
            ...
            series: [{
                // 取消默认线条
                lineStyle: null,
                data: [
                    ...
                ]
            }]
            ...
        };
    

八、echarts雷达图设置大小

echarts雷达图的大小可以通过设置容器div的width和height属性实现。如果需要动态改变雷达图的大小,可以通过调用echart的resize()方法实现。可以通过修改radar中center和radius等属性控制图表所占的位置和大小。

    
        // 将容器的高设置为500px,宽设置为1000px
        
   
// 调用resize()方法动态改变图表大小 myChart.resize(); var option = { ... radar: { center: ['50%', '50%'], radius: '65%', ... }, ... };

九、echarts雷达图显示数值

可以在雷达图上显示数值,可以通过在series下设置label.show为true,以及label.formatter中设置对应数据的格式,控制是否显示以及显示内容。

    
        var option = {
            ...
            series: {
                ...
                label:{
                    show: true,
                    // 显示数据项的数值
                    formatter:function(params) {
                        return params.value;
                    },
                    // 样式设置
                    textStyle: {
                        color:'#000',
                        fontSize:12
                    }
                },
            },
            ...
        };
    
Echarts雷达图详解

2023-05-23
详解echarts雷达图

2023-05-18
python下载区域雷达拼图(python画雷达图)

2022-11-14
echarts立体柱状图详解

2023-05-20
cesiumjs详细教程(cesium开发教程)

本文目录一览: 1、Cesium在js中调用entity的infobox单机事件 2、Cesium初始化选项 3、Cesium随笔:视锥绘制(上) 4、cesium如何搭建dat.gui 5、Cesi

2023-12-08
Echarts4图表完全指南

2023-05-18
cesiumjs中文网地址,cesium中文文档

本文目录一览: 1、cesium 怎样设置web服务器 2、Cesium初始化选项 3、Cesium实战项目 4、Cesium的扩展工具包-EarthSDK使用指南1 5、Cesium(四)加载影像图

2023-12-08
Vue3引入Echarts

2023-05-20
用 Python 做雷达图

2023-05-10
R语言雷达图详解

2023-05-17
cesiumjs搭建,cesium geojson

本文目录一览: 1、Cesium的扩展工具包-EarthSDK使用指南1 2、构建一个 Vite + Vue3 项目 开发Cesium 3、Cesium实战项目 4、cesium如何搭建dat.gui

2023-12-08
详解echarts饼图位置调整

2023-05-20
关于chartjsk线图的信息

本文目录一览: 1、如何用highCharts绘制动态股票K线图 2、echarts 怎样用js自定义图表数据 3、如何看懂k线图?(最好有图解) 4、Open Flash Chart K线图求教 5

2023-12-08
echarts关系图详解

2023-05-20
java方法整理笔记(java总结)

2022-11-08
发篇java复习笔记(java课程笔记)

2022-11-09
cesium.js开发,Cesiumjs

本文目录一览: 1、Cesium实战项目 2、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 3、Cesium的扩展工具包-EarthSDK使用指南1 4、Cesium初始

2023-12-08
印象笔记记录java学习(Java成长笔记)

2022-11-12
ECharts拓扑图实现网络结构可视化

2023-05-16
详解Echarts中文

2023-05-18