封装 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: {<