雷达图

vue部分

<template>
  <div class="chart">
    <div class="header">
      <div class="title">管理评价画像</div>
      <div class="legend">
        <ul>
          <li v-for="(item,index) in legend" :key="index">
            <i class="itembefore" :style="{color:item.color}"></i>
            <div>{{item.title}}</div>
          </li>
        </ul>
      </div>
    </div>
    <div id="radar"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { option, legend } from "./options";
export default {
  data() {
    return {
      myChart: {},
      legend
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("radar"));
    this.myChart.setOption(option);
  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 374px;
  transform: translate(50%, 50%);
  .header {
    display: block;
    height: 65px;
    background-color: rgb(84, 84, 111);
    color: #fff;
    .title {
      padding: 10px 0 0 28px;
    }
    .legend {
      ul {
        display: flex;
        justify-content: center;
        padding: 0;
        li {
          list-style: none;
          padding: 0 10px;
          box-sizing: border-box;
          font-size: 12px;
          display: flex;
          .itembefore::before {
            content: "----";
            margin-right: 4px;
          }
        }
      }
    }
  }
  #radar {
    width: 374px;
    height: 220px;
  }
}
</style>

option.js 部分：

 export const option = {
        backgroundColor: 'rgb(84, 84, 111)',
        color: ['#03cc71', '#ff4d4d', '#ffa800'],
    tooltip: {
	show: true,
	backgroundColor: 'rgb(74, 75, 95)', //鼠标移动到图上面时，显示的背景颜色
	padding: 15, //定义内边距
	borderWidth: 0,
	position: ['50%', '50%'],
	textStyle: {
	color: "#fff"
	}
},

radar: {
	indicator: [{
                name: '制度及机制建设',
                max: 6500,
                color: "rgb(192, 188, 195)"
        },
        {
                name: '报表统计',
                max: 16000,
                color: "rgb(192, 188, 195)"
        },
        {
                name: '披露与报备',
                max: 30000,
                color: "rgb(192, 188, 195)"
        },
        {
                name: '交易识别与审批',
                max: 38000,
                color: "rgb(192, 188, 195)"
        },
        {
                name: '限额监控',
                max: 52000,
                color: "rgb(192, 188, 195)"
        },
        {
                name: '关联方管理',
                max: 25000,
                color: "rgb(192, 188, 195)"
        }
],
        splitNumber: 3, // 雷达图线条
        splitLine: {
                lineStyle: {
                        color: ['#03cc71', '#ff4d4d', '#ffa800'],
                        type: 'dashed'
                }
        },
        startAngle: 60,
        radius: 70,
        axisLine: {
                lineStyle: {
                        type: "dashed"
                }
        }
},
    series: [{
    name: 'Budget vs spending',
    type: 'radar',

    itemStyle: {
            color: 'rgb(255, 207, 66)', // 颜色
            borderColor: "rgba(254, 252, 252, 1)"
    },
    areaStyle: {
            opacity: 0.1, // 透明度
            // color: 'yellow', // 颜色
            offset: 1
    },
    symbolSize: 6,
    data: [{
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '管理评价',
    }, ]
}]
};

export const legend = [{        title: "最大值",        color: "#03cc71"},{        title: "平均值",        color: "#ffa800"},{        title: "最小值",        color: "#ff4d4d"}]