Echarts ，vue 仪表盘

<div id="Dashboard" class="Dashboard"></div>

按需引用

import echarts from "echarts";
require("echarts/lib/chart/gauge");

methods：{
  codeQuery() {
    let param = {
      csccode: this.csccode,
      year: new Date().format("yyyy"),
      };
    api.codeQuery(param).then((res) => {
         // 数据展示处理
         let gaugedata = res.result.dataList.customAssessRate;
         let resultData = res.result.dataList.customAssessResult;
         this.lineChart = echarts.init(document.getElementById("Dashboard"));
         let options = {
            series: [
              {
                type: "gauge",
                axisLine: {
                  lineStyle: {
                    width: 12,
                    color: [     // 间隔
                      [0.3, "#66cea2"],
                      [0.7, "#ffb550"],
                      [1, "#ff5273"],
                    ],
                  },
                },
                pointer: {
                  itemStyle: {
                    color: "auto",
                  },
                },
                axisTick: {
                  length: 4,
                  lineStyle: {
                    color: ["#66cea2", "#ffb550", "#ff5273"],
                    width: 1,
                  },
                },
                splitLine: {
                  length: 20,
                  lineStyle: {
                    color: "#fff",
                    width: 1,
                  },
                },
                axisLabel: {
                  color: "auto",
                  distance: 10,
                  fontSize: 12,
                },
                detail: {
                  valueAnimation: true,
                  // formatter: "{value} %",
                  color: "auto",
                  fontSize: 18,
                  formatter: function (value, name) { // 展示处理
                    console.log(name, value);
                    if (value) {
                      name = resultData;
                      value = value + `%`;
                    }
                    return [name, value].join("\n\n");
                  },
                },
                data: [
                  {
                    name: "",
                    value: gaugedata,
                  },
                ],
              },
            ],
          };
            //数据渲染到图表上面
          this.$nextTick(() => {
            this.lineChart.setOption(options);
          });
 })
}
}