封装 Echarts 的雷达图(radar chart)组件也可以让你在 Vue 项目中更方便地使用雷达图。以下是封装 Echarts 雷达图组件的思路和示例代码:
(1)继续沿用之前安装的 Echarts 和 Vue-Echarts 插件。
(2)创建一个 RadarChart.vue 组件用于封装雷达图:
<template>
<div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>
<script>
import echarts from 'echarts';
export default {
props: {
data: {
type: Array,
required: true
},
indicator: {
type: Array,
required: true
}
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
radar: {
indicator: this.indicator
},
series: [{
type: 'radar',
data: [
{
value: this.data,
name: 'Radar Chart'
}
]
}]
};
chart.setOption(option);
}
}
};
</script>
(3)在父组件中调用 RadarChart 组件并传入数据和指示器:
<template>
<div>
<radar-chart :data="chartData" :indicator="chartIndicator" />
</div>
</template>
<script>
import RadarChart from './RadarChart.vue';
export default {
components: {
RadarChart
},
data() {
return {
chartData: [80, 90, 70, 85, 95], // 数据值
chartIndicator: [ // 指示器
{ name: 'Indicator A', max: 100 },
{ name: 'Indicator B', max: 100 },
{ name: 'Indicator C', max: 100 },
{ name: 'Indicator D', max: 100 },
{ name: 'Indicator E', max: 100 }
]
};
}
};
</script>
在这个示例中,我们封装了一个 RadarChart 组件,接收两个 props:data
用于传入雷达图的数据值,indicator
用于传入雷达图的指示器。在 RadarChart 组件的 mounted
钩子中调用 renderChart
方法来渲染雷达图。父组件中通过引入 RadarChart 组件并传入数据和指示器来展示雷达图。