本文将介绍如何使用Vue 3和ECharts创建动态雷达图。
我们将使用Vue的Composition API以及ECharts的基本功能来实现一个实时更新的雷达图,展示多个点在雷达图上的动态变化。
效果图:
- 设置环境: 首先,确保你已经创建了Vue项目,并成功导入了ECharts库。这里我就不写了。
2.直接上代码
<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]],
// color: 'RED',
// borderColor: '#000',
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>