正文

32-vue之echarts-雷达图(代码片段)

爱学习de测试小白  爱学习de测试小白  2023-03-27  400

关键词：

ECharts-雷达图

前言

本篇来学习写雷达图

雷达图特点

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

雷达图的基本实现

ECharts 最基本的代码结构
定义各个维度的最大值
准备具体产品的数据
在 series 下设置 type:radar

<!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>雷达图的实现</title>
  <!-- cdn方式 引入echarts.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
  <div id='app' style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.getElementById("app"))
    // 2. 各个维度的最大值
    var dataMax = [
      
        name: '易用性',
        max: 100
      ,
      
        name: '功能',
        max: 100
      ,
      
        name: '拍照',
        max: 100
      ,
      
        name: '跑分',
        max: 100
      ,
      
        name: '续航',
        max: 100
      
    ]
    // 3. 准备数据
    var phone1 = [80, 90, 80, 82, 90]
    var phone2 = [70, 82, 75, 70, 78]
    var option = 
      radar: 
        indicator: dataMax, // 配置各个维度的最大值     
      ,
      series: [
        
          type: 'radar', // 4. radar 此图表时一个雷达图
          data: [
            
              name: '手机1',
              value: phone1 
            ,
            
              name: '手机2',
              value: phone2
            
          ]
        
      ]
    
    mCharts.setOption(option)
  </script>
</body>

</html>

效果

雷达图的常见效果

显示数值

var option = 
  series: [
   
      type: 'radar',
      label: 
        show: true
   
 ]

效果

区域面积

areaStyle：

绘制类型

shape：支持 ‘polygon’ (多边行 )和’circle’ (圆形)

完整代码

<!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>雷达图的实现</title>
  <!-- cdn方式 引入echarts.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

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

</html>

雷达图（用echarts绘制）(代码片段)

...图可以从多个维度来对比不同数据之间的情况基本实现①ECharts最基本的代码结构：引入js文件、DOM容器、初始化对象、配置option②定义各个维度的最大值，并在option的radar选项中配置③在series中配置具体的数据④在series中... 查看详情

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行(代码片段)

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:后来查资料,发现这... 查看详情

matplotlib极坐标系应用之雷达图(代码片段)

1#!/usr/bin/envpython32#-*-coding:utf-8-*-3############################4#FileName:test.py5#Author:frank6#Mail:[email protected]7#CreatedTime:2018-05-2300:01:308############################910impo 查看详情

unity实战之一个脚本实现雷达图(代码片段)

前言最近又接触到一个新名词——“雷达图”。还是第一次接触这个名词。所谓雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。... 查看详情

26-vue之echarts-柱状图(代码片段)

ECharts-柱状图前言柱状图实现步骤柱状图常见效果标记显示前言本篇来学习下柱状图的实现柱状图实现步骤ECharts最基本的代码结构准备x轴的数据准备y轴的数据准备option,将series中的type的值设置为:bar<!DOCTYPEhtml><htmllang=... 查看详情

echarts常用图表雷达图仪表盘图

1.雷达图1.1.雷达图的实现步骤步骤1ECharts最基本的代码结构<!DOCTYPEhtml><htmllang="en"><head> <scriptsrc="js/echarts.min.js"></script></head><body> 查看详情

echarts雷达图点击事件

最近看见别人问的问题，点击雷达图的拐点，获取点击数据的问题，直接上代码。echarts配置问题：https://www.douban.com/note/509404582/<!doctypehtml><htmllang="us"><head> <metacharset="utf-8"> <title></title> < 查看详情

android使用kotlin来实现自定义view之雷达图(代码片段)

本篇文章讲的是Kotlin自定义view之实现雷达图。按照惯例，我们先来看看效果图一、先总结下自定义View的步骤：1、自定义View的属性2、在View的构造方法中获得我们自定义的属性3、重写onMesure4、重写onDraw其中onMesure方法不... 查看详情

29-vue之echarts-散点图(代码片段)

ECharts-散点图前言散点图特点散点图实现步骤散点图常见效果气泡效果涟漪动画效果完整代码前言本篇来学习散点图的实现散点图特点散点图可以帮助我们推断出不同维度数据之间的相关性,比如：看得出身高和体重是正相关,... 查看详情

echarts图表——雷达图

参考技术A雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极... 查看详情

echarts雷达图radar样式美化

参考技术A基于官网的基础，修改其配置，美化样式查看详情

如何修改echarts的雷达图背景

参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js；查看详情

33-vue之echarts-仪表盘图(代码片段)

ECharts-仪表盘图前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言本篇来学习写仪表盘图仪表盘的特点可以更直观的表现出某个指标的进度或实际情况仪表盘的基本实现ECharts最基本的代码结构准备数据,设置给series下的da... 查看详情

关于echarts生成雷达图的一些参数介绍

exportconstindustryFactorOption=title:text:‘雷达图‘,textStyle:color:‘rgba(221,221,221,1)‘,//标题颜色fontSize:14,lineHeight:20,,//标题的位置，此时放在图的底边left:‘center‘,top:‘bottom‘,,//图表的位置grid:position:‘center‘, 查看详情

echarts雷达图大小自适应

结合了媒体查询首先在css样式表中写出你希望雷达图在不同分辨率下的大小@mediascreenand(max-height:780px){.left-score-image{width:190px;height:135px;margin-left:36px;margin-top:10px;}}其次，在js文件中加入varscoreImage=document.getElementById(‘sco 查看详情

echarts雷达图怎么在类目值下面显示数值

参考技术A这样查看详情

vue项目之echarts的整理汇总（持续更新中）(代码片段)

vue项目之echarts的整理汇总（持续更新中）vue项目之echarts的整理汇总（持续更新中）echarts安装柱状图和折线图饼状图vue项目之echarts的整理汇总（持续更新中）echarts安装这里不多说，npm安装和按需加载... 查看详情