uCharts在vue项目里的使用

1.html部分

image.png

2.js部分
引入包：

image.png
data中数据定义：
image.png

showCharts(){
        // console.log(id)
        const canvas = document.getElementById('canvasDom');
        // console.log(canvas)
        const ctx = canvas.getContext("2d");
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        uChartsInstance['canvasDom'] = new uCharts({
          // animation: true,
          // background: "none",
          categories: this.categoriesData,
          // color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          // color: ["#15E7B5"],
          // padding: [
          //   5,
          //   5,
          //   5,
          //   5
          // ],
          context: ctx,
          extra: {
            radar: {
              gridType: "radar",
              gridColor: "#ffffff",
              gridCount: 3,
              labelColor: "#fff",
              opacity: 0.2,
              border: false,
              borderWidth: 2,
              max: 5,
            },
            tooltip: {
              showBox: true,
              showArrow: true,
              showCategory: false,
              borderWidth: 0,
              borderRadius: 0,
              borderColor: "#000000",
              borderOpacity: 0.7,
              bgColor: "#000000",
              bgOpacity: 0.7,
              gridType: "solid",
              dashLength: 4,
              gridColor: "#CCCCCC",
              fontColor: "#FFFFFF",
              splitLine: true,
              horizentalLine: false,
              xAxisLabel: false,
              yAxisLabel: false,
              labelBgColor: "#FFFFFF",
              labelBgOpacity: 0.7,
              labelFontColor: "#666666"
            }
          },
          height: canvas.height,
          legend: {
            show: false,
            position: "right",
            float: "center",
            padding: 5,
            margin: 5,
            backgroundColor: "#15E7B5",
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 0,
            fontSize: 13,
            fontColor: "#666666",
            lineHeight: 25,
            hiddenColor: "#CECECE",
            itemGap: 10
          },
          // padding: [15,15,0,5],
          series: this.seriesData,
          type: "radar",
          // canvasId: "",
          // canvas2d: true,
          background: "none",
          animation: true,
          timing: "easeOut",
          duration: 1000,
          color: ["#15E7B5"],
          padding: [
            5,
            5,
            5,
            5
          ],
          rotate: false,
          errorReload: true,
          fontSize: 13,
          fontColor: "transparent",
          enableScroll: false,
          touchMoveLimit: 60,
          enableMarkLine: false,
          dataLabel: true,
          dataPointShape: true,
          dataPointShapeType: "solid",
          tapLegend: false,
          width: canvas.width,
        });
        // canvas.onclick = function(e) {
        //   uChartsInstance[id].touchLegend(getH5Offset(e));
        //   uChartsInstance[id].showToolTip(getH5Offset(e));
        // };
        // canvas.onmousemove=function(e) {
        //   uChartsInstance[id].showToolTip(getH5Offset(e));
        // };
      },

3.效果展示

image.png