使用Vue 3和ECharts创建动态雷达图

创作时间:

作者:

@小白创作中心

使用Vue 3和ECharts创建动态雷达图

引用

CSDN

https://blog.csdn.net/good1223215703/article/details/137349617

本文将介绍如何使用Vue 3和ECharts创建动态雷达图。通过Vue的Composition API以及ECharts的基本功能，实现一个实时更新的雷达图，展示多个点在雷达图上的动态变化。

效果图

代码实现

1. 环境设置

确保你已经创建了Vue项目，并成功导入了ECharts库。这里我就不写了。

2. Vue 3 Composition API与ECharts结合

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from "echarts"

// 创建一个ref变量，用于存储图表元素
const chart = ref();

// 初始化图表
const init = () => {
  // 使用echarts.init方法初始化图表，并传入图表元素和配置项
  const myChart = echarts.init(chart.value as HTMLElement, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });

  // 配置图表选项
  const option = {
    tooltip: {},
    angleAxis: [
      {
        type: 'value',
        startAngle: 135,
        endAngle: 45,
        max: 90,
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        polarIndex: 1,
        startAngle: 45,
        endAngle: 135,
        clockwise: false,
        max: 100,
        min: 0,
        splitNumber: 2,
        axisLabel: {
          inside: true,
          show: false,
        },
        axisTick: {
          show: false
        },
      }
    ],
    radiusAxis: [
      {
        max: 1300,
        min: 0,
        interval: 130,
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: "{value}m",
          showMinLabel: false,
        }
      },
      {
        max: 1300,
        min: 0,
        polarIndex: 1,
        splitLine: {
          show: false,
        },
        interval: 130,
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: "{value}m",
          showMinLabel: false,
          show: true,
          margin: -8,
          align: "left",
        }
      }
    ],
    polar: [{}, {}],
    series: [
      {
        type: 'scatter',
        polarIndex: 0,
        data: [[600, 45], [1300, 45], [1300, 80], [1300, 10]],
        borderWidth: 2,
        coordinateSystem: 'polar',
        encode: {
          tooltip: [0]
        }
      }
    ]
  };

  // 使用setOption方法设置图表选项
  myChart.setOption(option);

  // 监听窗口大小变化，当窗口大小发生变化时，调用resize方法重新调整图表大小
  window.addEventListener('resize', () => myChart.resize());

  // 定义一个变量num，用于控制图表数据的变化
  let num = 0;

  // 使用setInterval方法每隔一段时间更新图表数据
  setInterval(() => {
    num++;
    // 当num乘以30大于1300时，将num重置为0
    if (600 + num * 30 > 1300) num = 0;
    // 使用setOption方法更新图表数据
    myChart.setOption({
      series: [{
        data: [
          [600 + num * 30, 45],
          [1300 - num * 30, 45] , // 根据运行方向添加的数据点
          [1300 - num * 30, 80] ,
          [1300 - num * 30, 10] 
        ]
      }]
    })
  }, 1000);
}

// 当组件挂载时，调用init方法初始化图表
onMounted(() => {
  init();
})
</script>

<template>
  <div class="chart" ref="chart"></div>
</template>

<style scoped>
.chart {
  width: 2400px;
  height: 1400px;
}
</style>