ECharts 数据可视化 --多雷达图

wqqstudy

于 2024-05-13 11:11:31 发布

阅读量488

点赞数 21

文章标签：信息可视化 echarts 数据分析

本文链接：https://blog.csdn.net/wqqstudy/article/details/138793935

版权

前面介绍过的基本雷达图，只能表示一类事物的维度变量。当想要同时表现几类不同事物的维度变量时，就需要使用多雷达图进行展示。利用某软件的性能、小米与苹果手机的功能、降水量与蒸发量的数据展示出3类数据中的不同维度变量

代码

<!DOCTYPE html>

<head>

</head>

<body>

//基于准备好的DOM，初始化ECharts图表

var myChart = echarts.init(document.getElementById('main'));

//指定图表的配置项和数据

var option = { //指定图表的配置项和数据

color: ["red", 'green', 'blue', '#660099', '#FA8072', 'grey'], //使用自己预定义的颜色

backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1

title: { //配置标题组件

text: '多雷达图',

top: 15,

left: 240,

textStyle: {

color: 'green'

}

tooltip: {

trigger: 'axis'

//配置图例组件

legend: {

top: 560,

left: 140,

data: ['某软件', '小米', '苹果', '降水量', '蒸发量']

radar: [ //设置雷达图坐标系组件，只适用于雷达图

{

nameGap: 3,

shape: 'polygon', //'polygon'|'circle'

textStyle: {

fontSize: 12,

color: '#fff',

backgroundColor: 'green',

borderRadius: 3,

padding: [2, 2]

}

indicator: [ //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应

{ text: '品牌', max: 100 },

{ text: '内容', max: 100 },

{ text: '可用性', max: 100 },

{ text: '功能', max: 100 }

center: ['25%', '30%'],

radius: 80 //指定第1个雷达图的位置

{

nameGap: 3,

shape: 'polygon', //'polygon'|'circle'

textStyle: {

fontSize: 12,

color: '#fff',

backgroundColor: 'blue',

borderRadius: 3,

padding: [2, 2]

}

//设置雷达图指示器，指定雷达图中的多个变量

indicator: [

{ text: '外观', max: 100 },

{ text: '拍照', max: 100 },

{ text: '系统', max: 100 },

{ text: '性能', max: 100 },

{ text: '屏幕', max: 100 }],

center: ['60%', '30%'],

radius: 80 //指定第2个雷达图的位置

{

nameGap: 3,

shape: 'polygon', //'polygon'和'circle'

textStyle: {

fontSize: 12,

color: 'red',

backgroundColor: 'lightblue',

borderRadius: 3,

padding: [2, 2]

}

//设置雷达图指示器，指定雷达图中的多个变量

indicator: (function () {

let res = [];

for (let i = 1; i <= 12; i++) {

res.push({ text: i + '月', max: 100 });

}

return res;

})(),

center: ['41%', '67%'], //指定第3个雷达图的位置

radius: 80,

}

series: [ //配置数据系列

{ //设置第1个数据项：某软件

type: 'radar',

tooltip: {

trigger: 'item'

itemStyle: {

normal: {

areaStyle: {

type: 'default'

}

//设置第1个数据项的具体数据

data: [{

value: [65, 72, 88, 80],

}]

{ //设置第2个数据项：小米与苹果

type: 'radar',

radarIndex: 1,

tooltip: {

trigger: 'item'

data: [ //设置第2个数据项的具体数据

{

value: [85, 90, 90, 95, 95],

{

value: [95, 80, 95, 90, 93],

}]

{ //设置第3个数据项：降水量与蒸发量

type: 'radar',

radarIndex: 2,

tooltip: {

trigger: 'item'

itemStyle: {

normal: {

areaStyle: {

type: 'default'

}

data: [ //设置第3个数据项的具体数据

{

value: [5, 6, 9, 56, 69, 73, 77, 88, 50, 22, 7, 5]

{

value: [3, 5, 8, 34, 45, 77, 68, 65, 36, 23, 7, 4]

}

]

}]

};

//使用刚指定的配置项和数据显示图表

myChart.setOption(option);

</script>

</body>

</html>

结果

注意一下: 后缀名 .html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-13 多雷达图</title>
    <script src="echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 700px; height: 600px"></div>

    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById('main'));

        //指定图表的配置项和数据
        var option = {  //指定图表的配置项和数据
            color: ["red", 'green', 'blue', '#660099', '#FA8072', 'grey'],  //使用自己预定义的颜色
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            title: {  //配置标题组件
                text: '多雷达图',
                top: 15,
                left: 240,
                textStyle: {
                    color: 'green'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            //配置图例组件
            legend: {
                top: 560,
                left: 140,
                data: ['某软件', '小米', '苹果', '降水量', '蒸发量']
            },
            radar: [  //设置雷达图坐标系组件，只适用于雷达图
                {
                    nameGap: 3,
                    shape: 'polygon',  //'polygon'|'circle'
                    name: {
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: 'green',
                            borderRadius: 3,
                            padding: [2, 2]
                        }
                    },
                    indicator: [  //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
                        { text: '品牌', max: 100 },
                        { text: '内容', max: 100 },
                        { text: '可用性', max: 100 },
                        { text: '功能', max: 100 }
                    ],
                    center: ['25%', '30%'],
                    radius: 80  //指定第1个雷达图的位置
                },
                {
                    nameGap: 3,
                    shape: 'polygon',  //'polygon'|'circle'
                    name: {
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: 'blue',
                            borderRadius: 3,
                            padding: [2, 2]
                        }
                    },
                    //设置雷达图指示器，指定雷达图中的多个变量
                    indicator: [
                        { text: '外观', max: 100 },
                        { text: '拍照', max: 100 },
                        { text: '系统', max: 100 },
                        { text: '性能', max: 100 },
                        { text: '屏幕', max: 100 }],
                    center: ['60%', '30%'],
                    radius: 80  //指定第2个雷达图的位置
                },
                {
                    nameGap: 3,
                    shape: 'polygon',  //'polygon'和'circle'
                    name: {
                        textStyle: {
                            fontSize: 12,
                            color: 'red',
                            backgroundColor: 'lightblue',
                            borderRadius: 3,
                            padding: [2, 2]
                        }
                    },
                    //设置雷达图指示器，指定雷达图中的多个变量
                    indicator: (function () {
                        let res = [];
                        for (let i = 1; i <= 12; i++) {
                            res.push({ text: i + '月', max: 100 });
                        }
                        return res;
                    })(),
                    center: ['41%', '67%'], //指定第3个雷达图的位置
                    radius: 80,
                }
            ],
            series: [  //配置数据系列
                {   //设置第1个数据项：某软件
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    //设置第1个数据项的具体数据
                    data: [{
                        value: [65, 72, 88, 80],
                        name: '某软件'
                    }]
                },
                {   //设置第2个数据项：小米与苹果
                    type: 'radar',
                    radarIndex: 1,
                    tooltip: {
                        trigger: 'item'
                    },
                    data: [  //设置第2个数据项的具体数据
                        {
                            value: [85, 90, 90, 95, 95],
                            name: '小米'
                        },
                        {
                            value: [95, 80, 95, 90, 93],
                            name: '苹果'
                        }]
                },
                {   //设置第3个数据项：降水量与蒸发量
                    type: 'radar',
                    radarIndex: 2,
                    tooltip: {
                        trigger: 'item'
                    },
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default'
                            }
                        }
                    },
                    data: [  //设置第3个数据项的具体数据
                        {
                            name: '降水量',
                            value: [5, 6, 9, 56, 69, 73, 77, 88, 50, 22, 7, 5]
                        },
                        {
                            name: '蒸发量',
                            value: [3, 5, 8, 34, 45, 77, 68, 65, 36, 23, 7, 4]
                        }
                    ]
                }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>