06-Echarts雷达图、仪表盘的基本实现

最新推荐文章于 2024-04-01 15:09:16 发布

请问大家代码怎么敲

最新推荐文章于 2024-04-01 15:09:16 发布

阅读量226

点赞数

分类专栏： js Echarts 数据可视化

本文链接：https://blog.csdn.net/liumuye88888/article/details/116840938

版权

js 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

数据可视化

7 篇文章 0 订阅

订阅专栏

雷达图特点

雷达图可以用来分析多个维度的数据与标准数据的对比情况

雷达图基本实现

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. 定义各个维度的最大值, 通过radar属性配置
    //   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
    //3. 准备产品数据, 设置给series下的data
    //4. 将type的值设置为radar
    var mCharts = echarts.init(document.querySelector("div"))
    // 各个维度的最大值
    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]
    var option = {
        radar:{
            indicator:dataMax,
            shape:'circle'  //配置雷达图最外层的图形 circle
        },
        series:[
            {   
                type:'radar',
                data:[
                    {name:'华为手机',value:[80,90,82,90,80]},
                    {name:'中兴手机',value:[70,80,60,50,60]}
                ],
                label:{
                    show:true,   // 显示数值
                },
                areaStyle:{}//将每一个产品的雷达图形成阴影的面积
            }
        ]
     
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述

仪表盘的特点

仪表盘可以更直观的表现出某个指标的进度或实际情况

仪表盘的基本实现

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
<!-- 仪表盘主要用在进度把控以及数据范围的检测 -->
  <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据, 设置给series下的data
    //3. 将type的值设置为gauge
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      series: [
          {
              type:'gauge',
              data:[
                  {
                      value:97,
                      itemStyle:{ //控制指针的样式
                          color:'red'
                      }
                  },  //每一个对象就代表一个指针
                  {
                      value:300,
                      itemStyle:{
                          color:'pink'
                      }
                  } 
              ],
              min:50,
              max:500  // 控制仪表盘的数值范围
          }
   
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述
更多配置请到Echarts官网学习
点击进入Echarts官网

请问大家代码怎么敲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-Echarts雷达图、仪表盘的基本实现

目录雷达图特点雷达图基本实现仪表盘的特点仪表盘的基本实现雷达图特点雷达图可以用来分析多个维度的数据与标准数据的对比情况雷达图基本实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e
复制链接

扫一扫