前沿：

最近在项目中由于echart.js 4.1.0版本以及往上不支持雷达图出现刻度轴，而需求又必须是要有刻度轴，所以果断采用chart.js来画雷达图，在画的过程中发现坑是真的多，最基本的文档写的一点都不清楚，全靠试试，简直醉了，现在把我折腾的结果记录下来，方便以后学习使用。
上代码。我是那vue-cli搭的项目，所以需要以下配置，里边注释都写好了，详细往下走

<template>
  <div class="incomeDecomPosition">
    <Loading v-show="isShowLoding"
             :fatherHeight="'610px'"></Loading>
    <div class="top20 W100"></div>
    <div class="productMixContent W100 BorderDDD">
      <noDataLists v-show="isNoData === true"
                   :NoDataHeight="'600px'"
                   :NoDataWords="'暂无数据'"></noDataLists>
      <canvas v-show="isNoData === false"
              id="incomeRadar"
              :style="{width: '100%', height: '600px'}"></canvas>

    </div>
    <div class="bottom20 W100"></div>
  </div>
</template>
<script>
import Chart from "chart.js";
import { fundAscribeExposeList } from "@/api/basicManage";
export default {
  data() {
    return {
      isNoData: false,
      isShowLoding: true,
      fundCode: null,
      dateMonths: ""
    };
  },
  mounted() {
    this.drawStyleFactorExposureRadar();
  },
  methods: {
    drawStyleFactorExposureRadar() {
      var ctx = document.getElementById("incomeRadar").getContext("2d");
      new Chart(ctx, {
        type: "radar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],, //图表中每个点周围的字符串数组。
          datasets:  {
          label: ChartsDatas[h].month, //显示的图里的日期  如果最外层的label不设置的话
          data: items, //对应的每一条数据
          fill: false, //不填充线下的区域
          radius: 1,
          borderColor: JiZhunColor[i],
          pointBackgroundColor: JiZhunColor[i],
          backgroundColor: JiZhunColor[i],
          borderColor: JiZhunColor[i],
          pointBackgroundColor: JiZhunColor[i],
          pointBorderColor: JiZhunColor[i],
          pointHoverBackgroundColor: JiZhunColor[i],
          pointHoverBorderColor: JiZhunColor[i]
        };
        },
        //图标的配置项都需要在options里边来完成
        options: {
          title: {
            display: false
          },
          //配置图的布局  上下左右距离
          layout: {
            padding: {
              // left: 50,
              // right: 0,
              top: 20,
              bottom: 20
            }
          },
          //图例
          legend: {
            position: "bottom",
            labels: {
              boxWidth: 25,
              fontColor: "#00FF00" //图例的字体的颜色
            }
          },
          //配置刻度轴相关的颜色
          scale: {
            // Hides the scale
            display: true,
            ticks: {
              //刻度轴上字体的颜色
              fontColor: "#DC143C",
              backdropColor: "#000000",     //刻度轴标签的背景色
            },
            pointLabels: {    //外边一圈字体的颜色
              fontColor: "blue"
            },
            angleLines: {
              //角度线的配置
              color: "#DC143C"
            },
            gridLines: {
              //雷达图外圈轴的颜色  一圈一圈的轴
              color: "#DC143C"
            }
          },
          elements: {
            line: {
              tension: 0,
              borderWidth: 3  //线的粗细
            }
          }
        }
      });
      this.isShowLoding = false;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
@import "../../../styles/myBase.scss";
</style>

补充一下，最近遇到的坑，在火狐浏览器中由于渲染机制的原因，chart.js的配置项在火狐中跟其他浏览器表现得不一样，一下为例子：

刻度的背景色设置为黑色，在火狐中表现得为灰白色，这就很坑，最后采用将背景色修改为透明色就可以解决，这个坑弄了好久，很坑，还好解决了。

       ticks: {
              //刻度轴上字体的颜色
              fontColor: "#DC143C",
              backdropColor: "#000000",     //刻度轴标签的背景色
              backdropColor: "rgba(0,0,0,0)",   //解决方案     
            },

结束语

小编真的是一个一个试出来的。心累，现在贴出来，好好记录一下，希望可以帮助到简友们，有不足的地方，希望多多提意见。