Echart(多雷达图展示)

发财糕

已于 2024-04-01 12:41:44 修改

阅读量955

点赞数 8

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

于 2024-04-01 12:40:56 首次发布

发财糕

本文链接：https://blog.csdn.net/zhangfafa_c/article/details/137228110

版权

前言

在数据可视化领域，雷达图（Radar Chart）是一种常用的图表类型，它能够直观地展示多个变量之间的关系。当我们需要比较多个数据集在多个维度上的表现时，雷达图就能发挥巨大的作用。在本文中，我们将基于ECharts这个强大的数据可视化库，来探讨如何实现多雷达图的展示。

步骤一：引入 ECharts 库

首先，你需要在你的项目中引入 ECharts 库。你可以通过下载 ECharts 的库文件，然后在 HTML 文件中使用 <script> 标签引入它。也可以通过 CDN 直接引入。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>ECharts 多雷达图示例</title>  
    <!-- 引入 ECharts 文件 -->  
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>  
</head>  
<body>

步骤二：创建图表容器

在 HTML 文件的 <body> 标签中，创建一个 <div> 元素作为图表的容器，并设置其宽度和高度。

<div id="main" style="width: 1000px;height:600px;"></div>

步骤三：配置和初始化图表

使用 JavaScript 来配置和初始化图表。我们将为每个雷达图设置不同的指标和中心点位置，并填充相应的数据。

<script type="text/javascript">  
    // 基于准备好的dom，初始化echarts实例  
    var myChart = echarts.init(document.getElementById('main'));  
  
    // 指定图表的配置项和数据  
    var option = {  
        title: {  
            text: '多雷达图示例'  
        },  
        tooltip: {  
            trigger: 'axis'  
        },  
        legend: {  
            data: ['品牌A', '品牌B', '品牌C'] // 图例数据  
        },  
        radar: [  
            // 第一个雷达图配置  
            {  
                // 雷达图的指标  
                indicator: [  
                    { name: '指标1', max: 100 },  
                    { name: '指标2', max: 100 },  
                    { name: '指标3', max: 100 },  
                    // ...更多指标  
                ],  
                // 雷达图中心点位置  
                center: ['25%', '50%'],  
                // 雷达图半径  
                radius: '55%'  
            },  
            // 第二个雷达图配置  
            {  
                indicator: [  
                    // ...不同指标  
                ],  
                center: ['50%', '50%'],  
                radius: '55%'  
            },  
            // 第三个雷达图配置（如果有的话）  
            // ...  
        ],  
        series: [  
            // 第一个雷达图的数据系列  
            {  
                type: 'radar',  
                // 指定当前系列数据对应的雷达图下标  
                radarIndex: 0,  
                // 数据内容  
                data: [  
                    {  
                        value: [/* 对应指标的值 */],  
                        name: '品牌A'  
                    }  
                ],  
                // 其他配置...  
            },  
            // 第二个雷达图的数据系列  
            {  
                type: 'radar',  
                radarIndex: 1,  
                data: [  
                    {  
                        value: [/* 对应指标的值 */],  
                        name: '品牌B'  
                    }  
                ],  
                // 其他配置...  
            },  
            // ...更多雷达图的数据系列  
        ]  
    };  
  
    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);  
</script>

在上面的代码中，我们定义了一个 option 对象，它包含了雷达图的标题、提示框、图例、雷达图指标配置和数据系列。每个雷达图通过 radar 数组中的对象来定义，数据系列通过 series 数组中的对象来定义。每个数据系列都通过 radarIndex 属性来指定它对应哪个雷达图。

步骤四：完善样式和交互

你还可以根据需要进一步完善图表的样式，比如调整颜色，雷达图位置、图例位置等。。。。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/echarts.js"></script>
    <script src="js/chalk.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 700px;height:600px;"></div>
    <script type="text/javascript">
        
        var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  backgroundColor:'rgba(225,240,204,0.7)',
  title: {
    text: '销售能力综合能力'
  },
  legend: {
    type: 'scroll',
    bottom: 0,
    color:'black',
    data: ['王斌', '刘倩','袁波']
  },
  tooltip:{
      confine:true,
      enterable:true,
    },
    //数据条
    visualMap: {
    top: 'middle',
    right: 50,
    color:['pink','black'],
    calculable: true
  },
  radar: [
    // nameGap:3,
    // name:{
    //   textStyle:{fontSicz:20,color:'#fff',backgroundColor:'pink'},
    //   borderRadius:5,
      
    // },
    // shape: 'circle',
    
    {
      indicator: [
      { name: '销售', max: 100 },
      { name: '沟通', max: 100 },
      { name: '服务', max: 100 },
      { name: '协作', max: 100 },
      { name: '培训', max: 100 },
      { name: '天赋', max: 100 }
    ],
    center: ['25%', '40%'],
      radius: 125
    },
    {
      indicator: (function () {
        var res = [];
        for (var i = 1; i <= 12; i++) {
          res.push({ text: i + '月', max: 100 });
        }
        return res;
      })(),
      center: ['70%', '20%'],
      radius: 80
    },
    {
      indicator: [
      { name: '销售', max: 100 },
      { name: '沟通', max: 100 },
      { name: '服务', max: 100 },
      { name: '协作', max: 100 },
      { name: '培训', max: 100 },
      { name: '天赋', max: 100 }
    ],
    center: ['65%', '75%'],
      radius: 80
    },
  ],
  
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      symbol: 'triangle',

				itemStyle: { // 设置折线拐点标志的样式
					normal: {
						lineStyle: {
							width: 1
						},
						opacity: 0.2
					}, // 设置普通状态时的样式
					emphasis: {
						lineStyle: {
							width: 5
						},
						opacity: 1
					} // 设置高亮时的样式
				},
      data: [ 
          {
          value: [87.5,87.5,90,91.25,85,88],
          name: '王斌',
          symbol: 'triangle',
						symbolSize: 5, // 设置单个数据标记的大小
						// 设置拐点标志样式
						itemStyle: {
							normal: {
								borderColor: 'blue',
								borderWidth: 3
							}
						},
						// 设置单项线条样式
						lineStyle: {
							normal: {
								color: 'red',
								width: 1,
								opacity: 0.9
							}
						},
        },
        {
          value: [90,88.75,85,87.5,88.75,75],
          name: '刘倩',
          symbol: 'triangle',
						symbolSize: 5, // 设置单个数据标记的大小
						// 设置拐点标志样式
						itemStyle: {
							normal: {
								borderColor: 'blue',
								borderWidth: 3
							}
						},
						// 设置单项线条样式
						lineStyle: {
							normal: {
								color: 'red',
								width: 1,
								opacity: 0.9
							}
						},
        },
        {
          value: [92.5,91.25,88.75,90.5,91.25,95],
          name: '袁波',
          symbol: 'triangle',
						symbolSize: 5, // 设置单个数据标记的大小
						// 设置拐点标志样式
						itemStyle: {
							normal: {
								borderColor: 'blue',
								borderWidth: 3
							}
						},
						// 设置单项线条样式
						lineStyle: {
							normal: {
								color: 'black',
								width: 1,
								opacity: 0.9
							}
						},
        }
        
      ]
    },
  ]
};
         myChart.setOption(option);
    </script>
</body>
</html>