Echarts绘制雷达，浏览，多雷达图形

最新推荐文章于 2024-05-13 11:11:31 发布

果子李.

最新推荐文章于 2024-05-13 11:11:31 发布

阅读量416

点赞数 7

文章标签：开发语言 echarts

本文链接：https://blog.csdn.net/2401_83177534/article/details/137223253

版权

一.雷达图绘制

Echarts雷达图的特点如下：

多维数据展示：雷达图通常用于展示多个维度的数据，每个维度在坐标系中对应一个坐标轴，数据点的位置表示了各个维度的数值大小。例如，可以用雷达图展示一个人在不同技能维度上的得分情况，或者展示不同城市在多个指标上的表现。

明确的数据对比：雷达图通过多个维度的数据在同一坐标系下的展示，可以直观地比较不同数据点之间的差异。通过观察雷达图，可以清楚地看到各个维度的得分高低，从而进行数据的对比和分析。

支持多种数据显示：Echarts雷达图支持在一个图表中同时显示多组数据，每组数据可以用不同的颜色、形状或连接线来区分。这样可以方便地比较不同维度之间的差异或者比较不同组之间的差异。

交互操作丰富：Echarts雷达图支持选中、高亮、点击事件等交互操作，用户可以与雷达图进行交互，进行数据的筛选和查看。

兼容性强：Echarts雷达图能够兼容主流的浏览器，并且提供了响应式布局的功能，可以自适应不同的屏幕尺寸。

可扩展性好：Echarts提供了丰富的扩展插件和主题，用户可以根据需求自定义图表的功能和外观。同时，Echarts还支持与其他前端框架（如Vue、React）的集成，方便开发者更好地使用和扩展。

代码展示

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
  title: {
    text: '销售经理能力考核表'
  },
  legend: {
    data: ['王斌', '刘倩','袁波'],
    type:'scroll',//图例滚动
    width:'20%',
    pageButtonItemGap:4,
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '销售', max: 150 },
      { name: '沟通', max: 150 },
      { name: '服务', max: 150 },
      { name: '协作', max: 150 },
      { name: '培训', max: 150 },
    ]
  },
  tooltip:{
  },
  series: [
    {
      itemStyle:{
        emphasis:{lineStyle:{width:5},opacity:1}
      },
      name: '能力',
      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: '袁波'
        },
      ]
    }
  ]
};
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </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: 800px; height: 600px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
  title: {
    text: '销售经理能力考核表',
    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: '销售', max: 400 },
      { text: '沟通', max: 400 },
      { text: '服务', max: 400 },
      { text: '协作', max: 400 },
      { text: '培训', 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"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
  title: {
    text: '销售经理能力考核'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    type:'scroll',
    width:'20%',
    pageButtonItemGap:4,
    left: 'center',
    data: [
    '王斌',
    '刘倩',
    '袁波',
    '张三',
    '李四',
    ]
  },
  radar: [
    {
      indicator: [
      { text: '销售', max: 100 },
        { text: '沟通', max: 100 },
        { text: '服务', max: 100 },
        { text: '协作', max: 100 },
        { text: '培训', max: 100 }
      ],
      center: ['25%', '40%'],
      radius: 80
    },
    {
      indicator: (function () {
        var res = [];
        for (var i = 1; i <= 12; i++) {
          res.push({ text: i + '月', max: 100 });
        }
        return res;
      })(),
      center: ['75%', '40%'],
      radius: 80
    }
  ],
  series: [
    {
        radarIndex: 0,
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      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: '袁波'
        },
      ]
     
    },
   
    {
    radarIndex: 1,
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      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>

图形展示

果子李.

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts绘制雷达，浏览，多雷达图形

多维数据展示：雷达图通常用于展示多个维度的数据，每个维度在坐标系中对应一个坐标轴，数据点的位置表示了各个维度的数值大小。例如，可以用雷达图展示一个人在不同技能维度上的得分情况，或者展示不同城市在多个指标上的表现。明确的数据对比：雷达图通过多个维度的数据在同一坐标系下的展示，可以直观地比较不同数据点之间的差异。通过观察雷达图，可以清楚地看到各个维度的得分高低，从而进行数据的对比和分析。兼容性强：Echarts雷达图能够兼容主流的浏览器，并且提供了响应式布局的功能，可以自适应不同的屏幕尺寸。
复制链接

扫一扫