销售能力之雷达图

最新推荐文章于 2025-03-15 10:57:28 发布

憨憨yang

最新推荐文章于 2025-03-15 10:57:28 发布

阅读量495

点赞数 2

文章标签：前端数据库 html

本文链接：https://blog.youkuaiyun.com/m0_74811962/article/details/137223226

版权

雷达图特点：

集中显示数据，围成的面积可以表示一些信息，需要把纵向和横向的数据，各个变量间的权重，主要展示性能数据。

知识回顾：

title：标题组件，用于图表的标题

tooltip:提示框组件，用于显示更详细的数据

legend：图例，表述数据和图形的关联

itemStyle：强调样式

简单雷达图：

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<title></title>
		
	</head>
	<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            backgroundColor:'rgba(200,200,200,0.3)',
  title: {
    text: '销售'
  },
  legend: {
    pageIconSize:10,
    data: ['王斌', '刘倩','袁波']
  },


  tooltip:{
    confine:true,
    enterable:true,
    trigger: 'axis'
  },
  radar:[
    {
    // shape: 'circle',
    indicator: [
      { name: '销售', max: 95 },
      { name: '沟通', max: 92 },
      { name: '服务', max: 95 },
      { name: '协作', max: 93},
      { name: '培训', max: 94},

    ],
    center: ['80%', '50%'],
    
  },

],

  series: [
    {
      name: '雷达图',
      type: 'radar',
    //   radarIndex: 1,
      tooltip: {
        trigger: 'item'
      },
    //   areaStyle: {},
      itemStyle:{ 
    normal:{lineStyle:{width:2},opacity:0.6},
    emphasis:{lineStyle:{width:8},opacity:1      
  },
 },
      data: [
        {
          value: [ 87.50 , 87.50, 90.00, 91.25 ,85.00],
          name: '王斌',              
        },
        {
          value: [90.00,88.75,85.00,87.50,88.75],
          name: '刘倩'
        },
        {
          value: [92.50,91.25,88.75,92.50,91.25],
          name: '袁波'

        }
      ]
    },
    

  ],
};
        myChart.setOption(option);
    </script>
</body>
</html>

设置一个高亮效果：

关键代码1（高亮）：

      itemStyle:{ 
    normal:{lineStyle:{width:2},opacity:0.6},
    emphasis:{lineStyle:{width:8},opacity:1      
  },
 },

关键代码2（触发）：

  tooltip:{
    confine:true,
    enterable:true,
    trigger: 'axis'
  },

设置一个蜘蛛图和雷达图组合：

关键代码1（高亮）：

      itemStyle:{ 
    normal:{lineStyle:{width:2},opacity:0.6},
    emphasis:{lineStyle:{width:8},opacity:1      
  },
 },

关键代码2：

      type: 'radar',
      radarIndex: 1,
      areaStyle: {},

全部代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<title></title>
		
	</head>
	<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
  title: {
    text: 'M'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'center',
    data: ['王斌', '刘倩','袁波','韵','笛']
  },
  radar: [

  {
    // shape: 'circle',
    indicator: [
      { name: '销售', max: 95 },
      { name: '沟通', max: 92 },
      { name: '服务', max: 95 },
      { name: '协作', max: 93},
      { name: '培训', max: 94},

    ],
    center: ['80%', '50%'],
    
  },
    { 
     indicator: [
      { name: '1月', max: 95 },
      { name: '2月', max: 92 },
      { name: '3月', max: 95 },
      { name: '4月', max: 93},
      { name: '5月', max: 94},
      { name: '5月', max: 95 },
      { name: '7月', max: 92 },
      { name: '8月', max: 95 },
      { name: '9月', max: 93},
      { name: '10月', max: 94},
      { name: '11月', max: 95 },
      { name: '12月', max: 92 },
    ],
    center: ['29%', '50%'],
    },
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      itemStyle:{ 
    normal:{lineStyle:{width:2},opacity:0.6},
    emphasis:{lineStyle:{width:8},opacity:1      
  },
 },
      data: [
        {
          value: [ 87.50 , 87.50, 90.00, 91.25 ,85.00],
          name: '王斌', 
        },
        { value: [90.00,88.75,85.00,87.50,88.75],
          name: '刘倩'},
        {          
          value: [92.50,91.25,88.75,92.50,91.25],
          name: '袁波'},
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      data: [
        {
          name: '笛',
          value: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '韵',
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
          ]
        }
      ]
      
    },
  ]
};
  myChart.setOption(option);
    </script>
</body>
</html>