Vue 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>

到此这篇关于Vue ECharts简易实现雷达图的文章就介绍到这了,更多相关Vue ECharts雷达图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用Echarts实现大屏可视化布局示例详细讲解

    目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标

  • Vue ECharts设置主题实现方法介绍

    目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解

    目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,

  • Vue echarts封装实现流程

    将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l

  • Vue Echarts简易实现仪表盘

    目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • Vue使用Echarts画柱状图详解

    目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

  • Vue ECharts简易实现雷达图

    目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • vue+echarts实现动态折线图的方法与注意

    之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法. 实现代码 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 实时

  • Vue+Echarts实现简单折线图

    Vue+Echarts实现简单折线图

    本文实例为大家分享了Vue+Echarts实现简单折线图的具体代码,供大家参考,具体内容如下 Vue+Echarts实现一个折线图,打开vue的项目: 1.在项目里面安装echarts npm install echarts --save 2.在需要用图表的地方引入 import echarts from 'echarts' 3.打开my.vue 继续写代码,代码如下: <template>     <!--为echarts准备一个具备大小的容器dom-->     <div

  • vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）

    本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • vue+antv实现雷达图的示例代码

    vue+antv实现雷达图的示例代码

    一.下载依赖 npm install @antv/data-set npm install @antv/g2 二.代码实现 <template> <div ref="container" /> </template> <script> import DataSet from '@antv/data-set' import { Chart } from '@antv/g2' export default { // 创建雷达图 mounted

  • vue+echarts实现多条折线图

    vue+echarts实现多条折线图

    本文实例为大家分享了vue+echarts实现多条折线图的具体代码,供大家参考,具体内容如下 数据未使用json格式,直接写在页面 大致效果 页面代码: <template>     <!--为echarts准备一个具备大小的容器dom-->     <div id="main" style="width: 100%;height: 300px;"></div> </template> <script

  • vue+echarts实现条纹柱状横向图

    vue+echarts实现条纹柱状横向图

    本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码,供大家参考,具体内容如下 实现效果: <template>   <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div> </template> <script> import { getNoteM

随机推荐