在使用Vue3和ECharts绘制雷达图时遇到问题:控制台报错显示刻度读取可能不准确,关于设置了某项属性的提示
最编程
2024-02-23 12:47:46
...
完整代码
<template>
<el-card>
<div ref="radarDiv" class="div-radar" />
</el-card>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const animationDuration = ref(3000)
const radarDiv = ref()
onMounted(() => {
initChart()
})
const initChart = () => {
const chart = echarts.init(radarDiv.value, 'macarons')
chart.setOption({
legend: {
data: ['Allocated Budget', 'Actual Spending']
},
radar: {
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending'
}
]
}
],
animationDuration: animationDuration.value
})
}
</script>
<style>
.div-radar {
width: 100%;
height: 300px;
}
</style>
报错内容
报错位置
radar: {
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
报错原因
报错的原因是在配置的indicator
中设置了max
,数值超过max
的值的话,绘制的图片会超出雷达图的范围,导致无法展示完整,所以只要把这个max
去掉就可以了
修改后代码
radar: {
indicator: [
{ name: 'Sales' },
{ name: 'Administration' },
{ name: 'Information Technology' },
{ name: 'Customer Support' },
{ name: 'Development' },
{ name: 'Marketing' }
]
},