morefun/src/pages/chart/components/test.vue

<template>
  <div class="box">
    <div class="speedOption">
      <!-- 仪表盘 -->
      <svg
        viewBox="0,0,560,570"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="
          position: absolute;
          width: 560px;
          height: 570px;
          z-index: 0;
          top: 0;
          left: 0;
        "
      >
        <g>
          <image :href="require('../assets/img/cs.png')" />
        </g>
      </svg>
      <chart
        :options="speedOption"
        :autoResize="true"
        class="chartstyle"
      ></chart>
    </div>
    <div class="pressureOption">
      <!-- 仪表盘 -->
      <svg
        viewBox="0,0,560,570"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="
          position: absolute;
          width: 560px;
          height: 570px;
          z-index: 0;
          top: 0;
          left: 0;
        "
      >
        <g>
          <image :href="require('../assets/img/css.png')" />
        </g>
      </svg>
      <chart
        :options="pressureOption"
        :autoResize="true"
        class="chartstyle"
      ></chart>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 车速表 圆盘value+阴影axisLine-color
      speedOption: {
        series: [
          // 内圆盘
          {
            type: "pie",
            radius: ["0", "25%"],
            center: ["50%", "50%"],
            z: 2,
            tooltip: {
              show: false,
            },
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 600,
                itemStyle: {
                  normal: {
                    color: "rgba(21,31,36,1)",
                  },
                },
                label: {
                  rich: {
                    a: {
                      color: "#fff",
                      align: "center",
                      fontSize: 50,
                      padding: [0, 0, 0, 0],
                      fontWeight: "bold",
                      shadowColor: "#063c92",
                      fontFamily: "LCD",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 30,
                      fontWeight: "bold",
                      fontFamily: "微软雅黑",
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" + params.value + "}\n\n" + "{b|" + "km/h" + "}"
                    );
                  },
                  position: "center",
                  show: true,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
          // 内部阴影
          {
            type: "gauge",
            radius: "81%",
            z: 2,
            center: ["50%", "50%"],
            tooltip: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: [
                  [
                    600 / 1500,
                    {
                      x: 1,
                      y: 1,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 1,
                          color: "rgba(24,100,128,0.8)",
                        },
                        {
                          offset: 0,
                          color: "rgba(24,100,128,0.1)",
                        },
                      ],
                    },
                  ],
                ],
                width: 200,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              // 指针
              show: true,
              length: "70%",
            },
            itemStyle: {
              color: "#fff",
            },
            data: [6000],
          },
          // 上层刻度数阴影
          {
            type: "gauge",
            min: 0,
            max: 1500,
            splitNumber: 12,
            radius: "80%",
            z: 2,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 28,
              fontWeight: "bolder",
              color: "white",
              fontFamily: "LCD",
              rich: {
                a: {
                  fontSize: 28,
                  fontWeight: "bolder",
                  color: "white",
                  fontFamily: "LCD",
                  textShadowColor: "#22e4fb",
                  textShadowBlur: 15,
                },
              },
              formatter: function (value) {
                const d = "{a|" + value + "}";
                return d;
              },
            },
            axisTick: {
              // 坐标轴小标记
              show: false,
            },
            splitLine: {
              // 分隔线
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
      },
      // 车压表
      pressureOption: {
        series: [
          // 内圆盘
          {
            type: "pie",
            radius: ["0", "25%"],
            center: ["50%", "50%"],
            z: 3,
            hoverAnimation: false,
            data: [
              {
                value: 2,
                itemStyle: {
                  normal: {
                    color: "rgba(21,31,36,1)",
                  },
                },
                label: {
                  rich: {
                    a: {
                      color: "#fff",
                      align: "center",
                      fontSize: 50,
                      padding: [0, 0, 0, 0],
                      fontWeight: "bold",
                      shadowColor: "#063c92",
                      fontFamily: "LCD",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 30,
                      fontWeight: "bold",
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" + params.value + "}\n\n" + "{b|" + "m/s²" + "}"
                    );
                  },
                  position: "center",
                  show: true,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
          // 阴影
          {
            type: "gauge",
            radius: "81%",
            z: 2,
            min: 0,
            max: 2,
            startAngle: 90,
            endAngle: -45,
            clockwise: true,
            center: ["50%", "50%"],
            tooltip: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: [
                  [
                    2 / 2,
                    {
                      x: 1,
                      y: 1,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 1,
                          color: "rgba(24,100,128,0.8)",
                        },
                        {
                          offset: 0,
                          color: "rgba(24,100,128,0.1)",
                        },
                      ],
                    },
                  ],
                ],
                width: 200,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
            data: [4],
          },
          // 指针
          {
            type: "gauge",
            radius: "81%",
            z: 2,
            min: 0,
            max: 4,
            center: ["50%", "50%"],
            tooltip: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: [
                  [
                    4 / 4,
                    {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 1,
                          color: "rgba(24,100,128,0.8)",
                        },
                        {
                          offset: 0,
                          color: "rgba(24,100,128,0.1)",
                        },
                      ],
                    },
                  ],
                ],
                width: 200,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              // 指针
              show: true,
              length: "70%",
            },
            itemStyle: {
              color: "#fff",
            },
            data: [4],
          },
          // 刻度数
          {
            type: "gauge",
            min: 0,
            max: 2,
            splitNumber: 2,
            radius: "80%",
            z: 2,
            startAngle: 90,
            endAngle: -45,
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 28,
              fontWeight: "bolder",
              color: "white",
              fontFamily: "LCD",
              rich: {
                a: {
                  fontSize: 28,
                  fontWeight: "bolder",
                  color: "white",
                  fontFamily: "LCD",
                  textShadowColor: "#22e4fb",
                  textShadowBlur: 15,
                },
              },
              formatter: function (value) {
                const d = "{a|" + value + "}";
                return d;
              },
            },
            axisTick: {
              // 坐标轴小标记
              show: false,
            },
            splitLine: {
              // 分隔线
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
      },
    };
  },
};
</script>
<style>
@font-face {
  font-family: "LCD";
  src: url("../assets/font/LCD.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
</style>
<style scoped>
.box {
  display: flex;
}
.speedOption,
.pressureOption {
  width: 560px;
  height: 570px;
  position: relative;
}
.chartstyle {
  width: 100%;
  height: 100%;
}
</style>