大概效果: 如下

1:封装

<template><div :class="className" :style="{ height: height, width: width }" />
</template><script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";const animationDuration = 3000;export default {mixins: [resize],props: {className: {type: String,default: "chart"},width: {type: String,default: "100%"},height: {type: String,default: "300px"}},data() {return {chart: null};},mounted() {this.$nextTick(() => {this.initChart();});},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {this.chart = echarts.init(this.$el, "macarons");this.chart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'}},radar: {radius: "66%",center: ["50%", "42%"],splitNumber: 8,splitArea: {areaStyle: {color: "rgba(127,95,132,.3)",opacity: 1,shadowBlur: 45,shadowColor: "rgba(0,0,0,.5)",shadowOffsetX: 0,shadowOffsetY: 15}},indicator: [{ name: "1战略", max: 10000 },{ name: "2治理", max: 20000 },{ name: "3结构", max: 20000 },{ name: "4标准", max: 20000 },{ name: "5质量", max: 20000 },{ name: "6安全", max: 20000 },{ name: "7应用", max: 20000 },{ name: "8生存周期", max: 20000 }]},legend: {left: "center",bottom: "10",data: ["1化级", "2管理级", "3级", "4级", "5级"]},series: [{type: "radar",symbolSize: 0,areaStyle: {normal: {shadowBlur: 13,shadowColor: "rgba(0,0,0,.2)",shadowOffsetX: 0,shadowOffsetY: 10,opacity: 1}},data: [{value: [5000, 7000, 12000, 11000, 15000, 14000],name: "1化级"},{value: [4000, 9000, 15000, 15000, 13000, 11000],name: "2管理级"},{value: [5500, 11000, 12000, 15000, 12000, 12000],name: "3级"},{value: [4000, 9000, 15000, 15000, 13000, 11000],name: "4管理级"},{value: [5500, 11000, 12000, 15000, 12000, 12000],name: "6始级"}],animationDuration: animationDuration}]});}}
};
</script>

2:引入

import radar from '@/components/echarts/radar';
export default {components: {radar,}
}

3: 使用

          <radar :width="'612px'" :height="'468px'" :title="'评估能力项等级分布'" />