Echarts笔记——雷达图（1）radar雷达图坐标系

最新推荐文章于 2024-04-11 18:15:27 发布

寧三一

最新推荐文章于 2024-04-11 18:15:27 发布

阅读量6k

点赞数 3

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115349489

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——雷达图（1）radar雷达图坐标系

1.雷达图类型（ radar ）。

2. 区别以往的直角坐标系，雷达图没有x轴和y轴，使用只适用雷达图的雷达图坐标系组件：radar 。

3. 需要先配置 radar 雷达坐标系，关键参数 indicator 雷达指示器（用于定义多个维度的最大值）。

radar: {             //  雷达图坐标系组件，只适用于雷达图。
                name: {
                    textStyle: {
                        padding: [3, 5],
                        fontSize: 15
                    }
                },
                // 定义多个维度的最大值
                indicator: rader_indicator,     //雷达图的指示器，用来指定雷达图中的多个变量（维度）
                nameGap: 25,       //指示器名称和指示器轴的距离。
                splitNumber: 5,      //指示器轴的分割段数。
                axisLine: {             // 网格线
                    show: true,
                    symbol: "circle",        //轴线两边的箭头。
                    symbolSize: [12, 12],   //轴线两边的箭头的大小，宽高
                },
            },

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <title>雷达图</title>
</head>
<body>
<div id="main" style="height: 800px;width:1800px"></div>
<script type="text/javascript">
    var rader_indicator = [
        {name: '销售', max: 6500},
        {name: '管理', max: 16000},
        {name: '信息技术', max: 30000},
        {name: '客服', max: 38000},
        {name: '研发', max: 52000},
        {name: '市场', max: 25000}
    ]
    var rader_Data = [[4300, 10000, 28000, 35000, 50000, 19000], [5000, 14000, 28000, 31000, 42000, 21000]]
    var myChart = echarts.init(document.getElementById('main'))
    $(function (ec) {
        var option = {
            title: {
                text: '雷达图',
                left: '25%',
                textStyle: {
                    fontSize: 30
                }
            },
            tooltip: {},
            legend: {
                data: ['预算分配', '实际开销'],
                bottom: '5%',
                right: '15%',
            },
            radar: {             //  雷达图坐标系组件，只适用于雷达图。
                name: {
                    textStyle: {
                        padding: [3, 5],
                        fontSize: 15
                    }
                },
                // 定义多个维度的最大值
                indicator: rader_indicator,     //雷达图的指示器，用来指定雷达图中的多个变量（维度）
                nameGap: 25,       //指示器名称和指示器轴的距离。
                splitNumber: 5,      //指示器轴的分割段数。
                axisLine: {             // 网格线
                    show: true,
                    symbol: "circle",        //轴线两边的箭头。
                    symbolSize: [12, 12],   //轴线两边的箭头的大小，宽高
                },
            },

            series: [{
                name: '预算 vs 开销',
                type: 'radar',
                symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                symbolSize: 12, // 拐点的大小
                data: [
                    {
                        value: rader_Data[0],
                        name: '预算分配',
                        itemStyle: {     // 项目样式
                            color: "yellow",     // 线条颜色
                        }

                    },
                    {
                        value: rader_Data[1],
                        name: '实际开销',
                        itemStyle: {
                            color: 'red'
                        }
                    }
                ]
            }]
        };
        myChart.setOption(option)
    })

</script>
</body>
</html>

寧三一

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——雷达图（1）radar雷达图坐标系

Echarts笔记——雷达图（1）radar雷达图坐标系1.雷达图类型（ radar ）。2. 区别以往的直角坐标系，雷达图没有x轴和y轴，使用只适用雷达图的雷达图坐标系组件：radar 。3. 需要先配置 radar 雷达坐标系，关键参数 indicator 雷达指示器（用于定义多个维度的最大值）。radar: { // 雷达图坐标系组件，只适用于雷达图。 name: { textSt.
复制链接

扫一扫