实训四以及课堂作业_echarts数据可视化实战第四章实训4-CSDN博客

本文链接：https://blog.csdn.net/xidiexi/article/details/137293695

本文介绍了如何在VSCode中使用ECharts库，通过示例展示了如何基于销售经理能力考核表的数据，绘制出3个销售代表在销售、沟通、服务、协作和培训五个方面的雷达图，以直观对比他们的能力水平。

摘要由CSDN通过智能技术生成

销售能力对比分析

1.训练要点
掌握雷达图的绘制。

2.需求说明
“销售经理能力考核表。xlsx” 文件中记录某公司销售能力的考核信息，包含3个销售代表的销售、沟通、服务、协作和培训这5个方面的考核评分，通过绘制雷达图综合展现3个销售代表各方面能力对比。

3.实现思路及步骤

(1)在VSCode中创建radar.html文件。

(2)绘制雷达图。首先radar.html文件中引入echarts.js库文件。其次，准备一个具备大小(weight与height)的div容器，并使用init)方法初始化容器。最后设置雷达图的配置项、3个销售代表5 个方面的考核评分数据完成雷达图绘制。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>销售能力对比分析</title>
    <!-- 引入echarts.min.js库文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        /* 设置雷达图的容器大小为500x500像素 */
        #radarChart {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="radarChart"></div>
    <script>
        // 初始化echarts实例
        var radarChart = echarts.init(document.getElementById('radarChart'));

        // 设置雷达图的配置项
        var radarOption = {
            title: {
                text: '销售能力对比分析'
            },
            tooltip: {},
            legend: {
                data: ['王斌', '刘倩', '袁波'],
                type: 'scroll', // 开启图例滚动
                bottom: 10 // 位置调整至底部
            },
            radar: {
                indicator: [
                    { name: '销售', max: 100 },
                    { name: '沟通', max: 100 },
                    { name: '服务', max: 100 },
                    { name: '协作', max: 100 },
                    { name: '培训', max: 100 }
                ]
            },
            series: [{
                type: 'radar',
                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: '袁波'
                    }
                ],
                label: {
                    show: true,
                    position: 'top' // 设置标签位置为顶部
                }
            },
            ]
        };

        // 使用指定的配置项和数据显示雷达图
        radarChart.setOption(radarOption);
    </script>
</body>
</html>

准备一个浏览器占比图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        var option;

option = {
  title: {
    text: 'Proportion of Browsers',
    subtext: 'Fake Data',
    top: 10,
    left: 10
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    bottom: 10,
    data: (function () {
      var list = [];
      for (var i = 1; i <= 28; i++) {
        list.push(i + 2000 + '');
      }
      return list;
    })()
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
  },
  radar: {
    indicator: [
      { text: 'IE8-', max: 400 },
      { text: 'IE9+', max: 400 },
      { text: 'Safari', max: 400 },
      { text: 'Firefox', max: 400 },
      { text: 'Chrome', max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 2000 + ''
          }
        ]
      });
    }
    return series;
  })()
};
myChart.setOption(option); 
    </script>
</body>
 
</html>

作业：多雷达图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        backgroundColor:'rgba(204,204,204,0.7)',//背景色
        title:{//标题
            text:'特殊的雷达图',//主标题
            top:'10',//与上边的距离
            left:'10',  //与左边的距离
            textStyle:{   //字体样式
                color:'blue', //颜色
                fontSize:18, //大小
            },
        },
        legend:{//图列组件
            show:true,//是否显示
            icon:'pin',//图像设置为气球
            top:"50",//与上边的距离
            left:"20",//与左边的距离
            itemWidth:10,//图列宽度
            itemHeight:10,//图列高度
            itemGap:30,//图列间隔
            orient:"horizontal",//图例列表的布局朝向
            textStyle:{//字体样式
                fontSize:15, //大小
                // color:"#fff",//颜色
            },
            data:['小米','苹果','蒸发量','降水量'],//图列显示数据
        }, 
        tooltip:{//提示框
            confine:true,//是否将 tooltip 框限制在图表的区域内
            enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
        },
        radar:[//雷达图坐标系组件，只适用于雷达图
            {
                nameGap:3,//指示器名称和指示坐标的距离
                shape:'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:['30%','60%'],//圆中心坐标，ｘy
                radius:80//半径
            },{
                nameGap:3,//指示器名称和指示坐标的距离
                shape:'polygon',//雷达图绘制类型
                name:{
                    textStyle:{
                        fontSize:12,
                        color:"red",
                        backgroundColor:'lightblue',
                        borderRadius:3,
                        padding:[2,2]    
                    }
                },
                indicator:(function(){//函数
                    var res=[];
                    for(var i=1;i<=12;i++){
                        res.push({text:i+'月',max:100});
                    }
                    return res
                })(),
                center:['70%','60%'],
                radius:80,
            }
        ],
        series:[//
            {
                type:'radar',//数据类型
                radarIndex:0,//雷达图所使用的 radar 组件的 index
                tooltip:{trigger:'item'},//提示框
                data:[
                    {value:[85,90,90,95,95],name:'小米'},
                    {value:[95,80,95,90,93],name:'苹果'},
                ]
            },
            {
                type:'radar',
                radarIndex:1,
                tooltip:{trigger:'item'},
                itemStyle:{
                    normal:{areaStyle:{type:'default'}}
                },
                data:[{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]}]
            }
 
        ]
            
        };
 myChar.setOption(option)
 </script>
 </body>
 </html>